js进化，迁徙到typescript

js进化，迁徙到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...

compilerOptions -> target 配置项，代表须要将typescript编译到哪个js标准
能够根据本身的实际需求配置 es5|es6|es7...
因为个人项目的是nodejs项目
当前nodejs 7.10已经原生支持es7,配置为es2017
若是应用在前端能够改成es5

四，代码风格规范tslint.json

https://palantir.github.io/ts...
现代化的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 --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...

   • class语法与es6略有不一样 http://www.cnblogs.com/whitew...

   • 全局变量须要定义globals.d.ts http://www.cnblogs.com/ys-ys/...

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

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

//修改为这样  
let x:any=1
x="aaa"

---

总结

使用感觉

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

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

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

   • 不管是配置友好度,编译效率,语法兼容,都彻底找不到理由选择babel

2. 特别适合nodejs项目

   • 彻底兼容ES5,6...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...