有關TypeScript感觸集錦

1、介面

1.對象中使用中括弧是設置key的類型是字元串,冒號後面就是鍵值對的值;

2.介面只是用來形容給進來的數據必須符合介面類型內容，所以不能賦值；

export  default  interface IBox{
	a:number;
	b:string;
	[key:string]:number |string|boolen|null;
}

3.只讀屬性

interface ILable
{
    lable:string;
    a?:number;
    readonly b:number //只讀
}
//使用
function fn1(obj:ILable){
    
}
function fn2(o:ILable){
    o.lable="ss"
}
fn2({lable:"s",b:3})

4.類介面

• 可實現多個介面,介面實現的東西,在類中不能缺少任何一個;

• 類實現介面使用implements;

• 都具備IB類型,所以數組的類型可以 為這共有的;

• 沒有介面,就沒有多態

• 構造函數不能寫返回類型,構造函數可以使用私有類型,但是使用後,則不能在外部實例化

• set方法不能寫返回類型

• get方法不能寫參數;

export interface ID{
    run():void;
}
export interface IE{
    new (a:number):ID
}

function fn(className:IE):ID
{
    return new className(3)
}
var o=fn(Boss)

5.有關介面繼承

• 聲明一個介面,在聲明另一個介面繼承上個介面;讓一個類繼承上述一個介面,此時;

• 這個類中必須包含上述兩個介面的所有屬性和方法

interface IF    //介面
{
    num:number
}
interface IG extends IF  //介面繼承介面
{
    walk():void
}
    
class Goods implements IG{
num :number=1
walk():void{
}
}

6.介面繼承類

• 給一個類聲明且賦予方法,讓一個介面繼承這個類,這個介面中可以不包含上個類的屬性和方法;

• 再讓另一個類繼承這個介面,此時,這個類中必須含有上述介面和類中的所有方法

class Zoom{
    num:number=1;
    play():void{
        console.log("play")
    }
}

interface IH extends Zoom{
    run():void;
}

class Zooms implements IH{
    num: number=2;
    run(): void {
        
    }
    play(): void {
        
    }
}

2、三大修飾符

1、public 公有的

• 只有共有的實例對象才能調用該方法和屬性（暴露在外），在子類中可以調用獲取覆蓋
• 該類的實例化對象可以調用public定義的屬性和方法(包括靜態.只讀)
• 子類中的方法中可以通過實例this調用獲取peotected定義的屬性和方法(包括靜態和只讀)
• 子類中可以重寫和覆蓋public定義的方法(靜態)

2、private 私有的

• 只能當前類中調用執行(構造函數可以使用private,但是使用後,則不能再外部實例化,也就是不能new ===》單例模式採用)；
• 該類的實例化對象不能調用private定義的屬性和方法(包括靜態,只讀)
• 子類的方法中不可以獲取private定義的屬性和方法(靜態和只讀)
• 子類中不可以重寫和覆蓋private定義的方法;
• 只能在當前類的方法中調用使用private定義的屬性和方法;

3、protected 受保護的

• 在子類中可以調用獲取覆蓋;繼承後的類可以通過在類中方法表示當前調用的實例化對象獲取父類的共有和受保護的方法；
• 該類的實例化對象不能調用protected定義的屬性和方法(包括靜態,只讀)
• 子類的方法中可以通過實例this調用獲取protected定義的屬性和方法;
• 子類中可以重寫和覆蓋使用protected定義的方法(靜態)

4、註意點：在繼承類中,如果要覆蓋或者修改父類的方法時,必須要使用public 或者 protected;只有這兩者才會被子類所調用；

3.靜態方法、常量

1.靜態常量

 public static readonly SPEED:number=2;  //readonly在static的後面

2.靜態方法

public static NUM:number=3;  //在實例化調用時只能使用該類調用    rect.NUM();

4、泛型

1、實例

• 實例化以後的類型就是T類型

• 當使用create <T>時,傳入地是一個類名,給的是一個類比如 createB(); ,而不是實例化對象,(傳類的寫法)

• 以後傳參有兩種,一種是傳入類,一種是傳入實例化對象

function create<T>(cls:{new():T}){
    var a:T=new cls();
    console.log(a);
}
create<IB>(IB)

//   傳實例化對象寫法
function createItem<T>(item:T){

}
 //當使用這個實例化對象時,這兒只能傳入實例化對象  比如  createItem<B>(new B())
var n=new IB();
createItem<IB>(b)

2、泛型類

 在類中使用泛型，也就是通過將類設置成為IC的泛型，這樣就可以去得到他們的類

//聲明一個IA類
export default class IA{
    constructor(){

    }
    public run():void{
        console.log("AAA");
    }
}
//聲明一個IB類
export default class IB{
    constructor(){

    }
    public play():void{
        console.log("BBB");
    }
}
//在IC類中使用泛型  通過對IC設置泛型，在實例IC的時候，泛型使用IA和IB類型
export default class IC<T>{
    constructor(){

    }
    public run(item:T):void{
        console.log(item);
    }
}
//實例
var c:IC<IA>=new IC();
c.run(new IA());

var c1:IC<IB>=new IC();
c1.run(new IB());

5、附加配置

#### 1.前端配置

```javascript
 "target": "es5",    
 "lib": ["ES2016","DOM"],  
 "experimentalDecorators": true,
  "module": "amd",                           
  "rootDir": "./src",
   "declaration": true,  
     "declarationMap": true, 
      "sourceMap": true,  
     "outDir": "./dist/js"  
    "downlevelIteration": true,  
   "esModuleInterop": true,       
    "forceConsistentCasingInFileNames": true,    
   "strict": true,       
```

#### 2.服務端配置

```
"target": "es5",   
"lib": ["ES2015","DOM"],
 "experimentalDecorators": true, 
  "module": "commonjs",
```