TypeScript初步了解

记录对TypeScript的初步了解，以期在实际项目中对是否使用TypeScript有较为科学的考量。

大纲：

• 定义与来历
• 快速起步
• 声明文件(.d.ts)
• 为什么选择使用TypeScript
• JS迁移TS

知识补充：

• ECMAScript 发展简史
• JS模块化

TypeScript定义与来历

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript = Type + 基于类的面向对象编程 + ES新特性支持

可选的静态类型

// 声明参数类型为 string
function greet (msg: string) {
  console.log("Say: " + msg);
}

greet("Hello TypeScript!");
greet(1900); // 报错：Argument of type '1900' is not assignable to parameter of type 'string'

// string 改为 string|number 可运行
// string 改为 any 即不指定类型，则可运行

PS: 类型规范：number, string, boolean, object, 而非Number, String, Boolean, Object

提供最新ES特性：
提供最新的和不断发展的JavaScript特性，包括那些来自ECMAScript和未来提案中的特性，比如异步功能和Decorators, 以帮助建立健壮的组件。

来历：

微软开源的编程语言，2013年6月19日，发布了正式版TypeScript 0.9。

快速起步演示

演示：typescript-test, typescript-vue-tutorial

更多起步例子：http://www.typescriptlang.org...

声明文件

在TypeScript中使用第三方库，需要获取其声明文件，告诉TS这个库是存在的以及如何获取，TypeScript 2.0以上版本，获取声明文件只需使用npm。一般npm包会包含其声明文件，这种情况不需要额外安装，若没有，则要安装其声明文件，大多数情况下，类型声明包的名字总是与它们在npm上的包的名字相同，但是有@types/前缀。可以在 https://aka.ms/types 查找你喜欢的库。

声明文件命名规则：.d.ts

为什么选择使用TypeScript

• 方便开发与维护
• 类型检查帮助发现代码普通错误
• 便于C#/Java开发者上手
• 转译器的输出可读性很高
• 完全兼容ES6
• 类系统可以按需求选择
• IDE支持很好

何时使用，何时不用？

用：

• 当开发团队习惯了静态类型语言
• TypeScript可作为Babel的替代品
• 当某个库或框架推荐你使用TypeScript时
• 当需要速度时
• 熟悉面向对象的开发，但不是很熟悉JS

不用：

• 当没有时间精力进行额外的转译时
• 当想要避免潜在的性能代偿时（转译器会产生额外代码）
• 当需要将团队的敏捷度进行最大化的时候
• 没有OOP(Object-oriented programming, 面向对象编程)开发经验，对JS也不熟悉

文章链接：https://sdk.cn/news/4734

https://www.zhihu.com/questio...

JS迁移TS

https://www.tslang.cn/docs/ha...

背景知识-ECMAScript 发展简史

JavaScript(1996) -> ECMAScript 1.0(1997) -> ECMAScript 3.0(1999.12) -> ECMAScript 5.0(2009.12) -> ECMAScript 6(2015.06)

ES6 从开始制定到最后发布，整整用了 15 年。

ES6 与 ECMAScript 2015 的关系

附：http://es6.ruanyifeng.com/#do...

浏览器支持／部署进度

各大浏览器最新版本对ES6的支持情况

访问此处检查你的浏览器对ES6的支持情况

Chrome 和 Safari 对 ES6 的支持度，目前均是92%

微信内置浏览器对ES6的支持度是90%

转码器babel: 转换新的JavaScript句法(Syntax), 比如() => {} ，不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码，需要使用babel-polyfill

背景知识-JS模块化

如何共用变量？

• 解决方法1: 全局变量，问题：加载顺序问题undefined报错，任何代码都可改变它，不利于维护
• 解决方法2: 模块化

广泛使用的两种模块化系统：CommonJS(CJS), ECMAScript Modules(ESM)

译文：图说ES Modules

原文：ES Modules: A cartoon deep-dive

附

TypeScript官网

Typescript中文网

TypeScript wiki

Vuejs-TypeScript支持