文章目錄

• • TS基礎2（泛型、枚舉、元組）-學習筆記
  • • 泛型
    • 枚舉
    • 元組
    • 例子參考

TS基礎2（泛型、枚舉、元組）-學習筆記

泛型

//泛型（Generics）是指在定義函數、接口或類的時候，不預先指定具體的類型，而在使用的時候再指定類型的一種特性。//<T> 泛型變量T T表示什么？任何類型function hello<T>(name:T):T{ //hello函數是泛型return name};//hello<string>('abc');hello<string|number>(123); //定義多個類型hello(123); //類型推斷 編譯器會根據傳入的參數來自動的判斷T的類型//缺點 只能傳string// function hello2(name:string):string{// return name// };// hello2(123);//缺點 不確定返回值的類型function hello3(name:any):any{return name};hello3(123);//泛型在函數中具體的寫法//函數聲明function f<T>(x:T):T{return x};//函數表達式let f2 = function<U>(x:U):U{return x}//ES6let f3 = <U>(x:U):U=>{return x}//限制 參數的屬性或方法一定是屬于任何類型function hello4<T>(name:T):number{ //hello函數是泛型//name 表示是任何類型return name.length //error T表示為任何類型 也就是name.length是所有類型都支持的屬性};function hello5<T>(name:T[]):number{ //number[] string[]//name 數組return name.length //};//hello5<number>([1,2,3])hello5<string >(['1','2','3'])//泛型的約束 extends//<T extends Abc> 泛型T必須符合接口ABC的形狀interface LengthN{length:number}function hello6<T extends LengthN>(name:T):number{ //hello函數是泛型//name 必須有length屬性的類型 return name.length };hello6<string>('222');//數組泛型 類型+[]let arr:Array<number> =[1,2,3];var arr2:number[] = [1,2,3];//需求 創建一個數組 傳入3表示數組的長度為3 具體'x' ['x','x','x']//createArray(長度,值) //createArray(5,'a') ['a','a','a','a','a']//createArray(2,3) [3,3]function createArray(length:number,value:any):Array<any>{var arr = [];for(let i=0;i<length;i++){arr[i] = value};return arr;};createArray(5,'a') ;function createArray2<T>(length:number,value:T):Array<T>{var arr = [];for(let i=0;i<length;i++){arr[i] = value};return arr;};createArray2<number>(5,3) ;//多個類型參數function f6<N,S>(a:[N,S]):[S,N]{return [a[1],a[0]]};f6<number,string>([1,'a'])//泛型在類中的運用class A2<T>{n:T;constructor(num:T){this.n = num}action(x:T):T{return x}};var a2 = new A2<number>(1);

枚舉

//枚舉 enum類型是對JavaScript標準數據類型的一個補充var arr7 = ['a','b','c'];arr7['a'] //不能通過鍵來獲取，只能索引var obj = {a:1,b:2};obj[1] //不能通過索引取值enum Color {red,green,blue,'a','b','c'};var c:Color= Color.red //0 通過鍵取值var c2:string = Color[1] //green 通過索引取值//改變索引值enum Color2 {red=10,green,blue};var c3:Color2= Color2.green //11//手動設置enum Color3 {red=30.7,green=20,blue=10};var c4:Color3= Color3.green //20 //任意值var c11 = 'hello';enum Color4 {red=30.7,green=<any>c11,blue=c11.length};var c5:Color4= Color4.green //hello

元組

//元組 數組合并了相同類型的對象，而元組（Tuple）合并了不同類型的對象。//數組var lists:number[] = [1,2,3,4,5];var lists2:Array<string> = ['1','2'];var lists3:Array<any> = ['1','2',true,1,2];var t:[number,string] = [10,'a']; //元組允許一個數組中可以有多個不同的類型 一一匹配

例子參考

//檔位 enum Gear {First=1, Second=3, Third=5 } enum Color {White, Red } //接口 interface Drivable {//啟動start(): void;//駕駛drive(time: number, speed: Gear): void;//行駛距離getKilometer(): number } //定義一個抽象的類 //abstract 抽象的類 沒有實現 不可被實例化 //定義動物類 // abstract class Animal { // abstract eat():void; //抽象類的子類必須實現抽象類的抽象方法 // } // //var a = new Animal(); //error 用到了abstract修飾符，不能被實例化 // class Dog extends Animal{ // constructor(){ // super(); // } // //抽象類的子類必須實現抽象類的抽象方法 // eat(){// } // }abstract class Car implements Drivable { //定義一個抽象類 來實現Drivable接口protected _isRunning: boolean; //只能被子類訪問的屬性protected _distanceFromStart: number; //只能被子類訪問的屬性constructor() {this._isRunning = false;this._distanceFromStart = 0;}public start() { //公共啟動汽車this._isRunning = true;}//抽象類的子類必須實現抽象類的抽象方法abstract drive(time: number, speed: Gear): void; public getKilometer(): number { //公共行駛距離return this._distanceFromStart;} } //派生類 子類 class BMW<T extends Color> extends Car {private color: Color; //私有屬性constructor(T) {super();this.color = T;}public drive(time: number, speed: Gear): void {if (this._isRunning) {this._distanceFromStart += time*speed;//行駛距離}}public getColor(): string {return Color[this.color]} }let bmw = new BMW(Color.Red); bmw.start(); bmw.drive(10, Gear.First); bmw.drive(60, Gear.Third); document.body.innerHTML = "distance:"+bmw.getKilometer()+',color:'+bmw.getColor()

總結

以上是生活随笔為你收集整理的TS基础2（泛型、枚举、元组）-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。