TS中冒号后面的都为类型标识。
image.png

一、原始类型(布尔、数字、字符串)

  1. let bool:boolean = true;
  2. let num:number = 10;
  3. let str:string = 'hello zl';

二、数组

声明数组中元素数据类型

  1. let arr1:number[] = [1,2,3];
  2. let arr2:string[] = ['1','2','3'];
  3. let arr3:(number|string)[] = [1,'2',3];
  4. let arr4:Array<number | string> = [1,'2',3]; // 泛型方式来声明

三、元组类型

特殊的数组,限制长度个数、类型一一对应。

  1. let tuple:[string,number,boolean] = ['zf',10,true];
  2. // 向元组中增加数据,只能增加元组中存放的类型
  3. // 可以通过push方法,向元组中增加数据,但是不能通过下标进行访问
  4. tuple.push('回龙观');
  5. tuple[3] // 会报错

image.png

四、函数

image.png
x,y定义成了number类型,通过类型推断,返回值也是number类型,所以不设定也没有关系。

  1. // 定义一个函数类型
  2. let compute: (x:number, y:number) => number
  3. compute = (a, b) => a + b
  1. type GetName = (firstName:string, lastName:string) => string;
  2. let getName = (firstName:string, lastName:string):string => {
  3. return firstName+lastName;
  4. }

可选参数

function printPerson (name:string, age?:number) {
  return `${name}+${age}`
}
// age这个参数可传可不传
printPerson('zhangsan')

函数的重载

// 注意函数的声明和函数的实现必须紧挨着,中间不能有其他方法
function add (a: string, b: string):void
function add (a: number, b: number):void
function add (a: string|number, b: string|number):void {

}
add('a','b') // 可以
add(1,2) // 可以
add('a',2) // 不可以

经典案例
redux中的compos

五、Object对象

let obj: object = {x: 1, y: 2}

image.png
image.png

六、Symbol类型

Symbol表示独一无二,也就是有唯一的值。

// symbol
let s1: symbol = Symbol()
let s2 = Symbol()
console.log(s1 ===  s2) // false


配置
{
  "compilerOptions": {
    lib: ['ESNext']
  }
}
const s1 = Symbol('key');
const s2 = Symbol('key');
console.log(s1 == s2); // false

七、null 和 undefined

任何类型的子类型,如果strictNullChecks的值为true,则不能把null 和 undefined付给其他类型。
如果将strictNullChecks的值改为false,则可以把null 和 undefined付给其他类型。

let un: undefined = undefined
let nu: null = null

如果想把一个类型赋值成多个类型,包括undefined和null,也可以使用联合类型。

八、void类型

没有任何返回值类型,就是void类型。
只能接受null,undefined。一般用于函数的返回值

let a:void;
a = undefined;

严格模式下不能将null赋予给void

九、any

不进行类型检测

let arr:any = ['jiagou',true,{name:'zl'}]

十、never类型

永远不会有返回值,例如抛出错误或者是死循环

let error = () => {
  throw new Error("error");
}
let endless = () => {
  while(true) {}
}

function fn (x:string|number){
  if (typeof x === 'string') {
    console.log(x) // x是string类型
  } else if (typeof x === 'number') {
    console.log(x) // x是number类型
  } else {
    console.log(x) // x是never类型 因为不会到走到这里来,前提是staticNullChecks = true
  }
}

十一、枚举类型

enum USER_ROLE {
    USER, // 默认从0开始
    ADMIN,
    MANAGER
}
// {0: "USER", 1: "ADMIN", 2: "MANAGER", USER: 0, ADMIN: 1, MANAGER: 2}

可以枚举,也可以反举。

// 编译后的结果
(function (USER_ROLE) {
    USER_ROLE[USER_ROLE["USER"] = 0] = "USER";
    USER_ROLE[USER_ROLE["ADMIN"] = 1] = "ADMIN";
    USER_ROLE[USER_ROLE["MANAGER"] = 2] = "MANAGER";
})(USER_ROLE || (USER_ROLE = {}));
  • 异构枚举

    enum USER_ROLE {
      USER = 'user',
      ADMIN = 1,
      MANAGER,
    }
    
  • 常量枚举

    const enum USER_ROLE {
      USER,
      ADMIN,
      MANAGER,
    }
    console.log(USER_ROLE.USER)// console.log(0 /* USER */);
    

    将程序中不容易记忆的硬编码或者是在未来中可能改变的常量抽取出来,定义成枚举类型。这样就会方便维护,便于修改。

    十二、非空断言

    ```json 只有当 staticNullChecks = true;的时候,才会进行检查

let element: (HTMLElement | null) = document.getElementById(‘root’); // 告诉ts,我的element变量肯定有值,不用担心为null的情况 element!.style.color = ‘red’;

<a name="MNPHv"></a>
## 十三、字面量类型和类型字面量
```typescript
const up: 'Up' = 'Up';
const down: 'Down' = 'Down';
const left: 'Left' = 'Left';
const right: 'Right' = 'Right';

type Direction = 'Up'|'Down'|'Left'|'Right'
// 可实现枚举的效果
function move (direction:Direction){}
move('Up')
type Preson = {
  name: string;
  age: number;
}

let p1:Preson = {
  name: 'zhangsan',
  age: 10
}