基础知识
类型检查
TypeScript 会帮助我们进行类型的检查。
调用不存在的函数方法会报错:
const message = "hello!"
// 错误:该表达式是不可调用的,String 类型没有调用签名
message()
不合理的调用也会报错:
function flipCoin() {
// 错误:'<' 不能用在 '() => number' 与 'number'
return Math.random < 0.5
}
访问不存在的属性会报错:
const user = {
name: "Daniel",
age: 26,
}
// js: 返回 undefined
// ts: 错误: 属性 location 不存在
user.location
逻辑错误也是会被检查到的:
const value = Math.random() < 0.5 ? "a" : "b";
if (value !== "a") {
// ...
//↓ 错误:该表达式永远返回 false ,因为 "a" 和 "b" 没有交集
} else if (value === "b") {
// 永远无法到达这块代码
}
TypeScript 的类型检查器会告知编辑器代码的报错信息,以及用户的输入建议,提高用户的编辑效率。
tsc TypeScript 的编译器
全局安装类型检查器 tsc :
npm install -g typescript
创建文件:
// hello.ts
console.log("Hello world!")
执行 tsc :
tsc hello.ts
- 如果代码有错误:
- 会在终端输出错误信息
- 会在同目录下输出一个和源代码基本一致的 js 文件
- 如果代码没有错误:
- 终端里不会输出任何信息
- 会在同目录输出一个编译好的 js 文件
如果你希望在代码有错误的时候不输出文件:
tsc --noEmitOnError hello.ts
tsc的输出会尝试控制好代码缩进、换行,以及注释的保留,来提高可读性。
类型标注
可以在变量或参数后面标明类型:
function greet(person: string, date: Date) {
console.log(`Hello ${person}, today is ${date.toDateString()}!`)
}
// 如果参数类型不正确将会报错
greet("Maddison", new Date())
编译过程中,tsc 会将类型去除,模板字符串用 '+' 代替:
"use strict"
function greet(person, date) {
console.log("Hello " + person + ", today is " + date.toDateString() + "!")
}
greet("Maddison", new Date())
但是通常情况下并不总是需要标注类型,TypeScript 自己会进行一些代码推断:
// tsc 会根据右侧推断出 msg 是一个 String
let msg = "hello there!"
请记住,类型标注并非 JavaScript 的语法功能。
版本的向下支持
TypeScript 默认会将 ES3 作为编译目标,如果你想支持更高规范,比如 ES2015 :
tsc --target es2015 hello.ts
目前大部分浏览器都支持了 ES2015 ,所以可以安全的将 ES2015 作为编译目标。
严格性
TypeScript 有一些类型检查严格性的标签。你可以在 CLI 中使用 --strict 标签,或者是在 tsconfig.json 文件中配置 "strict": true 来应用于所有文件。
除此以外,还有两个重要的标签:
-
noImplicitAny你可以使用
any作为类型来获得 JavaScript 中无类型检查的体验,但这有违 TypeScript 的目的,这将让你难以发现潜在的 bug 。启用noImplicitAny将禁用any类型。 -
strictNullChecks启用
strictNullChecks能提醒我们进行null和undefined类型的检查。如果没有明确的空值检查将会报错。