TypeScript入门

一、什么是 TypeScript

  • 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发。
  • 可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

二、TypeScript优势

1、增加了代码的可读性和可维护性

  • 可以在编译阶段就发现大部分错误
  • 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

2、TypeScript 非常包容

  • TypeScript 是 JavaScript 的超集， .js 文件可以直接重命名为 .ts 即可
  • 即使不显式的定义类型，也能够自动做出类型推论
  • 可以定义从简单到复杂的一切类型
  • 即使 TypeScript 编译报错，也可以生成 JavaScript 文件
  • 兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

三、安装TypeScript

前提

已经安装Node

安装命令

npm install -g typescript

全局安装，安装之后任意cmd均可执行tsc命令编译ts文件例如，

tsc hello.ts

tsc即 ts的compiler

四、HelloWorld

创建一个hello.ts文件，内容如下

1
2
3
4
5
function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));

在cmd窗口执行 tsc hello.ts 可生成hello.js文件，内容如下：

1
2
3
4
5
function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

五、编译检查

创建一个hello.ts文件，内容如下

1
2
3
4
5
function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = [0, 1, 2];
console.log(sayHello(user));

注意，sayHello的参数person定义了类型为string，而实际传入的参数为数组，此时编译将出错
Argument of type 'number[]' is not assignable to parameter of type 'string'.

但是还是生成了 js 文件： 

1
2
3
4
5
function sayHello(person) {
    return 'Hello, ' + person;
}
var user = [0, 1, 2];
console.log(sayHello(user));

TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。 如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置noEmitOnError 即可