【前端，TypeScript】TypeScript速成（一）：基本数据类型

环境

在 typescriptlang.org 的官网上提供的 playground 进行 typescript 的学习。

定义一个变量的方法

使用关键字 let 来定义变量：

var anExampleVariable = 'Hello World'
anExampleVariable = 'abc'
console.log(anExampleVariable)

控制台的输出是"abc"。

可以类似于 JavaScript 使用 var 来定义变量，但是不建议这么做。

不加 let 关键词声明的变量同样会报错。

如果此时将 anExampleVariable 在第二行当中的值修改由'abc'转为123可以吗？答案是这么做会报错：

即类型不匹配。编译器可以从 let 语句推断出 anExampleVariable 是 string 类型，所以这个变量就是一个 string 类型，和 JavaScript 相比施加了类型上的约束。

可以在 let 语句的变量名后指定变量类型：

let anExampleVariable: string = 'Hello World'

当然，所赋的值必须与所给的类型匹配。

一个更完整的例子如下：

let anExampleVariable: string = 'Hello World'
let anExampleNumber: number = 123.456
let anExampleBoolean: boolean = true
console.log(anExampleVariable, anExampleNumber, anExampleBoolean)

命令行的输出：

"Hello World",  123.456,  true 

除了上述变量的定义方法之外，TypeScript 还有一种 literal type 的定义：

// literal type

let answer: 'yes'|'no'|'maybe' = 'maybe'

类似于枚举类型，answer 变量的赋值只可能在上述 yes、no 和 maybe 之间。

一个实用的场景是：

let httpStatus: 200 | 404 | 500 = 200

在 literal type 当中，可以使用多种类型定义：

let httpStatus: 200 | 404 | 500 | '200' | '404' | '500' = 200

function f(s: 200 | 404 | 500 | '200' | '404' | '500') {
    let status: string = s
}

提示我们类型不匹配，string | number与string类型不匹配，此处就引出了类型的并集，将:string修改为: string | number即可：

let httpStatus: 200 | 404 | 500 | '200' | '404' | '500' = 200

function f(s: 200 | 404 | 500 | '200' | '404' | '500') {
    let status: string | number = s
}
let tmp: number | string = f(httpStatus)
console.log(tmp)

在命令行可以得到结果 200。

TypeScript 中的特殊类型：any

TypeScript 中有一个特殊的关键字 any，用于将变量声明为任意类型：

let a: any = 'abc'
a = 123
a.name = 'John'

👆此时编译器会放弃类型检查，a 可以被视为任何类型。但编译不出错不代表运行时不出错，错误信息如下：

[ERR]: Cannot create property 'name' on string 'abc' 

TypeScript 中的特殊类型：undefined

一个例子如下：

let b: undefined
b = 123
console.log(b)

此时会报错，因为 b 的值只能是 undefined。undefined 类型何时使用呢？在刚才所说的 answer 当中，我们给出的答案有 yes、no、maybe，我们可以额外添加一个 undefined 代表不回答（可以理解为用户提交了空的表单）：

let answer: 'yes'|'no'|'maybe'|undefined = undefined