如何在vue中使用ts開發

用了這麼久的vue，終於踏出第一步使用ts去開發，發現真的是一時用ts一時爽，一直用ts一直爽。因此今天大概說一下怎麼用ts簡單開發。

1.首先，更改一下webpack配置

1. 修改入口文件 [由於使用ts開發，因此文件都是ts]

   entry: {
       app: '.src/main.js'
   }複製代碼

2. 根路徑下添加 tsconfiog.js配置文件，下面的是本身的一份簡單的配置可參考
   

   {
     // 編譯選項 "compilerOptions": { "module": "esnext", "strict": true, "jsx": "preserve", "typeRoots" : ["./typings"], "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "skipLibCheck": true, "skipDefaultLibCheck": true, "strictNullChecks": true, "downlevelIteration": true, "target": "es5", "noImplicitAny": false, "allowJs": true, "outDir": "./dist/", // 輸出目錄 "noImplicitThis": false, "removeComments": false, "types": [ "webpack-env" ], "paths": { // @表明src模塊的路徑 "@/*": [ "src/*" ] }, "lib": [ // 編譯過程當中須要引入的文件 "esnext", "dom", "dom.iterable", "scripthost", "es5", "es2015", "es2016", "es2017", "es2015.promise", "es2015.collection", "es2015.iterable", "es2015.core", "dom" ] }, "awesomeTypescriptLoaderOptions": {}, "declaration": true, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", ], "exclude": [ "node_modules", "src/main.ts" ]}複製代碼

3. 根目錄下添加 tslint.json文件 ，[規範一下書寫ts]，下面的也是一些簡單配置

   {    "extends": [        "tslint:recommended"    ],    "lib": [        "ES2015",        "ES2016",        "ES2017"    ],    "linterOptions": {        "exclude": [            "node_modules",            "dist",            "config",            "build",            "./**/*.js",            "src/api/**",            "src/components/common/**",            "src/components/page/**",            "src/components/public/**",            "static/**"        ]    },    "rules": {        "member-access": [            true,            "no-public"        ],        "interface-name": [            true,            "always-prefix"        ],        "align": [            true,            "parameters",            "statements"        ],        "class-name": true,        "comment-format": [            true,            "check-space"        ],        "curly": true,        "eofline": true,        "forin": false,        "indent": [            true,            "spaces"        ],        "noImplicitThis": false,        "jsdoc-format": false,        "label-position": true,        "max-line-length": [            true,            200        ],        "no-any": false,        "no-arg": true,        "no-bitwise": false,        "no-conditional-assignment": true,        "no-consecutive-blank-lines": true,        "no-console": [            false,            "debug",            "info",            "log",            "time",            "timeEnd",            "warn",            "trace"        ],        "no-construct": true,        "no-constructor-vars": false,        "no-debugger": false,        "no-duplicate-variable": true,        "no-empty": false,        "no-eval": true,        "no-internal-module": true,        "no-namespace": true,        "no-reference": true,        "no-shadowed-variable": false,        "no-string-literal": true,        "no-switch-case-fall-through": false,        "no-trailing-whitespace": true,        "no-unused-expression": [            true,            "allow-fast-null-checks"        ],        "no-use-before-declare": false,        "no-var-keyword": true,        "no-var-requires": false,        "object-literal-sort-keys": false,        "one-variable-per-declaration": [            true,            "ignore-for-loop"        ],        "quotemark": [            true,            "single",            "jsx-double"        ],        }複製代碼

4. 要讓ts認識vue文件，[在src路徑下面添加vue-shim-d.ts]

   import router from '@/config/router';
   import { Comfirm, MessageBox } from 'element-ui';
   import Vue from 'vue';import VueRouter from 'vue-router';
   import { Route } from 'vue-router';import Tools from '@/utils/tools';
   import Api from '@/config/api';
   // 擴充
   declare module 'vue/types/vue' {
     // 這些是全局屬性，能夠直接this.$api這樣相似使用 
     interface Vue {    
       $router: VueRouter;        
       $route: Route;          
       $message: MessageBox;        
       $conform: Comfirm;        
       $tools: Tools;        
       $api: Api;     
   }}複製代碼

須要注意一點的是在導入vue文件的時候，要寫上.vue後綴，由於TypeScript默認識別ts文件。

2. 改造一下vue文件

在這以前咱們須要安裝一個插件 vue-property-decorator，是在 vue-class-component 上加強了更多的結合 Vue 特性的裝飾器，新增了一些裝飾器。

src/app.vue

 [lang="ts"，讓webpack把這段代碼識別爲ts，除了須要改造一下script標籤內的內容，其餘地方都無需修改]

<template>  
    <div id="app">    
        <router-view></router-view>  
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    @Componentexport 
    default class App extends Vue {  
        private created() {    
            // 不須要保持當前路由，則前往首頁    
            if (!location.hash.includes('keepRoute=true')) {      
                this.$router.push({ path: '/' });    
            }  
         }}
</script>

<style>
@import "./assets/css/main.css";
@import "./assets/css/color-dark.css"; /*深色主題*/
</style>複製代碼

下面舉例一下經常使用的裝飾器使用

<script lang="ts">
import Test from './test.vue';
import { Component, Prop, Provide, Vue, Watch  } from 'vue-property-decorator';
// 引入組件 即便沒有使用組件也得書寫 @Component，裏面爲空便可。
@Component({    
    components: {      
        Test    
    },  
})

 export default class Home extends Vue {
  // Prop 
    @Prop({}) private config: object = {};

  // data 
    private side: boolean = false;
    private list: object = {};
  
 // Watch
    @Watch('config')  
    onConfigChanged(val: any, oldVal: any) {    
        this.init();  
    }}

  // 生命週期
    private created(){
        this.init();
    }

  // 方法
    private init(){
        console.log('halo');
    }
</script>複製代碼

其餘的文件也是參照方式去修改便可。

最後從新運行就好了。