有关TypeScript感触集锦

发布时间：2022-08-18 文章分类：编程知识投稿人：李佳字号：默认 | 大 | 超大打印

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

标签 ip, js, PE, str, Type, xp, 继承