下面將以項目搭建的方式完成改文章敘述：

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

一、依賴記

項目從基礎(chǔ)js改為ts，因為是初次嘗試，本著最小依賴、最小改動原則，只引入了一些基礎(chǔ)依賴：

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

二、配置記

webpack.base.config.js修改：

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

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

resolve.extensions增加ts：

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

rules增加對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'
}

同時在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會校驗不同文件間的重名，并給出錯誤提示。這點當(dāng)然可以通過配置去處理，但是個人覺得這個提示可以保留，只需要修改對應(yīng)的變量名就可以了。
新增配置文件tsconfig.json（個別配置字段會在后面填坑說明）

{
? "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去處理。但是這樣會造成一個父子組件引用問題，同樣后邊填坑單說。

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

三、修改記

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

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

2.vue文件修改

針對vue文件：

• 需要在script標(biāo)簽上增加 lang='ts'
• 同時需要用vue.extend定義組件
• 如果有引用其他組件，未引入ts時候可以省略.vue后綴，但是引入ts之后，引入組建的時候一定要加上.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ǔ)的修改，如果你的項目非常簡單，簡單到就是個測試架子，那就可以愉快地npm start了，沒有太大問題。但是如果是原有項目，去start的時候，會爆出很多警告問題，當(dāng)然如果是基礎(chǔ)的ts校驗問題，我們可以去直接修改文件或者配置即可。

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

四、填坑記

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

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

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

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

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

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

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

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

在使用this（Vue）去使用的時候會出現(xiàn)報錯提示，考慮原因是因為我們上邊配置了vue.d.ts，.vue結(jié)尾的文件都當(dāng)做vue去處理，而vue是沒有$http方法的，最簡單的辦法就是直接上any了，(this as any).$http ，但是對于成型項目來說這么寫改動內(nèi)容太多了。可以采用如下方法(同樣處理了$store的使用問題)：

在src下新建一個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)方法，可能會涉及到表單清空、重置之類的方法調(diào)用，通常做法可以給form一個ref，然后通過 this.$refs['xxx'].resetFields()調(diào)用。但是加入ts之后會提示錯誤，原因同樣是這里的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)用，也會出現(xiàn)上邊的錯誤提示。這個問題開始考慮是用類似的斷言，把ref斷言成子組件，但是方法不通，通過網(wǎng)上搜索也沒找到合適的方法，大部分方法都是直接斷言成了any，即(this.$refs['xxx'] as any).clearList() 。這么斷言，問題是可以解決的，但是希望能找到更合適的方法，

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

最新評論