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支持

相关推荐