记录对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://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: A cartoon deep-dive