引入typescript踩坑計

時間 2020-01-23

標籤引入 typescript 简体版

原文原文鏈接

typescript已經誕生很久了，一直想把其引入公司的項目中，原先項目採用的是npm、無yarn、無vue-cli，webpack的版本也小於4，webpack配置還嵌套在項目中，是一個純金的老項目呢。css

嘗試

(這是嘗試部分，點擊這裏跳轉到正確操做)html

項目的一些版本：vue

"vue": "^2.5.21",
"webpack": "^3.6.0",
複製代碼

本着不想改變包版本引起其餘問題，以及不知道ts只有webpack4.0才支持，繞了一點彎路。node

安裝typescript

一開始直接在項目安裝typescript,執行webpack

npm install -g typescript
git

配置完tsconfig.json後github

{ 
    "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的函數強類型校驗。web

function hasInfluenza(person: Object) {
    person.face = 😷;
    return person;
}
複製代碼

若是你不用ts特性的東西，其實webpack會把其識別成js，不過那樣就沒意義啦。vue-cli

引入ts-loader

所以引入ts-loader,試圖讓webpack識別。typescript

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"
  ]
}

複製代碼