下面將以項(xiàng)目搭建的方式完成改文章敘述：

項(xiàng)目基礎(chǔ)架構(gòu)是通過cli搭建的，主要是vue（2.5.16）+ webpack（3.6.0）+ element-ui（2.8.2），整體項(xiàng)目還簡(jiǎn)單用了vuex，eslint等。

一、依賴記

項(xiàng)目從基礎(chǔ)js改為ts，因?yàn)槭浅醮螄L試，本著最小依賴、最小改動(dòng)原則，只引入了一些基礎(chǔ)依賴：

• typescript：#3.1.6 -- 接入ts的基礎(chǔ)依賴，版本需要根據(jù)項(xiàng)目相關(guān)版本進(jìn)行修改
• ts-loader：#3.5.0 -- 同樣是基礎(chǔ)依賴
• ts-lint tslint-config-standard tslint-loader -- 這三個(gè)是將原來的eslint校驗(yàn)替換掉，沒仔細(xì)研究過，應(yīng)該是可以處理一些引入了ts之后eslint導(dǎo)致的莫名其妙的校驗(yàn)問題。

二、配置記

webpack.base.config.js修改：

入口文件將原來的.js改為.ts

entry: {
? ? app: ['babel-polyfill', './src/main.ts']
?},

resolve.extensions增加ts：

extensions: ['.tsx', '.ts', '.js', '.vue', '.json'],

rules增加對(duì)ts的解析：

{
? ? test: /\.(ts|tsx)?$/,
? ? loader: 'ts-loader',
? ? exclude: /node_modules/,
? ? options: {
? ? ? appendTsxSuffixTo: [/\.vue$/], ?// ts不知道如何處理.vue結(jié)尾文件，需加此配置
? ? ? happyPackMode: true ?// 開啟多線程，加快編譯
? ? }
?}

eslint替換為tslint：

{
? ? test: /\.ts$/,
? ? loader: 'tslint-loader',
? ? exclude: /node_modules/,
? ? enforce: 'pre'
}

同時(shí)在vue-loader.conf.js里增加配置，在根目錄下增加tslint.json配置文件：

// vue-loader.conf.js
const mergeVue = require('webpack-merge')

loaders: mergeVue(utils.cssLoaders({
? ? sourceMap: sourceMapEnabled,
? ? extract: isProduction
}), {
? ? ts: ['ts-loader', 'tslint-loader'] ? // 新增
}),

// tslint.json
{
? ? "extends": "tslint-config-standard",
? ? "globals": {
? ? ? "require": true
? ? },
? ? "rules": {
? ? ? "no-consecutive-blank-lines": false
? ? }
}

另外還有其他一些基礎(chǔ)的修改，比如ts會(huì)校驗(yàn)不同文件間的重名，并給出錯(cuò)誤提示。這點(diǎn)當(dāng)然可以通過配置去處理，但是個(gè)人覺得這個(gè)提示可以保留，只需要修改對(duì)應(yīng)的變量名就可以了。
新增配置文件tsconfig.json（個(gè)別配置字段會(huì)在后面填坑說明）

{
? "compilerOptions": {
? ? "target": "es5",
? ? "strict": true,
? ? "module": "es2015",
? ? "moduleResolution": "node",
? ? "baseUrl": ".",
? ? "paths": {
? ? ? "@/*": ["src/*"]
? ? },
? ? "types": [
? ? ? "node"
? ? ],
? ? "noImplicitAny": false,
? ? "allowSyntheticDefaultImports": true
? }
}

src目錄下增加 vue.d.ts 文件：

此文件主要是告訴ts，.vue結(jié)尾的文件交給vue去處理。但是這樣會(huì)造成一個(gè)父子組件引用問題，同樣后邊填坑單說。

declare module '*.vue' {
? ? import Vue from 'vue'
? ? export default Vue
}

三、修改記

1.將必要文件的.js替換為.ts

這里說必要的js結(jié)尾文件，我處理的主要是邏輯相關(guān)的文件，對(duì)于一些config類型的文件并沒有修改，依然保留了js結(jié)尾，目的是最小改動(dòng)原則，避免一些難處理的問題。

2.vue文件修改

針對(duì)vue文件：

• 需要在script標(biāo)簽上增加 lang='ts'
• 同時(shí)需要用vue.extend定義組件
• 如果有引用其他組件，未引入ts時(shí)候可以省略.vue后綴，但是引入ts之后，引入組建的時(shí)候一定要加上.vue后綴

<script lang="ts">
import Vue from 'vue'
import Table from '@/components/table/index.vue'

export default Vue.extend({
? ? data(){
? ? ? ? return {
? ? ? ? ? ? name: ''
? ? ? ? }
? ? }
})

經(jīng)過以上三步基礎(chǔ)的修改，如果你的項(xiàng)目非常簡(jiǎn)單，簡(jiǎn)單到就是個(gè)測(cè)試架子，那就可以愉快地npm start了，沒有太大問題。但是如果是原有項(xiàng)目，去start的時(shí)候，會(huì)爆出很多警告問題，當(dāng)然如果是基礎(chǔ)的ts校驗(yàn)問題，我們可以去直接修改文件或者配置即可。

忽略ts格式校驗(yàn)，我們可以看到原有項(xiàng)目里增加ts語法后（或者未增加ts語法）會(huì)出現(xiàn)另外一些問題，可能問題并不會(huì)影響到程序的編譯運(yùn)行，但是在編輯器里會(huì)飄紅~ 接下來就簡(jiǎn)單說下所填的幾個(gè)坑。

四、填坑記

Cannot find name ‘require‘. Do you need to install type definitions for node? 當(dāng)我們用require引入某些文件時(shí)，可能會(huì)出現(xiàn)這個(gè)錯(cuò)誤提示，這種問題基本就是需要安裝對(duì)應(yīng)的@type依賴，針對(duì)此問題：

安裝：npm i --save-dev @types/node，在tsconfig.json里增加 "types": ["node"]，如果還是有錯(cuò)誤提示，可以添加 declare var require: any。

類似的問題還有引入lodash、qs等，需要安裝對(duì)應(yīng)的@type/xx。如果使用了vue-cookie，需要安裝對(duì)應(yīng)的ts版本 vue-cookies-ts同時(shí)對(duì)應(yīng)的方法需要做修改，詳見文檔 vue-cookies-ts 。

Cannot find module ‘XXX‘ or its corresponding type declarations.Vetur 這種錯(cuò)誤出現(xiàn)場(chǎng)景是，我們按照基礎(chǔ)內(nèi)容配置好之后，通過import引入某個(gè)ts文件的時(shí)候出現(xiàn)的。這個(gè)問題其實(shí)挺詭異的，如果加上.ts后綴，會(huì)提示不需要加，去掉后綴之后就報(bào)找不到模塊。

這個(gè)問題解決辦法一種就是看有沒有配置alias，同時(shí)需要在tsconfig.json里增加 "paths": {"@/*": ["src/*"]}。配置之后如果還不生效，基本方法二就能解決了，方法二就是把項(xiàng)目放在第一個(gè)，就是用vscode直接打開一個(gè)項(xiàng)目，而不是打開某個(gè)文件夾下有很多項(xiàng)目的情況。這個(gè)問題應(yīng)該是vetur插件導(dǎo)致的。當(dāng)然還有第三種方法就是添加單獨(dú)的vetur配置，這個(gè)沒有去研究，有時(shí)間的小伙伴可以考慮下。

Property ‘$http‘ does not exist on type ‘xxx‘ 通常vue開發(fā)我們網(wǎng)絡(luò)請(qǐng)求會(huì)使用axios封裝一個(gè)統(tǒng)一的方法，在main.ts里引入綁定：

import httpRequest from '@/utils/httpRequest'
Vue.prototype.$http = httpRequest

// 方法的使用
this.$http()

在使用this（Vue）去使用的時(shí)候會(huì)出現(xiàn)報(bào)錯(cuò)提示，考慮原因是因?yàn)槲覀兩线吪渲昧藇ue.d.ts，.vue結(jié)尾的文件都當(dāng)做vue去處理，而vue是沒有$http方法的，最簡(jiǎn)單的辦法就是直接上any了，(this as any).$http ，但是對(duì)于成型項(xiàng)目來說這么寫改動(dòng)內(nèi)容太多了?？梢圆捎萌缦路椒?同樣處理了$store的使用問題)：

在src下新建一個(gè)vue-shim.d.ts，添加下面配置：

import { Store } from 'vuex';
declare module 'vue/types/vue' {
? ? interface Vue {
? ? ? ? '$stroe': Store,
? ? ? ? '$http': any
? ? }
}

Property 'resetFields' does not exist on type 'Vue'

如果使用了element表單相關(guān)方法，可能會(huì)涉及到表單清空、重置之類的方法調(diào)用，通常做法可以給form一個(gè)ref，然后通過 this.$refs['xxx'].resetFields()調(diào)用。但是加入ts之后會(huì)提示錯(cuò)誤，原因同樣是這里的this被指向了vue，不存在相關(guān)方法。

解決方法使用類型斷言，將ref斷言成element相關(guān)內(nèi)容：

import { Form as EleForm } from 'element-ui'
// 方法內(nèi)部
const ref = this.$refs['searchForm'] as EleForm
ref.resetFields()

還有一種情況，就是父子組件間，在父組件內(nèi)部去使用子組件的方法，同樣是使用ref去調(diào)用，也會(huì)出現(xiàn)上邊的錯(cuò)誤提示。這個(gè)問題開始考慮是用類似的斷言，把ref斷言成子組件，但是方法不通，通過網(wǎng)上搜索也沒找到合適的方法，大部分方法都是直接斷言成了any，即(this.$refs['xxx'] as any).clearList() 。這么斷言，問題是可以解決的，但是希望能找到更合適的方法，

到此這篇關(guān)于vue接入ts基本方法的文章就介紹到這了,更多相關(guān)vue接入ts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論