第16课：使用 TypeScript 编写代码

た入场券 2022-12-09 11:48 203阅读 0赞

知识点：

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

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

### 安装 TypeScript ###

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

![enter image description here][]

在 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 文件被修改的时候会自动执行一次编译。

![enter image description here][enter image description here 1]

### 使用 Parcel ###

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

执行命令 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 了。

[enter image description here]: /images/20221123/ab200cb974534639acb2dd7cd1ccbbfa.png
[enter image description here 1]: /images/20221123/0f40b9f75ada441c9b58ff0e0825d4e3.png
[Link 1]: http://www.css88.com/doc/parcel/getting_started.html