有关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.类接口

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 公有的

2、private 私有的

3、protected 受保护的

4、注意点：在继承类中,如果要覆盖或者修改父类的方法时,必须要使用public 或者 protected;只有这两者才会被子类所调用；

3.静态方法、常量

1.静态常量

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

2.静态方法

public static NUM:number=3;  //在实例化调用时只能使用该类调用    rect.NUM();

4、泛型

1、实例

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",
```
标签 , , , , , ,

发表回复