1：引入Typescript
npm install vue-class-component vue-property-decorator --save
安裝ts-loader
npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
- vue-class-component 擴(kuò)展vue支持typescript，將原有的vue語(yǔ)法通過(guò)聲明的方式來(lái)支持ts
- vue-property-decorator 基于vue-class-component擴(kuò)展更多裝飾器阎抒，例如：watch.ref,provide肮柜。所以這里其實(shí)只要安裝vue-property-decorator也可以。
- ts-loader 讓webpack能夠識(shí)別ts文件
- tslint-loader以及tslint用來(lái)約束文件編碼
- tslint-config-standard tslint 配置 standard風(fēng)格的約束
2：配置文件
- webpack配置
根據(jù)項(xiàng)目的不同配置的地方不同鸟赫，如果是vue cli 3.0創(chuàng)建的項(xiàng)目需要在vue.config.js中配置，如果是3.0以下版本的話，需要webpack.base.conf中配置散庶。(以下說(shuō)明是在webpack.base.conf文件中更改)
(1)在resolve.extensions中增加.ts蕉堰，目的是在代碼中引入ts文件不用寫(xiě).ts后綴
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {}
},
(2)在module.rules中增加ts的rules
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
]
}
以下附上自己測(cè)試項(xiàng)目的vue.config.js配置
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
lintOnSave: true,
configureWebpack: {
resolve: {
extensions: ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm']
}
},
chainWebpack: config => {
// 處理ts文件 (新增loader)
config.module
.rule('ts')
.test(/\.tsx?$/)
.exclude
.add(resolve('node_modules'))
.end()
.use('cache-loader')
.loader('cache-loader')
.options({
cacheDirectory: resolve('node_modules/.cache/ts-loader')
})
.end()
.use('babel-loader')
.loader('babel-loader')
.end()
.use('ts-loader')
.loader('ts-loader')
.options({
transpileOnly: true, // 關(guān)閉類型檢查，即只進(jìn)行轉(zhuǎn)譯(類型檢查交給webpack插件(fork-ts-checker-webpack-plugin)在另一個(gè)進(jìn)程中進(jìn)行,這就是所謂的多進(jìn)程方案,如果設(shè)置transpileOnly為false, 則編譯和類型檢查全部由ts-loader來(lái)做, 這就是單進(jìn)程方案.顯然多進(jìn)程方案速度更快)
appendTsSuffixTo: ['\\.vue$'],
happyPackMode: false
})
.end()
// eslint 自動(dòng)修復(fù) (修改已經(jīng)存在的loader)
config.module
.rule('eslint')
.test(/\.(vue|(j|t)sx?)$/)
.pre() // eslint是pre處理的
.use('eslint-loader')
.loader('eslint-loader')
.tap(options => { // 修改已經(jīng)存在loader的配置
options.fix = true
return options
})
.end()
}
}
- tsconfig.json配置
ts-loader會(huì)檢索文件中的tsconfig.json.以其中的規(guī)則來(lái)解析ts文件悲龟，詳細(xì)的配置可以參考https://www.tslang.cn/docs/handbook/tsconfig-json.html
貼上測(cè)試項(xiàng)目tsconfig.json文件
{
// 編譯選項(xiàng)
"compilerOptions": {
// 輸出目錄
"outDir": "./output",
// 是否包含可以用于 debug 的 sourceMap
"sourceMap": true,
// 以嚴(yán)格模式解析
"strict": false,
// 采用的模塊系統(tǒng)
"module": "esnext",
// 如何處理模塊
"moduleResolution": "node",
// 編譯輸出目標(biāo) ES 版本
"target": "es5",
// 允許從沒(méi)有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入
"allowSyntheticDefaultImports": true,
// 將每個(gè)文件作為單獨(dú)的模塊
"isolatedModules": false,
// 啟用裝飾器
"experimentalDecorators": true,
// 啟用設(shè)計(jì)類型元數(shù)據(jù)（用于反射）
"emitDecoratorMetadata": true,
// 在表達(dá)式和聲明上有隱含的any類型時(shí)報(bào)錯(cuò)
"noImplicitAny": false,
// 不是函數(shù)的所有返回路徑都有返回值時(shí)報(bào)錯(cuò)屋讶。
"noImplicitReturns": true,
// 從 tslib 導(dǎo)入外部幫助庫(kù): 比如__extends，__rest等
"importHelpers": true,
// 編譯過(guò)程中打印文件名
"listFiles": true,
// 移除注釋
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
// 允許編譯javascript文件
"allowJs": true,
// 解析非相對(duì)模塊名的基準(zhǔn)目錄
"baseUrl": "./",
// 指定特殊模塊的路徑
"paths": {
"jquery": [
"node_modules/jquery/dist/jquery"
]
},
// 編譯過(guò)程中需要引入的庫(kù)文件的列表
"lib": [
"dom",
"es2015",
"es2015.promise"
]
}
}
- tslint.json配置
在目錄中新增tslint.json文件须教，由于我們前面安裝了tslint-config-standard皿渗，所以可以直接用tslint-config-standard中規(guī)則，文件如下
{
"extends": "tslint-config-standard",
"globals": {
"require": true
}
}
3：讓項(xiàng)目識(shí)別.ts
由于 TypeScript 默認(rèn)并不支持 *.vue 后綴的文件轻腺，所以在 vue 項(xiàng)目中引入的時(shí)候需要?jiǎng)?chuàng)建一個(gè) vue-shim.d.ts 文件乐疆，放在根目錄下
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
然后引入vue的時(shí)候需要加上.vue,否則在嚴(yán)格模式下會(huì)報(bào)錯(cuò)
注：也試過(guò)不寫(xiě)這個(gè)文件，項(xiàng)目依舊運(yùn)行成功贬养，很神奇挤土，留一個(gè)疑問(wèn)，后期看下因?yàn)槭裁?/p>
4：編寫(xiě)test.vue
<template>
<div class="test-container">
{{message}}
<Hello></Hello>
</div>
</template>
<script lang="ts">
import { Component } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
@Component({
components: {
Hello
}
})
export default class Test extends Vue {
message: string = "asd";
}
</script>
運(yùn)行項(xiàng)目就可以看到項(xiàng)目正常運(yùn)行啦
