JavaScript进化：从迁徙到TypeScript

TypeScript

历史

• TypeScript是一种由微软开发的自由和开源的编程语言

• 它是Javascript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

• 2012年十月份，微软发布了首个公开版本的TypeScript

• 当前最新版本v2.3.3

前言

js圈的,不管是前端还是nodejs开发者，大多都听说过typescript,但真正使用它的人并不是这么多，根据我的观察，一般不了解人会有以下看法：

• 不就是一个能编译成js的语言么，没什么特别的！

• 这个肯定也会像coffeeScript一样死掉

• 有了babel，前端也可以写es6,还要typescript做什么

• js最大的优势就是灵活，用typescript就没有灵活性了

以上这里声音都是在论坛看到的其他人的印象，以及向身边人推荐时的回复。

本人一开始并不是typescript的拥护者，甚至有点排斥，那时候ts的开发工具也好，普及度也好，都是很稚嫩的。
直到最近在公司做了一些项目，因为是nodejs后端，在一开始使用babel方案转换es7->es5进行开发，在过程中，总是出现调试的时候无法进行断点，很多隐藏性的bug会在运行的过程中突然暴露，这之类的问题。
我开始重新了解一下typescript的现状，没想到已经完全走上正轨了，在github上已经有大量的项目选用，投入生产.
于是报着尝试的心态，开始了迁徙。

迁徙到typescript

首先推荐一个对JS最友好，性能最棒的开发工具vscode

开始以为迁徙过来是一件很困难的事情，只是稍做尝试，并没有报太大希望能快速无痛的切换过来.

假设目录结构是这样的

├── src
| ├── app.js
.
.
.
├── package.json
├── README.md


一，首先使用重命名工具renamex-cli将项目目录./src中的所有js文件后缀 批量改成.ts

npm i -g renamex-cli
//then
renamex start -p "src/**/*.js" -r "[name].ts" -t no

二，根目录新建tsconfig.json

{
"compilerOptions": {
"target": "es2017",//将编译的.ts文件编译为指定标准js
"module": "commonjs",//模块规范
"sourceMap": true, //生成资源映射，以便于调试
"noEmitHelpers": true,//不生成辅助方法，对应importHelpers
"importHelpers": true,//引用外部的辅助方法
"allowUnreachableCode": true,//允许代码中途return产生无法执行代码
"lib": ["es2017"],//定义编译时依赖
"typeRoots": ["node_modules/@types"],//定义类型定义文件的根目录
"types": [
//添加新的类型定义库如 @types/lodash 需要在此处定义
"lodash"
],
"outDir": "./build",//编译输出文件目录，默认等于rootDir
"rootDir": "./src" //源代码目录在这个目录里编写你的ts文件
},
"exclude": [
"node_modules", //忽略目录
"**/*.test.ts" //忽略指定类型文件
]
}

三，typescript配置tsconfig.json

https://tslang.cn/docs/handbo&＃8230;

compilerOptions -> target 配置项，表明需要将typescript编译到哪一个js标准
可以根据自己的实际需求配置 es5|es6|es7...
由于我的项目的是nodejs项目
当前nodejs 7.10已经原生支持es7,配置为es2017
如果应用在前端可以改为es5

四，代码风格规范tslint.json

https://palantir.github.io/ts&＃8230;
现代化的js项目,一定要有代码风格规范

• npm install --save-dev tslint

{
"scripts": {
"lint": "tslint \"src/**/*.ts\" "
}
}

五，安装typescript

1. npm install --save-dev typescript

   • 可以在npm run scripts里使用tsc命令将.ts文件编译为.js文件

   • "tsc": "tsc" 编译.ts文件

   • "tsc:w": "tsc -w" 监听.ts文件 实时编译

   • 属于开发时依赖放在devDependencies配置里

{
"scripts": {
"tsc": "npm run clear && tsc",
"tsc:w": "npm run clear && tsc -w",
"lint": "tslint \"src/**/*.ts\" "
}
}

1. npm install --save tslib 从外部引入额外的辅助方法集

• 会在编译后的.js文件里自动require('tslib')

• 编译后的代码更美观,不用在每个编译后的.js文件都生成辅助方法

• 减少前端场景中打包体积

• 属于运行时依赖,无须主动引用,必须放在dependencies配置里

• 需要配置tsconfig.js -> compilerOptions -> importHelpers:true

六，安装 typescript 类型定义(@types/[package])

• npm install &＃8211;save-dev @types/node (nodejs环境)

• 其它比如lodash,react,vue,koa,jquery都已经有了相关的类型定义库

• 配置类型定义库,需要将tsconfig.json->compilerOptions->types添加对应的库名

{
"compilerOptions": {
"strictNullChecks": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"target": "es6",
"lib": [
"dom", //如果是前端环境需要添加此配置
"es7" //适配es7的语法
],
"types": ["lodash"]
},
"exclude": ["node_modules"]
}

5. 接下来你就可以在开发工具里看到对应的智能提示了,`lodash`:

七，修改 import 语法

现在引用模块推荐的写法是 import 语法

• nodejs 原生或者 webpack 默认环境并不支持

• 通常我们使用babel来实现 import 语法支持

• typescript支持更为标准的 import 语法

• 普通export写法

//a.ts
module.export = { a: 1, b: 2 }
//a2.ts
export let data = { x: 1, y: 2 }
//b.ts
//这种写法一般用于引用node_modules上安装的其他库
import * as aData from './a'
import { data } from './a2'

• 默认export写法

//x.ts
export default { a: 1, b: 2 }
//y.ts
import data from './x'
//>这种写法用于引入我们使用export default定义的默认导出

• 混合写法

//x.ts
export let data = { a: 1, b: 2 }
export default { c: 3 }
//y.ts
import other, { data } from './x'
console.log(data) // { a : 1 , b : 2 }
console.log(other) // { c : 3 }

• 别名

//m.ts
export let data = { o: 1, p: 2 }
export default { u: 3 }
//n.ts
import data, { data as data2 } from './m'
console.log(data)//{ u : 3 }
console.log(data2)//{ o : 1 , p : 2 }

• 修改项目中的引库语法由require('libName')改为import * as libName from 'lib'

八，为项目中的全局变量创建自定义类型定义文件globals.d.ts

//globals.d.ts
//应用程序工具库
declare var appUtils: any
//指向 src/common 的绝对路径
declare var COMMON_PATH: string
//node程序的运行环境状态 development | test | production
declare var NODE_ENV: string
//shims.d.ts 第三方插件变量全局定义
import * as lodash from 'lodash'
declare global {
/**
* lodash
*/
const _: typeof lodash
}

八，这时候我们的新项目再排除一些小问题就能跑起来了

1. 迁徙到typescript并没有想象的那么复杂

2. 除了个别注意点，比如

   • 新的import语法 http://www.tuicool.com/articl&＃8230;

   • class语法与es6略有不同 http://www.cnblogs.com/whitew&＃8230;

   • 全局变量需要定义globals.d.ts http://www.cnblogs.com/ys-ys/&＃8230;

   • 个别变量提示类型错误，需要将它定义为any:

//会提示错误
let x=1
x="#"

//修改成这样
let x:any=1
x="#"

总结

使用感受

* typescript的配置比babel简单多了,只有一两个库依赖,却让我们直接可以写上最新的ECMA语法及功能
* 可选择性的编译生成ES5以及其它更高ES版本,完全不用担心实际运行问题
* 强化的语法提示,让我们根本不用在源码与API文档反复对比,写着盲人摸象搬的代码
* 很多以前容易发生的错误,现在在编译阶段就可以暴露出来,大大提高了项目的稳定性
* typescript语法学习成本比想象的低的多,能理解ES6的基本半天就能玩的溜


什么项目场景适合使用typescript?

1. 正在使用babel编译的项目

   • 无论是配置友好度,编译效率,语法兼容,都完全找不到理由选择babel

2. 特别适合nodejs项目

   • 完全兼容ES5,6&＃8230;N版的代码,低成本迁徙,静态类型检测,接口interface定义,大大增强了代码健壮性

3. 所有的大型JS项目

   • typescript是由 Anders Hejlsberg 大神(C#之父)开发,编译效率惊人

   • 越大的项目,产生的作用越明显,完成迁徙之后,你基本可以立即找到埋的很深的坑

   • 为js而生的开发工具 vscode ,微软出品的IDE,你懂的,觉得项目大了太卡,你可以试试

4. 前端项目:react,vue,angular2

   • 国内很火的react antd源码使用typescript编写

   • angular2的默认开发语言

   • typescript相关vue项目在github上也层出不穷

5. html5游戏项目

   • typescript是热门的egret(白鹭)引擎唯一开发语言，egret5.0.0 6月1号发布！

附上本人用typescript搭建的koa2种子项目https://github.com/githbq/hbq&＃8230;