第16课：使用 TypeScript 编写代码

知识点：

• 安装 TypeScript
• 修改配置
• VSCode 自带 Type
• Parcel 自动处理
• Webpack 自动处理

很多人已经在用 TypeScript 做开发了，这种方式确实有很大的优势，在开发和测试阶段给前端提供了非常大的助力，如果你还没有使用过，不妨试一试。

安装 TypeScript

在项目跟目录下运行 npm install -g typescript 即可安装好 TypeScript，输入 tsc -v 看一下是否已安装好。

在 TS 中可以很方便的使用一些 ES 6 中存在的特性，比如继承、箭头函数、class 类等，在这个的基础上，TS 还可以输入参数的类型、接口、枚举等高级特性，往常这些特性都是存在于强类型语言中的，这里使用这些特性增强了 JS 的开发效率，减少了很多不必要的错误。

在根目录下输入命令 tsc -init 初始化默认的 TS 配置文件。

在根目录下添加一个 demo.ts 文件，简单的使用一些 TS 特性的语法。

class Base {
    //变量a,类型string
    a: string = "test_a";
}

class Demo extends Base {
    b: string = "test_b";
    //方法c,参数类型string,返回string
    c(d: string): string {
        return this.a;
    }
    static e() {
        return "aaa";
    }
}

let demo = new Demo();
console.log(demo.c("t"))
console.log(Demo.e())

执行 tsc demo.ts 命令，在文件的同一目录下回生成 demo.js 文件，这个就是 TS 转化之后的结果。可以打开看看，TS 已经把其特性都转化为了 JS 的形式，类型检测则在编译的时候去掉了。

执行 node demo.js，运行生成的代码，可以看到正确输出了我们想要输出的值。

test_a
aaa

修改配置文件

要想在项目中使用 tsc 还需要修改配置文件，不然 tsc 命令会把所有 TS 文件都生成在源文件的同一目录下。

删掉旧的 tsconfig.json 文件，运行生成命令 tsc --init --pretty --sourceMap --target es2015 --outDir ./dist --module commonjs --jsx react 直接生成新的配置文件。

也可以自己修改文件的参数，具体的解释在配置中也有说明。

"target": "es6",      //新语法
 "module": "commonjs",  //加载方式
 "jsx": "react",   //支持jsx
 "sourceMap": true, //生成map文件
 "outDir": "./dist",  //生成文件的位置
 "strict": true,     //严格模式
 "esModuleInterop": true     //

不要忘了将要编译的源代码路径写到配置里，这样就不会编译其他地方的代码了。

"include": ["./src/"]

本地安装 jest 的 ts 支持。

npm install --save-dev ts-jest typescript

修改 packagejson 文件，给 jest 的配置加上 ts 的内容。

"jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js"
    ],
    "transform": {
        "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
        "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "testPathIgnorePatterns": [
        "\\.snap$",
        "<rootDir>/node_modules/",
        "<rootDir>/lib/"
    ],
    "cacheDirectory": ".jest/cache"
}

如果使用 VScode 的话还可以安装下面的几个包，让编辑器可以智能提示方法、参数等。

npm install --save-dev @types/jest @types/react @types/react-native @types/react-test-renderer @types/react-navigation

我们改造一下 src 下的 index.js，试一下 TS 的效果怎么样，在 src 下新建一个 index.tsx 文件，因为使用到了 jsx 的语法，所以这里必须使用 tsx 的后缀名。

'use strict';

import React from 'react';
import {
    StyleSheet,
    Image
} from 'react-native';
//添加路由组件
import Navigation from 'react-navigation';

//创建路由
const Pages = Navigation.StackNavigator({

}, {
        // initialRouteName:'OrderDetail',
        //这里做了一个页面跳转的动画
        transitionConfig: () => ({
            screenInterpolator: sceneProps => {
                const { layout, position, scene } = sceneProps;
                const { index } = scene;
                const translateX = position.interpolate({
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [layout.initWidth, 0, 0]
                });
                const opacity = position.interpolate({
                    inputRange: [index - 1, index - 0.99, index, index + 0.99, index + 1],
                    outputRange: [0, 1, 1, 0.3, 0]
                });
                return { opacity, transform: [{ translateX }] };
            }
        }),
        navigationOptions: {
            header: null
        }
    });

//创建一个自己的容器,方便以后对路由做一些处理
export default class extends React.Component {
    constructor(props: any) {
        super(props);
    }

    render() {
        return <Pages onNavigationStateChange={this.listenChange.bind(this)}>
        </Pages>;
    }
    //监听路由的跳转
    listenChange(state1: any, state2: any, action: any) {}
}

在根目录下执行命令 tsc，就可以在 dist 中发现生成的 index.js 文件，该文件就是我们最后要的结果了。

不要忘记修改根目录下的 index.js 文件，将引用的地址指向 dist 文件夹，不然启动模拟器之后是不会加载编译之后的代码的。

使用 VScode

如果你使用的是 VScode 编辑器的话，编辑器自带了一个运行命令，可以很简单的执行 TS 命令。

单击菜单中的“运行/运行”命令，在弹出的命令中可以发现有两个专门为 TS 准备的命令。执行构建，即可编译一次项目的 ts 文件，执行监视即可监听所有文件改动。在 ts 文件被修改的时候会自动执行一次编译。

使用 Parcel

Parcel 是一个新的打包构建工具，安装和使用非常简单，中文文档。

执行命令 npm install -g parcel-bundler 全局安装打包工具。

由于我们之前已经安装好了 TypeScript 的所有东西，此时其实已经不需要在干额外的事情了，Parcel 本身是支持非常多的第三方处理包的。例如，Web 常用的 Less、图片压缩、HTML 压缩等，这里我们只用了 TS 的功能。

• 执行 parcel index.js 命令直接生成结果文件。
• 执行 parcel watch index.js 命令监听文件的变化。

使用 Webpack

Webpack 已经有非常多的人在使用了，如果对这个东西非常熟悉，也可以使用 Webpack 处理 TS 到 JS 的转化。

安装依赖包：

npm install --save-dev babel babel-loader babel-polyfill babel-preset-env ts-loader typescript uglifyjs-webpack-plugin webpack webpack-dev-server webpack-merge

"target": "es2017"，// 可以使用 Promise、async、await 等新语法

配置处理规则：

rules: [{
  test: /\.ts(x?)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: babelOptions
    },
    {
      loader: 'ts-loader'
    }
  ]
}]},

到这里就可以正常使用 TS 了。

一般情况下，直接处理可以使用 ES 6 的语法开发 TS，如果还想要使用 ES 7 的语法就需要使用 babel 预先处理一次 TS 了。