TypeScript-03-语法基础

1.前言

1. TS脚手架环境搭建
   都搭好了一直没时间继续往下写
2. 疫情期间就在家好好梳理知识吧
3. 必须让自己强大起来,才有选择的权利

---

2. 类型基础语法

2.1 基础写法

let str1:string    //类型注解
str1 = "郑州加油"  // 正确
str1 =  4           //错误

---

2.2 语法分析

1. 变量名:类型
2. 常见的原始类型:string number boolean undefined null symbol
   注意小写的类型 ,大写的是构造函数

---

2.3 报错图示

1.png

---

2.4 报错分析

1. 声明了函数类型就不可以在更改
2. 这就是ts的一大核心特点 强类型

---

3. 类型推断

3.1 基本用法

let var2 = true
var2 = "22"   //  波浪线报错

---

3.2 报错图示

1. 报错分析
   1.png

---

3.3 错误分析

1. 声明变量直接赋值 就属于类型推断
2. 赋值的时候,ts会根据变量的初识值类型来推动变量的类型
3. 所以后面进行赋值操作,会进行检查,类型不匹配就把错
4. 类型注解每次都得写类型比较麻烦
5. 这个推断比较方便

---

4. 类型数组的写法

4.1 基本用法

let arr: string[];
arr = ["yzs"]
//arr = ["yzs",30]  报错

4.2数组写法2

 let arr1:Array

这种写法比较繁琐,所以个人比较喜欢第一种写法

---

4.3 报错

1.png

---

4.4 错误分析

1. 要求数组里面的每一个元素 都是声明的时候指定的类型
2. 这个语法和 c# 和Java是一样的

---

5.元组 Tuple

1. 在这个TS里面 数组放不同的元素叫做元组,其实也和python的元组一样

5.1用法

let yzs: [string, number, boolean] = ['Yzs', 25, true];
yzs = [20] //报错

---

5.2 错误

1.png

---

5.3 分析

1. 声明的时候定义了元组里面的不同类型,这个是有顺序的
2. 所以进行赋值操作的时候也必须按照类型顺序赋值,不然报错

---

6. any 泛型

1. 有时候单独定义数组的类型比较繁琐,而且也不确定会是什么类型, 这个时候可以用 any
2. any类似 其他语言里面的泛型

6.1 基本用法

let varAny: any;
varAny = "xx"
varAny = 3

---

6.2 分析

1. any 就是泛型 就是任意类型
2. 所以赋值什么类型都不会报错
3. 建议少用这个 any,因为这个有违ts强类型的初衷

---

7. 数组泛型

7.1 基本用法

let arrAny: any;
varAny = [1, true, "yzs"]
varAny[1] = 666

---

7.2 分析

1. 声明数组的时候使用 any,
2. 数组内的元素就可以写任意类型

---

8.函数中的类型约束

8.1 基本用法

function greet(person: string): string {
    return 'hello' + person
}

---

8.2分析

形参的类型语法

(person: string)

1.参数后面:类型

---

函数返回值的类型

()后面跟:类型

---

8.3 使用

代码提示

1.png

---

8.4错误提示

1.png

---

8.5 正确提示

1.png

---

8.6 代码提示

1. 这就是所谓的代码提示,怎么来的
2. 这就是vscode 用ts编写的原因
3. 这就是 ts 之前其实经常用的意思

---

9.void 类型 没有返回值的函数

9.1基本用法

function warn(): void { }

---

9.2 提示

1. vscode 中的TS应用 代码提示
   1.png

---

9.3 void

1. 在其他语言里面就代表无返回值

---

10. 形参默认值

= 默认值 和以前没区别

function greet(person: string, sex = 1): string {
    return 'hello' + person
}

---

11. 可选参数

? 代表可选

function greet(person: string, sex = 1, age?: number): string {
    return 'hello' + person
}

---

参考资料

xcatliu -TS入门教程
TS脚手架环境搭建

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切都是为了部落的崛起

共勉