1. 前言
ES6的普及，大大簡化了JavaScript的表達方式
大型項目中，js沒有類型檢查、表達方式靈活，多人協作代碼調試和維護成本高
2. 定義
TypeScript 是 JavaScript 的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程，可以理解成是 js 的強類型版本
這里的Type：類型（指的就是靜態類型檢查）
3. 走馬觀花學一下
npm安裝：
npm install -g typescript
新建ts.ts文件如下：
function hello(msg: string): void {
console.log(`hello, ${msg}`);
}
hello('kwin');
運行命令，會編譯出一個ts.js文件，這樣js文件可以在瀏覽器或者node環境中運行
tsc ts.ts
由於最終在瀏覽器中運行的仍然是 JavaScript，所以 TypeScript 並不依賴於瀏覽器的支持，也並不會帶來兼容性問題
接下來看看文檔，
靜態類型分為：基礎類型、接口、類、函數、泛型、枚舉等
接口（Interface）：為類型命名和為你的代碼或第三方代碼定義契約
類（Class）：以往在js中我們使用函數和基於原型的繼承來創建可重用的組件，ts中是基於類的繼承 對象是由類構建出來的
工程配置文件：tsconfig.json 看到這個文件說明是ts項目的根目錄
使用外部依賴的時候需要書寫聲明文件 >> .d.ts
參考：
TypeScript中文文檔
TypeScript手冊
4. js => ts 遷移
ts 中可以使用 純js
項目重構初期可以考慮ts js 並存，逐步替換，下面着重看下Vue項目向ts的遷移
4.1 安裝依賴
vue的官方插件
npm i vue-class-component vue-property-decorator --save
ts-loader typescript tslint等
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
這些庫大體的作用：
-
vue-class-component：強化 Vue 組件，使用 TypeScript/裝飾器 增強 Vue 組件
-
vue-property-decorator：在 vue-class-component 上增強更多的結合 Vue 特性的裝飾器
-
ts-loader：TypeScript 為 Webpack 提供了 ts-loader，其實就是為了讓webpack識別 .ts .tsx文件
-
tslint-loader跟tslint：我想你也會在.ts .tsx文件 約束代碼格式（作用等同於eslint）
-
tslint-config-standard：tslint 配置 standard風格的約束
4.2 配置webpack 設置ts解析
entry: {
app: './src/main.ts'
},
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
...
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client'),
],
},
{
test: /\.ts$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader',
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
...
]
},
4.3 添加 tsconfig.json
在項目根目錄下創建tsconfig.json，參考配置如下：
{
// 編譯選項
"compilerOptions": {
// 輸出目錄
"outDir": "./output",
// 是否包含可以用於 debug 的 sourceMap
"sourceMap": true,
// 以嚴格模式解析
"strict": true,
// 采用的模塊系統
"module": "esnext",
// 如何處理模塊
"moduleResolution": "node",
// 編譯輸出目標 ES 版本
"target": "es5",
// 允許從沒有設置默認導出的模塊中默認導入
"allowSyntheticDefaultImports": true,
// 將每個文件作為單獨的模塊
"isolatedModules": false,
// 啟用裝飾器
"experimentalDecorators": true,
// 啟用設計類型元數據（用於反射）
"emitDecoratorMetadata": true,
// 在表達式和聲明上有隱含的any類型時報錯
"noImplicitAny": false,
// 不是函數的所有返回路徑都有返回值時報錯。
"noImplicitReturns": true,
// 從 tslib 導入外部幫助庫: 比如__extends，__rest等
"importHelpers": true,
// 編譯過程中打印文件名
"listFiles": true,
// 移除注釋
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
// 允許編譯javascript文件
"allowJs": true,
// 解析非相對模塊名的基准目錄
"baseUrl": "./",
// 指定特殊模塊的路徑
"paths": {
"jquery": [
"node_modules/jquery/dist/jquery"
]
},
// 編譯過程中需要引入的庫文件的列表
"lib": [
"dom",
"es2015",
"es2015.promise"
]
}
}
4.4 添加 tslint.json
在項目根目錄下創建tslint.json，即引入ts的規范
{
"extends": "tslint-config-standard",
"globals": {
"require": true
}
}
4.5 讓 ts 識別 .vue
在src目錄下創建 vue-shim.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
4.6 修改 .vue文件
<template> 和 <style> 都不用修改，
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修飾符注明了這是一個Vue組件
@Component({
// 組件可以在這里定義
components: {
// NavHeader
}
})
export default class HelloWorld extends Vue {
// 初始數據可以直接聲明
msg: string = 'Welcome to Your Vue.js App'
// 組件的方法也可以直接聲明
greet() {
alert('greeting: ' + this.msg)
}
mounted() {
this.greet()
}
// 計算屬性
get computedMsg() {
return 'computed ' + this.msg
}
}
</script>
4.7 npm run dev 運行即可
5. Vue3.0 TypeScript
Vue3.0將會用 ts 重構
3.x版本的腳手架已經發布：@vue/cli
下個版本，TypeScript的時代，一起期待吧！