vue與TypeScript集成配置最簡教程
[TOC]
前言
Vue的官方文檔沒有給出與TypeScript集成的具體步驟，網(wǎng)上其他的教程不是存在問題就是與vue-cli建立的項目存在差異，讓人無從下手简肴。
下面我就給出vue-cli建立的項目與TypeScript集成的最簡配置。
初始化項目
首先用vue-cli建立webpack項目。這里為了演示方便棍厂，沒有打開router和eslint等棕孙，可以根據(jù)自身情況打開拷恨。
# vue init webpack vue-typescript
? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
安裝TypeScript相關(guān)依賴和項目其余依賴脖律，用npm或cnpm
# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install
配置
修改目錄下bulid/webpack.base.conf.js文件，在文件內(nèi)module>rules添加以下規(guī)則
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
在src目錄下新建一個文件vue-shims.d.ts腕侄，用于識別單文件vue內(nèi)的ts代碼
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
在項目根目錄下建立TypeScript配置文件tsconfig.json
{
"compilerOptions": {
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"allowSyntheticDefaultImports": true,
"lib": [
"es2017",
"dom"
]
}
}
重命名src下的main.js為main.ts
修改webpack.base.conf.js下的entry>app為'./src/main.ts'
修改src下的App.vue文件小泉，在<script>節(jié)點中添加lang=ts屬性
<script lang="ts">
測試
下面可以測試是否集成成功，編輯src/components/Hello.vue文件冕杠，修改<script>標(biāo)簽的內(nèi)容為TypeScript的形式
<script lang="ts">
import Vue, {ComponentOptions} from 'vue'
export default {
name: 'hello',
data() {
return {
msg: 'this is a typescript project now'
}
}
} as ComponentOptions<Vue>
</script>
運行項目
# npm run dev
測試成功微姊，現(xiàn)在是一個TypeScipt項目了
進(jìn)階
配置官方推薦的vue-class-component，https://cn.vuejs.org/v2/guide/typescript.html
安裝開發(fā)依賴
# npm install --save-dev vue-class-component
修改ts配置文件分预，增加以下兩項配置
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
改寫我們的Hello組件
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class Hello extends Vue {
msg: string = 'this is a typescript project now'
}
</script>
使用vue-class-component后兢交，初始數(shù)據(jù)可以直接聲明為實例的屬性，而不需放入data() {return{}}中笼痹，組件方法也可以直接聲明為實例的方法配喳，如官方實例，更多使用方法可以參考其官方文檔
https://github.com/vuejs/vue-class-component#vue-class-component
import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修飾符注明了此類為一個 Vue 組件
@Component({
// 所有的組件選項都可以放在這里
template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
// 初始數(shù)據(jù)可以直接聲明為實例的屬性
message: string = 'Hello!'
// 組件方法也可以直接聲明為實例的方法
onClick (): void {
window.alert(this.message)
}
}
