TypeScript常用类型

1. 类型注解

示例：

let age:number = 31

说明：代码中的:number就是类型注解。

作用：为变量增加类型约束，表示该变量只能是这个类型，不能用其它类型的值赋值给它，否则报错。

2. 常用基础类型

TS中的常用基础类型可以细分为两类：

• JS已有类型

  基本类型：number/string/boolean/null/undefined/symbol(es6新增)

  对象类型：object（包括：数组、对象、函数等）

• TS新增类型

  联合类型、自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void、any等。

3. 基本类型

number/string/boolean/null/undefined/symbol(es6新增)

用法与Js一致，示例：

let age:number = 10
let name:string = '张三'
let isStudent:boolean = false
let ss:null  =null
let abc:undefined = undefined
let dd:symbol = Symbol()

4. 数组类型

示例：

let ages:number[] = [1,2,3]    //推荐该方式写法
let ages2:Array<number> = [1,2,3]

扩展：如果数组中是否可以有多个类型呢？

答案是肯定的，这时可以采用联合类型。

5. 联合类型

通过(xx | xx)方式，如下示例：

let ages:(number | string)[] = [1,2,'a']

注：一定要带小括号，若不带小括号则表示该变量要么是number类型要么是string[]类型。

6. 类型别名

声明：type 别名 = 实际类型

使用场景：当同一类型复杂但又被多次使用时，可以通过类型别名，简化该类型。

关键字：type

示例：

type Num = number
let age:num = 123


type CusArray = (number|boolean)[]
let arr:CusArray = [1,false]

7. 函数类型

指给函数指定参数类型和返回值类型

示例：

//方式一：函数声明
function sub(num1:number,num2:number):number{
    return num1 - num2
}
//方式二：函数表达式
const sub = (num1:number,num2:number):number =>{
    return num1 - num2
}

当采用函数表达式形式定义函数时还可采用类似给变量指定类型的方式同时指定参数类型、返回值类型,如下示例：

const sub:(num1:number,num2:number):number = (num1,num2)=>{
    return num1 - num2
}

注意：该方式仅适用函数表达式形式

可选参数

定义：在函数的参数名称后面增加一个?

特点：可选参数必须放在函数参数的后面，不能后面跟随必传参数。

示例：

function sub(n1:number,n2:number,ret?:number){
    return n1 - n2
}

8. 对象类型

定义：用大括号给属性指定类型，有多个属性 时用;隔开。

如下示例

let person:{name:string;age:number;toString():void} = {
    name:'张三',
    age:10,
    toString(){
        console.log('name:'+name+',age:'+age)
    }
}

属性还可以采用多行的形式，这时;可省略，如下写法：

let person:{
    name:string
    age:number
    toString():void
} = {
    name:'张三',
    age:10,
    toString(){
        console.log('name:'+name+',age:'+age)
    }
}

可选属性

函数存在可选变量，对象的属性也存在可选属性，定义方式也是采用关键字?

function output(data:{tag:string;msg?:string}){
    console.log(data.tag+data.msg)
}

9. 接口

定义：采用关键字interface，形式：interface xxx{}.

//声明接口
interface IUser{
    name:string
    age:number
    toString():void
}

//使用接口
let user:IUser={
    name:'张三',
    age:20,
    toString(){
        console.log('xxx')
    }
}

对比：接口（interface）和类型别名（type）区别？

• 相同点：都可以给对象指定类型。

• 不同点：

  • 接口，仅为对象指定类型

  • 类型别名，可以为任意类型指定别名，范围更广

继承特性

当两个或多个接口有相同的属性或函数，可以将公共部分单独抽离出来，通过继承方式来实现复用。

关键字：extends

如下示例：

interface IPoint{
    x:number
    y:number
}
//ILine 拥有了x,y属性
interface ILine extends IPoint{
    width:number
}
//ICircle 拥有了x,y属性
interface ICircle extends IPoint{
    radius:number
}

10. 元组类型

定义：是另一种类型的数组，它明确了元素个数和对应索引的类型。

let color:[number,number,number] = [255,255,255]

11. 类型推论

TS中，某些没有明确指定类型的地方，TS可以帮助我们提供类型。所以由于存在类型推论机制存在，在一些场景类型注解是可以省略不写的。

那么什么场景下TS可以对类型进行推论呢？

1.声明变量时并初始化（即赋值情况）

//声明变量并初始化时，可以省略类型注解
let age = 10

2.函数返回值类型明确的时

//函数返回值的类型可以省略
function sub(num1:number,num2:number){
    return num1 - num2
}

12. 类型断言

使用场景：调用函数时，其返回值不是具体的类型。

定义：关键字as，说白了就是类型强制转换

形式：as [具体类型]

//常用 as 
const link = document.getElementById('link') as HTMLAnchorElement
//不推荐写法
const link = <HTMLAnchorElement>document.getElementById('link')

13. 字面量类型

定义：采用某些特点的值作为变量的类型的方式即为字面量类型。

// 普通变量 num的类型为number
let num:number = 10

// 常量num1的类型为8，而不是number类型了
const num1 = 8

字面量类型不仅仅适用于number类型，对其它类型同样适用。

适用场景：往往会配合联合类型一起使用，实现一组明确的可选值列表，类似枚举。

//表示参数shape只能是line/circle/rectangle/triangle中的一个值
function createShape(shape:'line' | 'circle' | 'rectangle' | 'triangle'){
    ....
}

14. 枚举

定义：定义一组命名常量，描述一个值，该值可以是这些命名常量中一个。

关键字：enum

说明：功能类似字面量类型+联合类型组合。

//定义枚举
enum Shape{ 
    Line,Circle,Rectangle,Triangle
}

//使用
function createShape(shape:Shape){
    console.log("shape:"+shape)
}

//调用上面函数
createShape(Shape.Line)

注意：枚举成员是有值的，默认为：从0开始自增的数值。

数字枚举：当枚举成员的值为数字

当然也可以给枚举成员初始化值，如下：

//此时值为：Line->3,Circle->4,Rectangle->5,Triangle->6
enum Shape{Line = 3,Circle,Rectangle,Triangle}

//同样可以给每个成员都设置值
enum Shape{Line = 3,Circle=5,Rectangle=8,Triangle=9}

字符串枚举：枚举的成员值为字符串，并且每个成员均需要初始化

enum Shape{
    Line = 'line',
    Circle = 'circle',
    Rectangle = 'rectangle',
    Triangle = 'triangle'
}

值得注意的是：字符串枚举是没有自增长行为的。

上述字符串枚举被tsc命令编译成如下js代码：

var Shape;
(function (Shape) {
    Shape["Line"] = "line";
    Shape["Circle"] = "circle";
    Shape["Rectangle"] = "rectangle";
    Shape["Triangle"] = "triangle";
})(Shape || (Shape = {}));

一般情况下，推荐使用字面量类型+联合类型组合的方式，相比枚举来说会更简洁、直观、高效。

15. any类型

原则：不推荐使用any，这会让TypeScript变成’AnyScript’，会失去TypeScript的优势。

当使用Any类型时，可以对该对象进行任意操作，并且不会有相关的代码信息提示，包括可能存在的错误。

let obj:any = {a:2}
//以下操作均不会有代码信息提示，包括可能存在的错误信息
obj.y = 10
obj()

注意下两种情况会默认为any类型

• 当定义一个变量未设置类型注解并且未初始化值时

• 函数参数不加类型

//这种定义时，obj的类型即为any类型
let obj

//这这种定义，num1 num2即为any类型
function sub(num1,num2){
  ...  
}

16. typeof类型

typeof提供数据类型查询功能，在TS中可以用来查询上下文中变量或属性的类型。

let point= {x:1,y:2}

//这种方式表示p可以引用变量point的类型，即通过typeof查询point的类型
function formatPoint(p:typeof point){

}

代码库：https://github.com/zhang-hai/MySummary