我们知道起初的JavaScript有些许诟病,比如下面代码:
const a = { 10, height: 20 } console.log(a.heigth * a.width) // NaN
拼写错误导致a.heigth为undefined,所以结果为NaN,可是我们根本没有定义heigth属性,从何而来的为undefined呢?我们希望的是提示heigth为不存在。
还比如:
if("" == 0) { console.log(1) // 1 }
我们很难理解"" == 0为true
综上所述,我们需要一个静态检测的功能,这样可以帮助在编写代码的时候提示出错,而不是在运行代码时提示错误。
而Typescript则提供的是静态类型检测功能,主要是检测数据的类型是否符合规定的类型。
可以分为显示和非显示规定数据类型:
1.1 非显示的规定a为string类型,所以后面赋值就报错了。
let a = "s" a = 10 // Type 'number' is not assignable to type 'string'
非显示的规定a为string类型,所以后面赋值就报错了。
2.1 显示的规定数据类型可以使用关键字interface,如下代码:
interface Car { name: string, speed: number } let www:Car = { name: 'www', speed: 10 }
属性值一个都不能少,不然会报错。
2.2 unions: 显示的规定数据类型还可以使用type关键字,代码如下:
type a = "x" | "y"| "z" | number let b:a = "z" // 不报错 b = 10 // 不报错 b = "zz" // 报错
2.3 generics(泛型):我们知道interface可以显示的规定数据类型,如果我们想规定的数据类型是一个变量,可以在使用时规定为任何的类型,这就是泛型。演示代码如下:
interface A<type> { name: type } const obj:A<number> = { name: 10 } const OBJ:A<string> = { name: "abc" }
除此之外还可以通过泛型来规定数组中储存的数据类型,如下代码:
type isStringArr = Array<string> type isObjName = Array<{name:string}> let arr:isStringArr = ['a','b'] let objName:isObjName = [{name: 'xx'}]