一、Vue項目初始化-引入typescript

使用typescript構建Vue應用和使用js一樣，都是通過vue-cli去初始化并創建一個vue項目，只不過使用typescript構建的時候要在腳手架問卷操作的時候勾選上typescript選項。

二、typescript Vue項目比較

使用typescript構建的Vue項目發生了一些變化:
① main.js變成了main.ts，但是main.ts中的內容和main.js的內容是一模一樣的。
② router.js變成了router.ts，但是router.ts中的內容和router.js中的內容也是一模一樣的。
③ store.js變成了store.ts，但是store.ts中的內容和store.ts中的內容也是一模一樣的。

因為typescript是javascript的超集，所以ts完全兼容js。

④ 新增了一個shims-vue.d.ts聲明文件，這個文件的作用就是讓typescript能夠識別.vue文件，在引入"*.vue"文件的時候，會將其標識為一個Vue組件，才能對.vue文件進行類型校驗，其具體內容如下:

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

⑤ 新增了一個shims-tsx.d.ts文件，其作用就是為了能夠解析.tsx文件，對.tsx文件進行類型校驗，其具體內容如下:

import Vue, { VNode } from 'vue'declare global { namespace JSX {  interface Element extends VNode {}  interface ElementClass extends Vue {}  interface IntrinsicElements {   [elem: string]: any  } }}

⑥ 當然還會新增一個ts.config文件，這個是typescript的配置文件，具體內容這里不作解釋，請參考tsconfig文件詳解

三、.vue文件內容格式與寫法

使用typescript來寫Vue應用，最主要的就是.vue文件，.vue文件寫法上與js有些不同并且新增了一些裝飾器，接著一步一步分析。

① 雖然.vue文件的格式和寫法上有了不同，但這不同只是<script></script>部分發生了變化，<template></template>和<style></style>和原來是一樣的，一個最簡單.vue文件仍然可以使用如下寫法:

// HelloWorld.vue<template>  <div>    hello world  </div></template>

② 在寫<script></script>部分，第一點不同就是，<script>標簽上要加上lang語言屬性，表示其中的內容為ts，如:

<script lang="ts"></script>

③ 默認export上的不同，使用js的時候，我們是直接通過export default {}導出一個Vue組件對象即可，但是使用ts的時候，我們必須導出一個類class，類名為組件名，同時這個類必須繼承Vue，如:

// import Vue from "vue";import { Component, Vue } from 'vue-property-decorator'; // 引入Vue及一些裝飾器@Componentexport default class App extends Vue { // 繼承Vue并導出Vue組件}