首页 > 其他分享 >[Typescript 5] override keyword

[Typescript 5] override keyword

时间:2024-01-17 11:25:22浏览次数:34  
标签:Typescript console log keyword Car honk override class

Overrides

A common mistake, that has historically been difficult for TypeScript to assist with is typos when overriding a class method

class Car {
  honk() {
    console.log("beep")
  }
}

class Truck extends Car {
  hoonk() { // OOPS!
    console.log("BEEP")
  }
}

const t = new Truck();
t.honk(); // "beep"
Try

In this case, it looks like the intent was to override the base class method, but because of the typo, we defined an entirely new method with a new name. TypeScript 5 includes an override keyword that makes this easier to spot

class Car {
  honk() {
    console.log("beep")
  }
}

class Truck extends Car {
  //This member cannot have an 'override' modifier because it is not declared in the base class 'Car'. Did you mean 'honk'?(4117)
  override hoonk() { // OOPS!
    console.log("BEEP")
  }
}

const t = new Truck();
t.honk(); // "beep"

 

Sometimes, we might just forgot to add override in extended class, typescript has config option noImplicityOverride: true to help you to prevent this kind of error.

标签:Typescript,console,log,keyword,Car,honk,override,class
From: https://www.cnblogs.com/Answer1215/p/17969544/Ts5-override

相关文章

  • [Typescript] Static block for Class
    InrecentTypescript,itispossibletodefinestaticblockclassCar{staticnextSerialNumber=100static{//thisisthestaticfieldfetch('https://get-next-serial-number.com').then(res=>res.json()......
  • TypeScript 中的 Export 和 Import
    TypeScript中的Export和ImportAUG 30TH, 2016 7:33AM在TypeScript中,经常要使用export和import两个关键字,这两个关键字和es6中的语法是一致的,因为TypeScript=es6+type!注意:目前没有任何浏览器实现export和import,要在浏览器中执行,必须借助TypeSc......
  • Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建(内含完
    Vue3+TypeScript+Vite+Element-Plus+Router+Axios+Pinia项目搭建(内含完整架构)安装Vue3+ts+vitenpminitvite@latest选择y,新建项目名称,选择vue,选择vue-ts下载完成后执行以下命令行cd新建的项目名称npminpmrundev安装Element-Plusnpminstallelement-plus-......
  • typescript实现一个最简的装饰器依赖注入
    装饰器依赖注入,元数据键是关键因此必须开启ts装饰器和ts元数据tsconfig.json"experimentalDecorators":true,//开启装饰器"emitDecoratorMetadata":true,//开启元数据并且安装reflect-metadata支持元数据编程全局入口倒入一次即可import"reflect-metadata";类型元数据:......
  • [TypeScript]介绍及安装
    TypeScript是JavaScript的超集,扩展了JavaScript的语法。因此现有的JavaScript代码可与TypeScript一起工作无需任何修改,TypeScript通过类型注解提供编译时的静态类型检查。TypeScript可处理已有的JavaScript代码,并只对其中的TypeScript代码进行编译。 TypeScrip......
  • 在TypeScript中重命名类型索引?
    在TypeScript中,要重命名类型索引,你可以使用TypeScript的类型别名或接口来实现。下面是两种常见的方法:1.使用类型别名(TypeAliases):类型别名允许你为一个类型定义一个别名,通过使用关键字type来创建。你可以在别名中定义索引类型,并为该类型定义一个新的名称。```typescripttypeMy......
  • 【译】如何提高我的 TypeScript 技能
    在这篇文章中,我将向您展示我如何在TypeScript中提高自己的技能。我会向您介绍5个令人满意的操作符,这将帮助您更好地理解TypeScript和如何使用它。以下是我将要介绍的操作符:非空断言操作符可选链操作符空合并操作符明确类型断言明确类型转换1.非空断言操作符非空断言操作符是......
  • Dart on keyword
    abstractclassAnimal{//propertiesStringname;doublespeed;//constructorAnimal(this.name,this.speed);//abstractmethodvoidrun();}//mixinCanRunisonlyusedbyclassthatextendsAnimal//其实就是把mixinCanRun依附于Animal......
  • [Typescript] This type
    Sometimeswehaveafree-standingfunctionthathasastrongopinionaroundwhatthiswillendupbeing,atthetimeitisinvoked.Forexample,ifwehadaDOMeventlistenerforabutton:<buttononClick="myClickHandler">ClickMe!</b......
  • 解决 typescript node tsx 的兼容问题
    问题在项目中使用typescript+tsx+node存在各种兼容问题,包括:[esbuildError]:Top-levelawaitiscurrentlynotsupportedwiththe"cjs"outputformatCannotfindmodule'X'.Didyoumeantosetthe'moduleResolution'optionto'......