迁移React项目至TypeScript（babel版）

上期咱们说到了TypeScript装饰器(decorators)和JavaScript装饰器编译出的代码不一样，虽然咱们的库是用TypeScript写的，但不少时候须要提供给JavaScript使用，因此这里来讲说怎么将项目迁移至TypeScript，并用babel编译。

安装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": false
    },
    "include": [
        "./src/**/*"
    ]
}
复制代码

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

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

建立一个webpack配置文件

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

module.exports = {
    context: __dirname,
    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 'babel-loader'. { test: /\.tsx?$/, loader: 'babel-loader' }, ] } }; 复制代码

修改babel配置文件

安装须要的包

npm install @babel/preset-typescript @babel/plugin-transform-typescript
复制代码

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

module.exports = {
    presets: ["@babel/preset-typescript", '@babel/preset-react', '@babel/preset-env', 'mobx'],
    plugins: [
        ['@babel/plugin-transform-typescript', { allowNamespaces: true }],
        // ... other
    ]
}
复制代码

这里咱们使用@babel/plugin-transform-typescript插件来处理TypeScript。

那么，TypeScript的类型检测怎么办呢？不是至关于废了吗？这里咱们使用 fork-ts-checker-webpack-plugin来启用TypeScript类型检测。

#配置TypeScript类型检查器

Install

npm install fork-ts-checker-webpack-plugin fork-ts-checker-notifier-webpack-plugin
复制代码

webpack.config.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new ForkTsCheckerWebpackPlugin({
            // 将async设为false，能够阻止Webpack的emit以等待类型检查器/linter，并向Webpack的编译添加错误。
            async: false
        }),
        // 将TypeScript类型检查错误以弹框提示
        // 若是fork-ts-checker-webpack-plugin的async为false时能够不用
        // 不然建议使用，以方便发现错误
        new ForkTsCheckerNotifierWebpackPlugin({
            title: 'TypeScript',
            excludeWarnings: true,
            skipSuccessful: true,
        }),
    ]
};
复制代码

准备工做完成。 终于能试试期待已久的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": false
    },
    "files": [
        "./node_modules/tsx-control-statements/index.d.tsx"
    ]
}
复制代码

接下来咱们按照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": false
    },
    "files": [
        "./node_modules/tsx-control-statements/index.d.tsx"
    ]
}
复制代码

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

import XX from 'XX'
复制代码