跳到主要内容

基础知识

类型检查​

TypeScript 会帮助我们进行类型的检查。

调用 不存在的函数方法 会报错：

const message = 'hello!';

// ERROR: 该表达式是不可调用的，String 类型没有调用签名
message();

不合理的调用 也会报错：

function flipCoin() {
    // ERROR: `<` 不能用在 `() => 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') {
    // ...
    // ERROR: 该表达式永远返回 `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('Talaxy', new Date());

编译过程中，tsc 会将类型去除，模板字符串用 '+' 代替：

'use strict';
function greet(person, date) {
    console.log('Hello ' + person + ', today is ' + date.toDateString() + '!');
}
greet('Talaxy', 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 类型的检查。如果没有明确的空值检查将会报错。

参考​

The Basics - TypeScript

标签：