Skip to main content

Typescript语法细节

TS语法细节​

TS的类型系统允许我们使用多种运算符，从现有类型中构建新类型

联合类型​

联合类型中的每一个类型被称为联合成员（union`s members)

类型别名​

type IDType = number | string

接口的声明​

interface PT {
x:number
y:number
    }

类型别名和接口的区别

1. type类型使用范围更广一些，接口类型只能用于声明对象

    type MyNumber = number


2. 在声明对象时，interface可以多次声明,type不允许两个相同名称的别名同时存在

    interface PT {
    x:number
    y:number
    }

    interface PT {
        z:number
    }

    const point:PT = {
        x:1,
        y:2,
        z:3
    }

3. interface支持继承

    interface IP{
    name:string
    age:number
    }

    interface OP extends IP{
        data:string
    }

    const NP:OP = {
        name:'xx',
        age:12,
        data:'home'
    }

4. interface可以被类实现

总结：如果是非对象类型的定义使用type，如果是对象类型的声明就用interface

交叉类型 &​

两种类型需要同时满足，注意和联合类型的差别（联合类型满足其中一种就可以了） 用&符号来组合两种类型

interface IK{
    name:string
    age:number
}

interface IC{
    name:string
    coding: ()=>void
}

const  info:IK&IC = {
    name:'why',
    age:18,
    coding:function(){
        console.log(this.age);
        
    }

}

类型断言（Type Assertions） as​

有时候TS无法获取具体的类型信息，这个时候我们需要使用类型断言

类型断言的规则：断言只能断言成更加具体的类型，或者 不太具体 类型

非空类型断言​

非空类型断言(有点危险，只有确保一定有值的情况才能使用)

字面量类型​

type Direction = 'left'|'right'|'up'|'down'

具体问题解决

const info ={
url:'xxx',
method:'post'
}
//下面的做法是错误的：info.method获取的是string类型
request(info.url,info.method)

//解决方案一 ：info.method进行类型断言
request(info.url,info.method as 'post')

//解决方案二 ： 直接让info对象类型是一个字面量类型
 const info2:{url:string,method:'post'} = {
     url:'xxx',
     method:'post'
 } 

const info2 = {
    url:'xxx',
    method:'post'
} as const

类型缩小​

常见的类型保护如下几种

  • typeof
  • 平等缩小（===、！==）
  • instanceof
  • in
  • 等等

TS的函数类型​

函数类型表达式(Function Type Expressions)​

const bar:any = (num1:number):number=>{
return 123
}

函数的调用签名(Call Signatures)​

interface IBar {
name:string
    //函数可以调用：函数调用签名
    (num1:number):number
}

const bar:IBar = (num1:number):number=>{

    return 123
    
}

bar.name = 'asdf'

函数的构造签名(Construct Signatures)​

class Person{

}

interface ICTORPerson{
    new ():Person
}

function factory(fn:ICTORPerson){
    const f = new fn()
    return f
}

factory(Person)

函数的可选参数​

function foo(x:number,y?:number){
    if(y!==undefined){
        console.log(y+10)
    }
}

函数的默认值​

1. 有默认值的情况下，参数的类型注解可以省略
2. 有默认值的参数可以接受一个undefined的值

function foo(x:number,y:number = 100){
    if(y!==undefined){
        console.log(y+10)
    }
}

参数的剩余参数​

function foo(...arg:any[]){

}

foo(123,321)

函数的重载​

  1. 先编写重载签名

    function add(arg1:number.arg2:number):number function add(arg1:string,arg2:string):string

  2. 编写通用的函数实现

    function add(arg1:any,arg2:any):any{ return arg1+arg2 }

开发中如何选择

  1. 如果只是描述函数类型本身(函数可以被调用),使用函数类型表达式
  2. 如果在描述函数作为对象可以被调用,同时也有其他属性时,使用函数调用签名

this类型​

//ThisType
interface IState{
    name:string
    age:number
}

interface IStore{
    state:IState
    eating:()=>void
    running:()=>void
}

const store:IStore & ThisType<IState>={
    state:{
        name:'why',
        age:18
    },
    eating:function(this:IState){
        console.log(this.name);
        
    },
    running:function(this:IState){
        console.log(this.name);
        
    },

}