关于 TypeScript

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量。TypeScript是一种静态类型语言，增加了代码的可读性和可维护性，应用越来越广泛。接下来，我们来看下如何迁移自己的项目至TypeScript。

安装TypeScript

npm install typescript

书写配置文件

TypeScript使用tsconfig.json文件管理工程配置，例如你想包含哪些文件和进行哪些检查。让我们先创建一个简单的工程配置文件：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "strictNullChecks": false,
        "module": "commonjs",
        "target": "ESNext",
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "moduleResolution": "node",
        "allowJs": true
    },
    "include": [
        "./src/**/*"
    ]
}

这里我们为TypeScript设置了一些东西:

读取所有可识别的src目录下的文件（通过include）。
接受JavaScript做为输入（通过allowJs）。
生成的所有文件放在dist目录下（通过outDir）。
...
你可以在这里了解更多关于tsconfig.json文件的说明。

创建一个webpack配置文件

在工程根目录下创建一个webpack.config.js文件。

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: 'bundle.js',
        path: `${__dirname}/dist`
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "#source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ['.js', '.ts', '.tsx']
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader',
                options: {
                    useCache: true, // Use internal file cache
                    useBabel: true, // Invoke Babel to transpile files
                    babelCore: '@babel/core'
                }
            },
        ]
    }
};

这里我们设置useBabel为true, 调用babel生成文件。

修改babel配置文件

安装需要的包

npm install @babel/preset-typescript

将上面安装的包加入工程目录下的babel.config.js文件。

module.exports = {
    presets: ["@babel/preset-typescript", '@babel/preset-react', '@babel/preset-env', 'mobx'],
    plugins: [
        ...
    ]
}

准备工作完成。
终于能试试期待已久的TypeScript了，心情好happy 😜
但是，等等，What？为什么报错了？

TS2304: Cannot find name 'If'.
TS2304: Cannot find name 'Choose'.
TS2304: Cannot find name 'When'.

原来是我们在React项目中使用了jsx-control-statements导致的。
怎么办？在线等，挺急的... 😜
我们发现，这里我们可以用tsx-control-statements来代替。

配置 tsx-control-statements

安装

npm install tsx-control-statements

在tsconfig.json文件的files选项中添加

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "strictNullChecks": false,
        "module": "commonjs",
        "target": "ESNext",
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "moduleResolution": "node",
        "allowJs": true
    },
    "files": [
        "./node_modules/tsx-control-statements/index.d.tsx"
    ]
}

在webpack的配置文件webpack.config.js中添加

const statements = require('tsx-control-statements').default;

module.exports = {
    ...
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader',
                options: {
                    useCache: true, // Use internal file cache
                    useBabel: true, // Invoke Babel to transpile files
                    babelCore: '@babel/core',
                    // Add tsx-control-statements here
                    getCustomTransformers: () => ({ before: [statements()] })
                }
            },
        ]
    },
    ...
};

接下来我们按照TypeScript官网指南来把我们的代码改成TypeScript就可以了，这里就不作详细介绍了。

更便利的与ECMAScript模块的互通性

但是这就结束了么，no no no...
在编译过程中，我们发现有些包的导入有问题
比如，将i18next作为外部资源引用时（webpack的externals可以帮助我们实现该方式），我们发现代码被编译成

i18next_1['default'].t

但是i18next_1['default']的值是undefined，执行出错
为什么？哪里又双叒叕...有问题了？😭

ECMAScript模块在ES2015里才被标准化，在这之前，JavaScript生态系统里存在几种不同的模块格式，它们工作方式各有不同。当新的标准通过后，社区遇到了一个难题，就是如何在已有的“老式”模块模式之间保证最佳的互通性。

TypeScript与Babel采取了不同的方案，并且直到现在，还没出现真正地固定标准。
在之前的版本，TypeScript 对 CommonJs/AMD/UMD 模块的处理方式与 ES6 模块不同，这会导致一些问题：

当导入一个 CommonJs/AMD/UMD 模块时，TypeScript 视 import * as koa from 'koa' 与 const koa = require('koa') 等价，但使用 import * as 创建的模块对象实际上不可被调用以及被实例化。
类似的，当导入一个 CommonJs/AMD/UMD 模块时，TypeScript 视 import koa from 'koa' 与 const koa = require('koa').default 等价，但在大部分 CommonJs/AMD/UMD 模块里，它们并没有默认导出。

在 2.7 后的版本里，TypeScript提供了一个新的 esModuleInterop标记，旨在解决上述问题。
当使用这个新的esModuleInterop标记时，可调用的CommonJS模块必须被做为默认导入：

import express from "express";

let app = express();

我们将其加入tsconfig.json文件中

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "strictNullChecks": false,
        "module": "commonjs",
        "target": "ESNext",
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "allowSyntheticDefaultImports": true, // 允许使用 ES2015 默认的 import 风格
        "esModuleInterop": true, // 可调用的CommonJS模块必须被做为默认导入，在已有的“老式”模块模式之间保证最佳的互通性
        "moduleResolution": "node",
        "allowJs": true
    },
    "files": [
        "./node_modules/tsx-control-statements/index.d.tsx"
    ]
}

到了这里，我们的程序终于能完美的运行起来了。
我们不想再区分哪些需要使用import * as，哪些使用import，因此我们将格式统一为

import XX from 'XX'

迁移React项目至TypeScript