基础知识 - TypeScript

783 阅读2分钟

基础知识

类型检查

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 能提醒我们进行 nullundefined 类型的检查。如果没有明确的空值检查将会报错。


参考

The Basics - TypeScript