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://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...
浏览器支持／部署进度
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