目錄

• vue.js 學習筆記3——TypeScript
  • 工具
  • 基礎類型
  • 數組
  • 元組
  • 枚舉
    • 字面量
  • 接口
  • 類類型
    • 類類型要素
  • 函數
    • 函數參數
    • this對象和類型
    • 重載
    • 迭代器 Symbol.iterator
  • 聲明、解構、展開、類型斷言
  • 泛型
    • 泛型約束
  • 交叉類型、聯合類型
  • 索引類型
  • 映射類型
  • 類型兼容
    • 類型保護、推斷
  • 模塊和命名空間
  • 裝飾器
    • 類裝飾器：
    • 函數裝飾器：
    • 屬性裝飾器：
    • 參數裝飾器：

vue.js 學習筆記3——TypeScript

工具

npm install -g typescript #安裝typescript 工具tsc編譯器
tsc a.ts #輸出 a.js
node a.js #運行js

typescript 通過tsconfig.json 文件配置。

可通過gulp 等工具管理項目自動化編譯和運行。

基礎類型

boolean 布爾、number 數字、string 字符串、enum 枚舉、any 任意、void 空、null 空值、 undefined 未定義、symbol 符號值、object 對象、never 不存在。

let isDone:boolean = false;
let name:string = "普通字符串";
let firstName:string = `模板字符串${isDone}`; //支持插入和換行

enum Color{Red=0,Green=2,Blue=4}
let c:Color = Color.Green;

let notSure:any = 4;
notSure = "字符串也行";

let voidValue:void = undefined;//只有undefined或null兩個值。 
let u:undefined = undefined;
let n:null = null;
let sym:symbol = Symbol(); //唯一存在，可用作對象成員的鍵
let o:object = {};//除boolean、number、string、symbol、null、undefined外的類型

():never=>{throw "";}; //用來定義沒有返回路徑的方法。該類型是所有類型的子類型。

注意：

• ts中object和null不相容
• object和基礎類型都不相容
• any是根類型，never是葉子類型
• 嚴格選項下，null和undefined除自身和void都不相容

數組

[] 數組

let list:number[] = [1,2,3];
let genList:Array<number>=[1,2,3]; //泛型數組

元組

let x:[string,number] = ['hello',10];

枚舉

• const enum 常量枚舉會被用值直接替換
• 枚舉是一個對象，數值類型會有屬性雙向映射
• 用字面量或者無初始化的枚舉的成員是一個類型，值就是該枚舉成員。該枚舉是一個聯合
• 枚舉成員初始化是簡單常量算式，為常量成員，否則為計算成員
• 枚舉成員可以是數字或字符型
• 外部枚舉成員默認是計算成員

字面量

1. "s"|"n"|"m" 用豎線分隔的字面量限定字符串變量的可選值。
2. 1|2|3|4 數字變量的可選值。

接口

接口做類型的聲明，而沒有具體實現。

interface 接口名 extends 可選的父接口{
    color?:string; //可選屬性
    width:number;
    readonly x:number;//只讀屬性
    [propName:string]:any; //索引屬性，如s["name"]，其他屬性類型必須兼容索引屬性
    [index:number]:any; //數字下標做索引，s[1] 等價 s["1"]
    (start:number):string; //實例成員函數
    new():object; //初始化構造函數
}

類類型

類類型可以實現接口。類分兩部分，靜態部分和實例部分，類構造函數屬於靜態部分，而接口實現屬於實例部分。

interface face{
    data:string;
}

class Ca implements face{
    data:string; //實現接口

    //初始化構造函數
    constructor(h:number,m:number){
        this.data = h + m;
    }
    private state:any;//私有屬性
}

//接口可以繼承自類，包含類的相關聲明，包括私有。因此，一般只有父類的子類才能實現該接口。
interface ia extends Ca{
    new(state:any):face{}
}

類類型要素

1. extends 繼承基類
2. implements 實現接口
3. super() 調用基類初始化
4. this 實例對象
5. public/protected/private 訪問權限。只有public成員才具有結構性兼容的便利
6. readonly 只讀屬性
7. constructor() 構造函數
8. constructor(public a:number, readonly b:string) 參數屬性。具有特殊修飾符的a，b自動成為對象成員
9. get set 存儲器。讀取屬性的函數
10. static 靜態屬性。類屬性
11. abstract 抽象類，抽象成員函數

函數

let myfun:(a:number,b:string)=>boolean; //函數類型
function fun2(a:number,b:string):boolean{} //函數
let fun3=function(){};//匿名函數
let fun4=()=>1;//箭頭函數

函數參數

function myfun(arg?:number):void{} //?代表可選

let fun2=(name="bill")=>void;//默認參數
function fun3(a:number, ...s:number[]){} //s是剩余參數

this對象和類型

• function定義的的函數，會在調用它時綁定上下文this變量。即this類型為any。
• 箭頭函數則會在定義它的上下文綁定this變量。
• this作為函數返回類型，可以用在繼承系統里面串聯調用子類對象成員函數。

function f(this:void){} //禁用this

class A{
    f1():this{return this;}
}
class B extends A{
    f2():this{return this;}
}

let a:B = new B();
a.f1().f2(); //f1返回的this自動成為子類型

重載

• ts中給出不同函數重載的聲明，這樣就啟動了函數參數的類型檢查，定義只需要給出一份。用any參數來實現，但它不是重載。
• 注意！ts不能有多個實現。

迭代器 Symbol.iterator

• for..of 語句調用對象上的迭代器Symbol.iterator函數。
• for..in 語句迭代對象的鍵，適用任何對象

聲明、解構、展開、類型斷言

//變量聲明
let 變量名:可選的類型 = [1,2]; //字面量
//常量聲明，即不能修改的變量
let 常量名:可選的類型 = [1,2]; 

//解構數組
let [a, b]:可選的類型 = [1,2]; //a=1,b=2
let [a, ...b] = [1,2,3,4]; //a=1,b=[2,3,4]
//解構對象
let {a,b} = {a:1,b:2,c:3};//a=1,b=2
let {a:newA,c}={a:1,b:2,c:3};//newA=1,c=3;屬性名a修改成newA

//展開數組
let a:number[] = [0,...[1,2],3];//a=[0,1,2,3];展開數組[1,2]

//類型斷言，繞過某些編譯器類型檢查
let a:string= 1 as string;

泛型

用標記來代替特定類型，或者替代類型的一部分。
<T>

泛型約束

指定泛型標志的適用范圍。

let f:<T extends interFace>(arg:T)=>T;

交叉類型、聯合類型

• U & T 合並U和T兩類型成員
• U | T U,T的聯合體，值為其中之一，成員為共有的相同成員

索引類型

• keyof 索引類型查詢，得到公共屬性名的聯合
• T[K] 其中，K extends keyof T，即K是聯合類型其中一個。結果是T.K

映射類型

• [key in keyof T]:P 迭代T的屬性聯合，產生對應的對象屬性,並設置類型為P。

預定義映射：

1. Exclude<T,U> 剔除U
2. Extract<T,U> 提取U
3. NonNullable<T> 剔除null和undefined。
4. ReturnType<T> 獲取函數返回類型
5. InstanceType<T> 獲取構造函數實例類型。
6. Readonly<T> 映射為只讀版本
7. Partianl<T> 可選版本
8. Pick<T,K> 摘錄版本
9. Record<string,R> 將聯合映射為對象，成員類型R

類型兼容

ts中使用了結構作為類型兼容的標准，也就是只要結構相容，就是相容，而不需要明確的類型命名聲明。

結構包含：

1. 公共成員名稱和類型
2. 函數參數排列和返回類型
3. 私有和保護成員不適用該系統。

相容的意思是指：

1. let a:A = b as B;//A兼容B
2. A的所有成員，B都有
3. 如果A是函數，B的參數，A都有（或B參數兼容A參數），且排列順序一致。因為js中A多余的實參，允許B函數調用時忽略。其二，函數返回值也是類型兼容的一部分。

//復雜例子
let a:{x:number,y(a1:{k:1,k2:2}, a2:never):{r:number}}=
{x:1, y: (m:{k:1})=>{return {r:1};}}

類型保護、推斷

• ():is 類型 類型推斷謂詞
• typeof
• instanceof
• | || 可null聯合類型相關符號
• ? undefined 可選類型相關符號
• type 別名

模塊和命名空間

模塊加載器 CommonjS(node.js) 或 Require.js(AMD)； UMD,SystemJS,ES6/ES2015。

• export 標識要導出的內容。
• import 導入。
• export default 默認導出，導入時可以不指定對應的名字
• export = commonjs語法
• import module=require（”module“） commonjs語法
• 只要在頂層使用關鍵字，文件即可成為模塊，否則全局可見
• declare ts聲明格式
• declare module ts聲明模塊
• namespace 命名空間
• import x= ns.cla x是別名
• 推薦使用模塊來組織代碼。

裝飾器

@裝飾器 是一個函數，會在被裝飾的對象運行時調用。reflect-metadata是元數據庫。

類裝飾器：

1. 參數1，類構造函數
2. 可以返回修改后的構造對象，return class extends {new(...args:any[]):{}}{}

函數裝飾器：

1. 參數1，靜態，類的構造函數；實例成員為類的原型對象。
2. 參數2，成員的名字
3. 參數3， 成員的屬性描述符
4. 可返回屬性描述符

屬性裝飾器：

1. 類構造或原型對象
2. 成員名字

參數裝飾器：

1. 類構造或原型對象
2. 成員名字
3. 參數在函數參數列表中的索引