草庐IT

有关TypeScript感触集锦

瞿~锐〃 2023-03-28 原文

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

 

有关有关TypeScript感触集锦的更多相关文章

  1. ruby - 条件语句出现在表达式之前还是之后有关系吗? - 2

    如果这是一个愚蠢的问题,我很抱歉,但我是一个在ruby​​周围摸索的C#人..在ruby​​中,我注意到很多人这样做:do_something(withparams)if1=1那个和这个之间有什么区别吗(甚至是轻微的):if1=1do_something(withparams)还是为了更清楚而写的相同内容? 最佳答案 后者在句法上是无效的。你需要写:if1==1thendo_something(withparams)end单行条件句必须始终尾随。是的,有区别。试试这些:bar1=iffoo1=14foo1*3end#=>42bar2

  2. ruby - Head 用法未知选项 -1/-n 错误。可能与 ruby 有关 - 2

    我在OSX10.9.1中启动终端时反复出现问题。每次启动终端时,我都会重复以下至少30次Unknownoption:1Usage:head[-options]...-musemethodfortherequest(defaultis'HEAD')-fmakerequestevenifheadbelievesmethodisillegal-bUsethespecifiedURLasbase-tSettimeoutvalue-iSettheIf-Modified-Sinceheaderontherequest-cusethiscontent-typeforPOST,PUT,CHECKIN-

  3. 网络安全必备1000道面试题集锦(附答案) - 2

    前言以下为网络安全各个方向涉及的面试题,星数越多代表问题出现的几率越大,祝各位都能找到满意的工作。注:本套面试题,已整理成pdf文档,但内容还在持续更新中,因为无论如何都不可能覆盖所有的面试问题,更多的还是希望由点达面,查漏补缺。一、渗透测试方向:如何绕过CDN找到真实IP,请列举五种方法(★★★)redis未授权访问如何利用,利用的前提条件是?(★★★)mysql提权方式有哪些?利用条件是什么?(★)windows+mysql,存在sql注入,但是机器无外网权限,可以利用吗?(★)常用的信息收集手段有哪些,除去路径扫描,子域名爆破等常见手段,有什么猥琐的方法收集企业信息?(★★)SRC挖掘与

  4. ruby - 如何打印有关 NET :HTTPRequest for debug purposes? 的信息 - 2

    我是从Java转过来接触Ruby的新手。我正在尝试发出一个httpget请求,我得到一个400的http响应代码。我通过http调用的服务非常特殊,我很确定我的请求不完全正确。“深入了解”req会很有帮助在我执行head请求(如下)以仔细检查正在发送的request_headers是否是我认为我正在发送的内容之后。有没有办法打印出req对象?req=Net::HTTP.new(url.host,url.port)req.use_ssl=trueres=req.head(pathWithScope,request_headers)code=res.code.to_iputs"Respon

  5. javascript - 将 Sweet alert 与 Typescript 类一起使用 - 2

    我在typescript类中有一个方法,看起来像这样varconfirmation=confirm("RunAgentJob?");if(confirmation){console.log('yes');}else{console.log('no');}我正在尝试将其转换为使用SweetAlert,因此我将其放入方法中。但是Typescript无法识别它抛出一个Cannotfindnameswalswal("hello");我已经导入了sweetalert如下我做错了什么?如果我尝试在一个普通的*.js文件中使用swal(),它会工作正常。仅当它位于*.ts文件中时。

  6. javascript - 什么是 TypeScript 中的 F 界多态性 - 2

    我注意到TypeScript1.8版本支持F-BoundedPolymorphism.用外行的话来说,它是什么以及它有什么帮助?我假设由于此功能很早就包含在内,所以它一定非常重要。 最佳答案 这基本上意味着您拥有函数引用的泛型列表,并且在该泛型列表中,一种类型可以引用另一种类型,以定义两种泛型类型之间的关系。functionsomeFunction(t:T,u:U):T{returnt;}constdog=someFunction(newDog(),newCat());万岁!现在,有了有界泛型,它们可以相互引用来定义它们之间关系的界

  7. javascript - 如何在 TypeScript 中使用类类型作为映射键? - 2

    我想在反射(reflect)类类型的键下的TypeScript(JavaScript)映射中存储一些信息。这是因为存储的数据实际上是静态的并且适用于每个类型,而不是每个实例。这是我声明Mapatm的方式:privatestaticfollowSetsByATN:Map=newMap();但是,number应该是类类型。如何实现? 最佳答案 如果您有一个对象({})作为映射,则键必须是字符串(或自动转换为字符串的数字)。在这种情况下,您可以使用toString()方法:classA{}console.log(A.toString())

  8. javascript - VS Code 能否在文件重命名/移动时自动更新 JavaScript 和 TypeScript 导入路径? - 2

    是否有用于vscode的模块可以更新文件路径?例如如果我有:import'./someDir/somelib'然后我重命名或移动somelib,它会自动更新所有被引用的文件中的文件路径吗? 最佳答案 此功能是在VSCode1.24(trackingissue)中为JavaScript和TypeScript添加的当您移动或重命名文件时,系统现在会提示您查看是否要更新导入:这由javascript.updateImportsOnFileMove.enabled和typescript.updateImportsOnFileMove.ena

  9. javascript - typescript 无法导入没有扩展名的文件 - 2

    我正在尝试在我的新Angular2项目中导入文件。入口文件“main.ts”能够使用以下方式导入其他typescript文件:import{AppModule}from'./module/app.module';另一方面,“app.module.ts”无法导入没有文件扩展名的ts文件:import{AppComponent}from'../component/app.component';如果我在文件名中添加“.ts”,一切都会按预期进行...我的错误是什么?我假设我正在按照Angular指南(https://angular.io/docs/ts/latest/guide/webpac

  10. javascript - 通过将它们的方法包装在一起,Typescript 类对象的性能是否会变慢? - 2

    我可能是错的,但通过查看typescriptsplayground,我注意到他们将类的方法与对象变量包装在一起,感觉每次我调用新对象时它可能会降低性能。例如类的TypescriptPlayground输出varFatObject=(function(){functionFatObject(thing){this.objectProperty='string';this.anotherProp=thing;}FatObject.prototype.someMassivMethod=function(){//manylinesofcode//...//...//...//.........

随机推荐