ts数据类型的定义

1. 基本数据类型

let title = '张三'
let age = 18
let loading = true
let obj = null
let total = undefined

对比的写法

let title:string = '张三'
let age:number = 18
let loading:boolean = true
let obj:null = null
let total:undefined = undefined

上面都是一个变量，一种类型，那么如何一个变量多种类型呢

let title:number|string = 18

表示变量title可能是数字或者字符串，多种数据类型中的一种，TS中称为联合类型

2. 引用数据类型

定义数组

let arr = [1, 2, 3]

对比的写法

let arr:number = [1, 2, 3]
let arr:Array<number> = [1, 2, 3]

写法的含义表示数组的每一项都是数字，长度不固定

已知数组的长度和类型：在TS中称为元组类型

let arr: [string, number] = ['张三', 18]

表示数组只能是两项，第一项是字符串，第二项是数字，不能多，不能少

定义对象

let obj = {
  name: '张三',
  age: 18
}

对比的写法

interface Props {
  name: string,
  age: number
}

let obj: Props = {
  name: '张三',
  age: 18
}

console.log(obj)

表示name是字符串类型，age是数字类型，只能有两个属性，不能多，不能少

interface 在TS中称为接口，用来描述对象的形状

interface Props {
  name: string,
  age: number,
  title?:string
}

问好和冒号表示该属性可能有可能没有

3. 枚举类型

表示值可能出现的情况，如性别是男是女，固定的，数量不多

enum Gender {
  BOY,
  GIRL
}

console.log(Gender.BOY) // 0
console.log(Gender.GIRL) // 1

编译之后

"use strict";
var Gender;
(function (Gender) {
    Gender[Gender["BOY"] = 0] = "BOY";
    Gender[Gender["GIRL"] = 1] = "GIRL";
})(Gender || (Gender = {}));
console.log(Gender.BOY); // 0
console.log(Gender.GIRL); // 1

可以指定默认值

enum Gender {
  BOY = 1001,
  GIRL = 1002
}

console.log(Gender.BOY) // 1001
console.log(Gender.GIRL) // 1002

常数枚举

const enum Gender {
  BOY,
  GIRL
}

console.log(Gender.BOY) // 0
console.log(Gender.GIRL) // 1

编译之后

"use strict";
console.log(0 /* BOY */); // 0
console.log(1 /* GIRL */); // 1

3. 任意类型

let todo:any = 'go home'

不建议使用，为了强类型校验，建议给每个变量都定义好数据类型

4. 函数返回值

函数有返回值的情况

function todo(a: number): number {
  return a
}

函数没有返回值使用void

function todo(a: number): void {
  console.log(a)
}

函数抛出错误，永远不会执行完成（如死循环），使用never

function demo(): never {
  throw new Error('出错了')
}

5. 类型断言

通过断言成数字再进行调用

let a:number|string;
console.log((a as number).toFixed(2))
console.log((<number>a).toFixed(2))

不能断言成联合类型中不存在的类型

6. 字面量类型

通过type关键字进行定义

type Gender = 1 | 2;
let boy:Gender = 1;
let girl:Gender = 2;

表示几个值中的某一个，联合类型表示多种类型中的一种。限制值和限制类型的区别。