Vue筆記3-Vue TypeScript 定義檔簡便做法

要用 TypeScript 寫 Vue 程式,首先要取得 Vue.js TypeScript 定義檔才能享受強型別的好處。

Vue 2.0 釋出於 2016/9/30(最新版為 2.5 版),NuGet 上的 vue.TypeScript.DefinitelyTyped 更新時間為 2016/9/26,版本只到 1.0,己不適用最新版 Vue.js。(前端開發者已多改從 npm 體系取得定義檔,猜想 NuGet 定義檔因此不再更新)

因此,我們可改由 Vue Github 取得最新定義檔: https://github.com/vuejs/vue/tree/dev/types

Github 上的 Vue TypeScript 定義檔除了 vue.d.ts 之外還有好幾個檔案,有個 index.d.ts,同時每個 d.ts 出現的大量 export/import,代表它們 TypeScript Module 系統,你的 TypeScript 檔案必須先 import { Vue } from "vue" 才認得 new Vue()。過去用 TypeScript 寫 Knockout、Angular 1,NuGet 裝好 TypeSciprt 定義檔開始幹活的做法已不適用 Vue 2.0 的 TypeScript 開發。然而,一旦使用 import 會讓我們的 .ts 變成 Module 的副作用,得引進 AMD/RequireJS 或使用 Browserify 或 Webpack 等工具打包才能用在網頁上,十分麻煩。(延伸閱讀: TypeScript Module 簡單練習 )

我希望 TypeScript 寫 Vue 可以比照 jQuery/Angular 1 下載 d.ts 就開心寫 Code,不要改變過去單純的開發模式,為達成此理想,得花點功夫處理定義檔。

將前述的一堆 d.ts 檔放入 Scripts/typings/vue 目錄,但由於它採用 Module 系統,不像 jQuery.d.ts 只要放在 typings 目錄就直接生效,我們需要加點工。

如果你跟我一樣不想為了喝牛奶養牛,為了加定義檔被迫使用 TypeScript Module 系統(當然,使用 Module 有很多額外好處,但需付出複雜化的代價,在簡單應用情境有揮牛刀之嫌),請在 Scripts/typings/vue 新增一個 vue-global.d.ts,加入以下內容 :

//https://stackoverflow.com/a/43257916/288936
import * as _vue from "./vue";
 
declare global {
    const Vue: typeof _vue.Vue;
}

vue-global.d.ts 將引用 vue Module 並將 Vue 定義開放為全域範圍。

接著如下圖所示,一般 .ts 不必使用 import 也能大方享用 Vue 強型別囉~

歡迎推文分享:
Published 18 October 2017 07:46 AM 由 Jeffrey
Filed under: ,
Views: 2,690



意見

# Lik said on 23 October, 2017 12:53 PM

等待黑大將 vue 2.5 和 typescript的結合的例子。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<October 2017>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication