TypeScript 简介

发表于 分类于

Typed JavaScript at Any Scale.
添加了类型系统的 JavaScript，适用于任何规模的项目。

特性

  • 它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。
  • 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。
  • 基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。
  • 函数是 JavaScript 中的一等公民，可以赋值给变量，也可以当作参数或返回值。

静态类型

TypeScript 语言是静态类型，意思是：编译阶段就能确定每个变量的类型

1
2
3
4
let foo: number = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译

上面是完整代码，可以简写成下面代码

1
2
3
4
let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译

简写后的代码与 JavaScript 看上去没有区别，这是因为 TypeScript 强大的类型推论，即使不去手动声明变量 foo 的类型，也能在变量初始化时自动推论出它是一个 number 类型。

弱类型

typeScript 按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。

以下这段代码不管是在 JavaScript 中还是在 TypeScript 中都是可以正常运行的，运行时数字 1 会被隐式类型转换为字符串 ‘1’，加号 + 被识别为字符串拼接，所以打印出结果是字符串 ‘11’。

1
2
console.log(1 + '1');
// 打印出字符串 '11'

TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。

安装

在安装的 node/npm 的系统上运行下面命令

1
npm install -g typescript

此命令会在全局环境下安装 tsc 命令，tsc 命令用来编译 TypeScript 文件，例如：

1
tsc hello.ts

.ts 就是 TypeScript 编写文件的后缀。
.tsx 就是用 TypeScript 编写 React 的后缀。