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的概率下降