Vue+TypeScript 入門小問題彙總

Vue + TypeScript

*.d.ts

*.d.ts類型文件不須要手動引入，TypeScript會自動加載。TypeScript 默認只識別 *.ts 文件，不識別 *.vue 文件，所以須要告訴TypeScript*.vue文件交給vue編輯器來處理。
解決方案就是在建立一個vue-shims.d.ts文件：

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
複製代碼

vue裝飾器

vue-class-component

強化 Vue 組件，使用 TypeScript/裝飾器 加強 Vue 組件

vue-property-decorator

在 vue-class-component 上加強更多的結合 Vue 特性的裝飾器。

• @Emit
• @Inject
• @Model
• @Prop
• @Provide
• @Watch
• @Component (從 vue-class-component 繼承)

vuex-class

基於vue-class-component對Vuex提供的裝飾器。它的做者同時也是vue-class-component的主要貢獻者，質量仍是有保證的。
ts對vuex的支持不是很好。在TypeScript裏面使用不了mapState、mapGetters等方法，只能一個變量一個變量的去引用，這個要麻煩很多。不過使用vuex-class庫以後，寫法上也還算簡潔美觀

export default class modules extends Vue {
  @State login: boolean; // 對應this.$store.state.login
  @State headline: StoreState.headline[]; // 對應this.$store.state.headline
  private swiperOption: Object = {
    autoplay: true,
    loop: true,
    direction: "vertical"
  };
  logoClick(): void {
    alert("點我幹嗎");
  }
}
複製代碼

十萬個爲何？

1. 引入/下載第三方庫，爲何仍然提醒找不到？

TypeScript是模仿Node.js運行時的解析策略來在編譯階段定位模塊定義文件。 所以，TypeScript在Node解析邏輯基礎上增長了TypeScript源文件的擴展名（ .ts，.tsx和.d.ts）。 同時，TypeScript在 package.json裏使用字段"types"來表示相似"main"的意義 - 編譯器會使用它來找到要使用的"main"定義文件。        （"typings"與"types"具備相同的意義，也可使用它。一樣要注意的是若是主聲明文件名是index.d.ts而且位置在包的根目錄裏（與index.js並列），就不須要使用"types"屬性指定了。）
好比，有一個導入語句import { b } from "./moduleB"在/root/src/moduleA.ts裏，會如下面的流程來定位"./moduleB"：

• /root/src/moduleB.ts
• /root/src/moduleB.tsx
• /root/src/moduleB.d.ts
• /root/src/moduleB/package.json (若是指定了"types"屬性)
• /root/src/moduleB/index.ts
• /root/src/moduleB/index.tsx
• /root/src/moduleB/index.d.ts

回想一下Node.js先查找moduleB.js文件，而後是合適的package.json，再以後是index.js。
相似地，非相對的導入會遵循Node.js的解析邏輯，首先查找文件，而後是合適的文件夾。 所以 /root/src/moduleA.ts文件裏的import { b } from "moduleB"會如下面的查找順序解析：

• /root/src/node_modules/moduleB.ts
• /root/src/node_modules/moduleB.tsx
• /root/src/node_modules/moduleB.d.ts
• /root/src/node_modules/moduleB/package.json (若是指定了"types"屬性)
• /root/src/node_modules/moduleB/index.ts
• /root/src/node_modules/moduleB/index.tsx
• /root/src/node_modules/moduleB/index.d.ts
• /root/node_modules/moduleB.ts
• /root/node_modules/moduleB.tsx
• /root/node_modules/moduleB.d.ts
• /root/node_modules/moduleB/package.json (若是指定了"types"屬性)
• /root/node_modules/moduleB/index.ts
• /root/node_modules/moduleB/index.tsx
• /root/node_modules/moduleB/index.d.ts
• /node_modules/moduleB.ts
• /node_modules/moduleB.tsx
• /node_modules/moduleB.d.ts
• /node_modules/moduleB/package.json (若是指定了"types"屬性)
• /node_modules/moduleB/index.ts
• /node_modules/moduleB/index.tsx
• /node_modules/moduleB/index.d.ts

所以，如果有些庫沒有提供typescript的聲明，須要使用者手動去添加。
即在src/typings目前下建一個tools.d.ts文件，聲明這個模塊便可

declare module 'vue-lazyload'
複製代碼

2. prop爲何一直都是undefined？

必需要使用vue-class-component而不是vue-property-decorator的Component。

import Component from "vue-class-component";
import { Prop, Vue, Watch } from "vue-property-decorator";
複製代碼

後來排查問題，發現是由於我使用了兩個裝飾器的「合併寫法」（即錯誤寫法）

​
​
​

正確的寫法：

3. prop的默認值是空對象爲何始終不起效？

大括號在js中是塊做用域，所以會產生歧義，是塊做用域呢仍是返回空對象呢。所以，須要包一層小括號。像數組之類的就不會有歧義了，所以能夠直接返回。

// 錯誤
@Prop({
    default: () => {}
  })
  private value!: any;

// 正確
@Prop({
    default: () => ({})
  })
  private value!: any;
複製代碼

4. 爲何import vue組件時，一切都對的，就是cannot find module?

必須帶上後綴.vue！由於ts只認識.ts。

5. 爲何申明瞭一個接口類型，可是仍是報錯Cannot find name？

即便聲明文件不須要導出任何東西，仍然須要導出一個空對象，用來告訴編譯器這是一個模塊的聲明文件，而不是一個全局變量的聲明文件。