前端TS语法基础篇

本次一共推出三篇文章，TS基础篇、TS高阶篇、TS习题篇，三篇文章均已发布。

类型

ts大概有下面这几种类型，这些类型不仅仅是变量可以声明的类型，函数的返回值类型可以使用

1. 布尔类型：boolean
2. 数字类型：number
3. 字符串类型：string
4. 数组类型：array
5. 元组类型：tuple
6. 枚举类型：enum
7. 任意类型：any
8. null 和 undefined 类型
9. void 类型
10. never 类型
11. 对象类型：object

1. 原始数据类型

下面简单举出几种类型 => number string boolean undefined null symbol

const str2: string = "1";
// let str2:number = "1";  // 报错，因为它的值类型为字符串

const bool: boolean = true;
const num3: number = 10;
const und: undefined = undefined;
const nul: null = null;
const sy: symbol = Symbol('123');
// Symbol创建出来的地址永远是新的（会创建新的内存空间）
// 例如：a = 123 b = 123，那么a的地址 = b的地址，而Symbol(123) != a
const vo: void = undefined; // void：空，js没有该类型
// void一般用于函数
function fn(): void {
    // ts中，函数没有返回值，函数类型就为void
  }
// 函数类型是undefined会报错，除非函数返回undefined
function fn1(): undefined {
     return undefined
  }

注意：这里需要提醒一点，就是如上方所写的 const str2: string = "1" ，其实大可以不写类型，可以直接写成const str2 = "1" 因为TS会有自带的类型推导，会自动推导成string类型，所以实际开发中往往会采用这种写法。函数的返回值也是一样，当返回值只有一种类型或者没有返回值，均不用写返回值类型，TS同样可以进行类型推导

2. ts的非原始类型

// ts非原始类型 object(常用) Object {}
let obj:object = {a: 1};
let arr:object = [1,2,3];
// let num:object = 20; // 报错，object不包含number类型

let obj1:Object = {b: 1};
let arr1:Object = [1,2,3];
let num:Object = 2; // 不会报错，Object包含
let str:Object = 'hello';
let bool:Object = true;

let obj2:{} = {b: 1};
let arr2:{} = [1,2,3];
let num2:{} = 2;
let str2:{} = 'hello';
let bool2:{} = true;
// {} 等效于 Object

// let arr:object = [1,2,3];
// 数组的元素一般数据类型都一致，便于处理

// 第一种写法：
let arr1:number[] = [1,2,3];  // 表示该数组中【元素】的数据类型为number
arr1[0] = 10;
// arr1[1] = "10";  // 报错

// 第二种写法：泛型 类型参数化
let arr2:Array<number> = [10, 20, 30]
arr2[0] = 10;
// arr2[1] = "10";  // 报错

// 元组（不同类型的数组）
let arr3:[number, number, boolean] = [10, 20, true]
arr3[0] = 20
// arr3[1] = '123' // 报错
arr3[2] = false

3. 联合类型

// 联合类型 | 或
let numAndStr:number|string = 10;
numAndStr = 'hello';

// 1|'2' 在这里的1 和 '2‘是类型， 常量，表示numAndStr2的值只能是 1 或 '2'
let numAndStr2: 1|'2' = 1
let numAndStr3: 1|'2' = '2'
// let numAndStr4: 1|'2' = 2 // 报错，只能是1 或 '2'中的一个

// 表明obj必须要有a 或 b属性，并且a的类型为1，或b的类型为'3'（可以a、b都有）
let obj:{a:1}|{b:'3'} = {a: 1};
// let obj:{a:1}|{b:'3'} = {a: 3}; // 报错
// let obj2:{a:1}|{b:'3'} = {a: '2'}; // 报错
let obj3:{a:1}|{b:'3'} = {b: '3'};
// let obj4:{a:1}|{b:'3'} = {b: 2}; // 报错
// let obj4:{a:1}|{b:'3'} = {b: '5'}; // 报错

4. 交叉类型

// 交叉类型 &
let a:number&string; // 不会有任何值满足这个类型（又是数字，又是字符串）❌