引入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的展现问题, 我再慢慢修吧。

你们新年快乐，记得戴口罩呀。