Typescript

 我们知道起初的JavaScript有些许诟病，比如下面代码：

const a = {
  width: 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'}]

出处