TypeScript の 类型定义

定义基础类型

//字符串 数字 boolean 类型 let user :string = 'Tom'; let age :number = 12; let isShow :boolean = false  

定义对象类型

// 数组定义 let isarray1: string [] = ['boy','girl'];  let isarray2:Array<number> = [2,1]  // 普通对象定义 let teacher:{     name:string,     age:number } = {     name:"ceshi",     age:18 } // 类定义 class Student{     name:string,     age:number } let xiaoming : Student = new Student();  /* 方法定义 */ // 函数表达式 let getTotal:() => number  =   () => {     //返回值必须为number类型的方法 }  //函数声明 function getTotal:number() {     //返回值必须为number类型的方法 }  //解构赋值的函数 function getTotal({n1,n2} : {n1:number,n2:number}){      }   

特殊的几个类型

//元组类型（tuple）属于数组的一种，已知元素数量和类型的数组，个元素的类型不必相同 let arrX:[string,number] arrX = ['21',12]   //枚举类型 enum enum Color {Red,Green,Blue} let mj:Color = Color.Blue // console.log(mj)//2  enum Flag{success=1,error=2} let s:Flag = Flag.success // console.log(s)  // 只定义不赋值,这里的 `any` 代表的为任意类型 let newInfo:any;    // 多类型 -> 可以为number也可以为string let moreName : number | string;  /*  对象   name必须要有    但是age随便    sex只读  say为方法,返回值必须为string  [propName:string]: any 允许额外的参数 */ interface moreObj{     name: string;     age?: number;     readonly sex:string;     say(): string;     [propName:string]: any } 

定义接口并使用

//定义接口 interface Person {     name:string,     age:number }  //使用接口 function sayHello(person: Person) {     console.log(person.name + "对你说hello") } sayHello({name:"测试"}); //报错的① sayHello({name:"测试",age: 15}); //不报错② sayHello({name:"测试",age: 15,isBol: false});//报错,参数类型'{name: string;age:number;isBol:boolean;}'不能赋值给类型为'Person'的参数。③ 

通过尝试,上述的方法中
①报错,是因为缺少属性age
③报错,因为这里说不能将多一个属性的对象赋值给一个Person

鸭子类型

let wz = {name:"测试"}; let jq = {name:"测试",age: 15}; let hq = {name:"测试",age: 15,isBol: false}; sayHello(wz);  //报错④ sayHello(jq);  //不报错⑤ sayHello(hq);  //不报错⑥ 

按照上述的经验,这里的③应该会报错,毕竟Person中没有isBol这个属性,但是这里却没有!!!通过书本《学习JavaScript数据结构与算法》了解到，TypeScript中有一种叫做鸭子概念的类型概念，大致意思就是 “看起来像鸭子，像鸭子一样游泳，像鸭子一样叫，那么它一定是一直鸭子”，而这个时候hq就是看起来像鸭子，还会鸭子的叫(name)，也会鸭子的游泳（age）,所有这个时候③并不会报错

思考：那么为什么③会报错呢？？？

猜测：这里③是直接的匿名变量，所以这里TypeScript推断类型的时候就会以函数的参数类型去推断,而⑥中的hq是带着类型(因为在这个变量定义的时候,TypeScript就会去推断类型,并指定上去.当然也可以事先订好)去匹配的,最后参数的匹配类型的时候,发现这个类型里,你要的我都有,所以就通过了,当然,这个只是我的猜想

(因为在这个变量定义的时候,TypeScript就会去推断类型,并指定上去),并未指定具体类型,所以可以理解为鸭子类型,

let hq = {name:"测试",age: 15,isBol: false};    =>    //类型推断后 let hq: {     name:string,     age:number,     isBol:boolean } = {name:"测试",age: 15,isBol: false};  //直接定义对应类型 interface newPerson {     name:string,     age:number,     isBol:boolean } let hq:newPerson = {name:"测试",age: 15,isBol: false}; 

这里可以看到,类型检测不只是可以帮我们看到检测数据的类型,还为我们提供相应类型的方法,也提供了接口内部属性的一个提示,为我们的开发提供效率以及准确性

已经定义的类型不能改变，

let wang = {name:"wangwu",age:54} wang.name = 55; 

当类型声明后就不能随意改变其类型,这样代码更易维护与阅读

最后想说

以上说的报错,并不是运行时的报错,而是编码是的报错提示,这样有效的使代码上线后出现bug的概率下降