引入typescript踩坑计(一)

typescript已经诞生好久了，一直想把其引入公司的项目中，原先项目采用的是npm、无yarn、无vue-cli，webpack的版本也小于4，webpack配置还嵌套在项目中，是一个纯金的老项目呢。

尝试

(这是尝试部分，点击这里跳转到正确操作)

项目的一些版本：

"vue": "^2.5.21",
"webpack": "^3.6.0",

本着不想改变包版本引发其他问题，以及不知道ts只有webpack4.0才支持，绕了一点弯路。

安装typescript

一开始直接在项目安装typescript,执行

npm install -g typescript

配置完tsconfig.json后

{ 
    "baseUrl": "./src",
    "paths": {
        // "@modules/*": ["rest/modules/*"],
        // "@services/*": ["services/*"]
    },
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../built/local/tsc.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ],
}

webpack表示它不能识别typescript, 原因是我在其中用了ts的函数强类型校验。

function hasInfluenza(person: Object) {
    person.face = 😷;
    return person;
}

如果你不用ts特性的东西，其实webpack会把其识别成js，不过那样就没意义啦。

引入ts-loader

因此引入ts-loader,试图让webpack识别。

npm install ts-loader --save-dev

// webpack.prod.conf.js
module: {
    rules: [
        ...
        { test: /\.ts$/, use: 'ts-loader' }
    ]
}

这样之后，没有error了，我以为大功告成了,但是一直报一个错。

System.register is not supported by webpack.

有人说是因为tsconfig.json要加上

“module” : “commonjs”

但是就算加上了，还是没有用。

想想算了，还是把webpack版本提升吧。

提升webpack版本

(正文在这里。)

直接安装是不行的，会报一堆依赖的错误，于是我直接重启了一个vue项目。

npm instal vue-cli -g

vue create project2

(当然不能这么命名啦，经理见打，这里只是举个例子)

选择你需要的东西。这篇文章
是关于vue-cli@3的配置的。

然后把原项目的东西拷过来，将main.js改为main.ts, 并把相应的配置复制过来，其他的js文件可以暂时不改。

新建vue.config.js

引入相应的配置。

引入公共css

module.exports = {
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
            // pass options to sass-loader
            sass: {
                // 自动注入全局变量样式
                prependData: `
                    @import "src/assets/css/index.scss";
                `
            }
        },
        // 启用 CSS modules for all css / pre-processor files.
    }
};

引入index.html

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    configureWebpack: {
        plugins: [
            new HtmlWebpackPlugin({
                inject: true,
                filename: 'index.html',
                template: 'index.html'
            }),
        ],
    },
};

其他的可以对比看看webpack和vue-cli的文档。

去掉router的限制

在main.ts引入router.js后，router会一直报一个这样的warning。

30:3 Argument of type ‘{ router: any; store: any; render: (h: CreateElement) => VNode; }’ is not assignable to parameter of type ‘ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>’. Object literal may only specify known properties, and ‘router’ does not exist in type ‘ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>’.

可以先在tsconfig.json关掉限制，以后再改。

"compilerOptions": {
    "allowJs": true
},

具体可以看看这个issue。

贴一下tsconfig.json。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false, // 不严格检测
    "jsx": "preserve",
    "allowJs": true, // 包容一下router
    "importHelpers": true,
    "noImplicitAny": false, // 可以将null赋值，这个是为了不让this.obj = null报错
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "mocha",
      "chai"
    ],
    "paths": { // @指向的地址
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [ // 哪些路径需要ts解析
    "src/**/*.ts"
  ],
  "exclude": [ // 哪些路径ts忽略
    "node_modules"
  ]
}

总结

然后切到原项目，把一些东西删掉，再拷回去就可以了。

这么一顿操作之后，我忽然发现依赖报错的问题只要把package-lock.json删掉，就有可能解决了😢。

也就是说，为了引入typescript, 我把webpack、vue的版本提升了, 顺便引入了vue-cli。
启动项目之后，是能正常运行的，但是因为把elm-ui的版本提升了，有些css的展示问题, 我再慢慢修吧。

大家新年快乐，记得戴口罩呀。