TypeScript常用知识(内附泛型约束详解)

1.函数

1.1 函数写法

//函数声明
function sum(x:number,y:number):number{
   
    return x+y
}

//函数表达式
let sum = (x:number,y:number):number=>{
   
    return x+y
}

上面函数表达式只是对右侧的匿名函数进行了类型定义，等号左边的sum是通过赋值操作进行类型推断出来的，如果需要我们手动给sum添加类型，则应该是这样

let sum:(x:number,y:number)=>number = function (x:number,y:number):number=> {
   
    return x+y
}

这样的代码显得比较臃肿，我们可以通过接口的方式来定义一个函数需要符合的形状

interface Sum{
   
    (x:number,y:number):number
}

let sum:Sum = function(x:number,y:number):number=>{
   
    return x+y
}

1.2 函数中的可选参数：

function sum(x:number,y?:number):number{
   
	if(y){
   
        return x+y
    }
    return x
}
sum(1,2) //输出3
sum(1) 	//输出1

1.3 函数中的默认参数：

function sum(x:number,y:number=10):number{
   
    return x+y
}
sum(1,2) 			//输出3
sum(1,undefined) 	//输出11

2.类型别名type 和接口interface

2.1 类型别名

类型别名用来给一个类型起个新名字，

type dataType = number
type dataType = number|string|tuple
type dataType = {
   
    name:string,
    age:number
}
type dataType = (name:string,age:number)=>number   //定义返回值为numberd的函数类型

2.2 字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个

type dataType = 'red'|'blue'

2.3 接口interface

定义参数或方法的数据类型

interface IUser{
   
    name:string,
    age:number
}
interface ISetUser{
   
    (name:string,age:number):void    //定义无返回值接口
}

访问接口里面的类型

//访问接口Test里面的类型
interface Test{
   
    test:'a'|'b'
}
var a:Test['test'] = 'a'

2.4 type和interface之间的不同点

1 类型别名可以用于其它类型 （联合类型、元组类型、基本类型（原始值）），interface不支持

type dataTypeA = {
   a:number}
type dataTypeB = {
   b:number}
//union联合类型
type dataType = dataTypeA | dataTypeb
//tuple元祖
type dataType = [dataTypeA,typeDataB]
//原始值
type dataType = number