[TOC] vue.js 學習筆記3——TypeScript 工具 typescript 通過tsconfig.json 文件配置。 可通過gulp 等工具管理項目自動化編譯和運行。 基礎類型 boolean 布爾、number 數字、string 字元串、enum 枚舉、any 任意、void 空 ...
目錄
vue.js 學習筆記3——TypeScript
工具
npm install -g typescript #安裝typescript 工具tsc編譯器
tsc a.ts #輸出 a.js
node a.js #運行jstypescript 通過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 常量枚舉會被用值直接替換
- 枚舉是一個對象，數值類型會有屬性雙向映射
- 用字面量或者無初始化的枚舉的成員是一個類型，值就是該枚舉成員。該枚舉是一個聯合
- 枚舉成員初始化是簡單常量算式，為常量成員，否則為計算成員
- 枚舉成員可以是數字或字元型
- 外部枚舉成員預設是計算成員
字面量
"s"|"n"|"m"用豎線分隔的字面量限定字元串變數的可選值。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{}
}類類型要素
extends繼承基類implements實現介面super()調用基類初始化this實例對象public/protected/private訪問許可權。只有public成員才具有結構性相容的便利readonly只讀屬性constructor()構造函數constructor(public a:number, readonly b:string)參數屬性。具有特殊修飾符的a，b自動成為對象成員get set存儲器。讀取屬性的函數static靜態屬性。類屬性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 | TU,T的聯合體，值為其中之一，成員為共有的相同成員
索引類型
keyof索引類型查詢，得到公共屬性名的聯合T[K]其中，K extends keyof T，即K是聯合類型其中一個。結果是T.K
映射類型
[key in keyof T]:P迭代T的屬性聯合，產生對應的對象屬性,並設置類型為P。
預定義映射：
Exclude<T,U>剔除UExtract<T,U>提取UNonNullable<T>剔除null和undefined。ReturnType<T>獲取函數返回類型InstanceType<T>獲取構造函數實例類型。Readonly<T>映射為只讀版本Partianl<T>可選版本Pick<T,K>摘錄版本Record<string,R>將聯合映射為對象，成員類型R
類型相容
ts中使用了結構作為類型相容的標準，也就是只要結構相容，就是相容，而不需要明確的類型命名聲明。
結構包含：
- 公共成員名稱和類型
- 函數參數排列和返回類型
- 私有和保護成員不適用該系統。
相容的意思是指：
let a:A = b as B;//A相容B- A的所有成員，B都有
- 如果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 類型類型推斷謂詞typeofinstanceof| ||可null聯合類型相關符號? undefined可選類型相關符號type別名
模塊和命名空間
模塊載入器 CommonjS(node.js) 或 Require.js(AMD)； UMD,SystemJS,ES6/ES2015。
export標識要導出的內容。import導入。export default預設導出，導入時可以不指定對應的名字export =commonjs語法import module=require（”module“）commonjs語法- 只要在頂層使用關鍵字，文件即可成為模塊，否則全局可見
declarets聲明格式declare modulets聲明模塊namespace命名空間import x= ns.clax是別名- 推薦使用模塊來組織代碼。
裝飾器
@裝飾器 是一個函數，會在被裝飾的對象運行時調用。reflect-metadata是元資料庫。
類裝飾器：
- 參數1，類構造函數
- 可以返回修改後的構造對象，
return class extends {new(...args:any[]):{}}{}
函數裝飾器：
- 參數1，靜態，類的構造函數；實例成員為類的原型對象。
- 參數2，成員的名字
- 參數3， 成員的屬性描述符
- 可返回屬性描述符
屬性裝飾器：
- 類構造或原型對象
- 成員名字
參數裝飾器：
- 類構造或原型對象
- 成員名字
- 參數在函數參數列表中的索引
