Extra06 - TypeScript - 型别检查工具

此篇为番外，未收入在本篇的原因是 TypeScript 会直接影响开发，使撰写的程序语法与原本不同，因此需看专案或使用者的需求决定是否使用，因此放入番外作为补充。

JavaScript 本身的语言特性，使其的变数并不会受到型别的约束，这虽然使 JavaScript 具有高度的弹性，但缺乏型别会导致在撰写程序时遭受型别错误的问题而困扰。

具有型别的 JavaScript - TypeScript

TypeScript 是个 JavaScript 的超集语言，使用 TypeScript 的语法所写出的代码，会具有型别，藉由 TypeScript 提供的编译器，可以在原本的 JavaScript 语法上提供型别的支援，藉由变数的定义去推断型别，并进一步提醒开发者注意型别问题。

除了推断的功能外， TypeScript 最强大的功能在於可以利用自身的语法定义型别，藉以将型别的约束力带入 JavaScript 中，并且可以利用这些型别的定义为编辑器带来自动完成、提示等功能，改善开发体验。

安装 TypeScript

TypeScript 为 npm 套件，须要先安装：

npm install typescript --save-dev

使用 TypeScript 开发

TypeScript 预设的编译目标为 ts 的档案，如果是在已有的 JavaScript 专案中加入 TypeScript 的话，我们可以将 allowJs 设定打开，让 TypeScript 可以解析 JavaScript 。

因此我们下面的 js 程序码：

function greeter(person) {
  return 'Hello, ' + person;
}

let user = 'Jane User';
let theOtherUser = 'Peter User';

document.body.textContent = greeter(user, theOtherUser);

在使用 npx tsc 由 TypeScript 解析後，取得的结果如下：

% npx tsc
examples/greeter.js:7:43 - error TS2554: Expected 0-1 arguments, but got 2.

7 document.body.textContent = greeter(user, user);
                                            ~~~~

Found 1 error.

TypeScript 会判断出参数的数量有误，不过这并不会中断建置，依然会产生目标代码。

由於 TypeScript 是 JavaScript 的超集语言，所以其实可以直接将 .js 的副档名改为 .ts ，这样就可以不需要设定 allowJs ，也不需要转换代码，就可以使用 TypeScript 。

现在我们可以为变数加上型别：

function greeter(person: string) {
  return 'Hello, ' + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);

在参数（或变数）後加上 : string ，可以将其定义为字串型别，上面的例子中，由於变数 user 是个阵列，因此会被 TypeScript 认定为错误的型别。

本文重点整理

• TypeScript 在原本 JavaScript 的语法上增加了型别的定义，为原本无型别的 JavaScript 带来型别的严谨性，增加撰写程序码时的安全性。

参考资料

• TypeScript