Background Reading:
Classes (MDN)

TypeScript offers full support for theclass keyword introduced in ES2015.

As with other JavaScript language features, TypeScript adds type annotations and other syntax to allow you to express relationships between classes and other types.

Class Members

Here’s the most basic class - an empty one:

ts
classPoint {}Try

This class isn’t very useful yet, so let’s start adding some members.

Fields

A field declaration creates a public writeable property on a class:

ts
classPoint {
x:number;
y:number;
}
 
constpt =newPoint();
pt.x =0;
pt.y =0;Try

As with other locations, the type annotation is optional, but will be an implicitany if not specified.

Fields can also haveinitializers; these will run automatically when the class is instantiated:

ts
classPoint {
x =0;
y =0;
}
 
constpt =newPoint();
// Prints 0, 0
console.log(`${pt.x},${pt.y}`);Try

Just like withconst,let, andvar, the initializer of a class property will be used to infer its type:

ts
constpt =newPoint();
pt.x ="0";
Type 'string' is not assignable to type 'number'.2322Type 'string' is not assignable to type 'number'.Try

--strictPropertyInitialization

ThestrictPropertyInitialization setting controls whether class fields need to be initialized in the constructor.

ts
classBadGreeter {
name:string;
Property 'name' has no initializer and is not definitely assigned in the constructor.2564Property 'name' has no initializer and is not definitely assigned in the constructor.
}Try

ts
classGoodGreeter {
name:string;
 
constructor() {
this.name ="hello";
  }
}Try

Note that the field needs to be initializedin the constructor itself.TypeScript does not analyze methods you invoke from the constructor to detect initializations, because a derived class might override those methods and fail to initialize the members.

If you intend to definitely initialize a field through means other than the constructor (for example, maybe an external library is filling in part of your class for you), you can use thedefinite assignment assertion operator,!:

ts
classOKGreeter {
// Not initialized, but no error
name!:string;
}Try

readonly

Fields may be prefixed with thereadonly modifier.This prevents assignments to the field outside of the constructor.

ts
classGreeter {
readonlyname:string ="world";
 
constructor(otherName?:string) {
if (otherName !==undefined) {
this.name =otherName;
    }
  }
 
err() {
this.name ="not ok";
Cannot assign to 'name' because it is a read-only property.2540Cannot assign to 'name' because it is a read-only property.
  }
}
constg =newGreeter();
g.name ="also not ok";
Cannot assign to 'name' because it is a read-only property.2540Cannot assign to 'name' because it is a read-only property.Try

Constructors

Background Reading:
Constructor (MDN)

Class constructors are very similar to functions.You can add parameters with type annotations, default values, and overloads:

ts
classPoint {
x:number;
y:number;
 
// Normal signature with defaults
constructor(x =0,y =0) {
this.x =x;
this.y =y;
  }
}Try

ts
classPoint {
x:number =0;
y:number =0;
 
// Constructor overloads
constructor(x:number,y:number);
constructor(xy:string);
constructor(x:string |number,y:number =0) {
// Code logic here
  }
}Try

There are just a few differences between class constructor signatures and function signatures:

• Constructors can’t have type parameters - these belong on the outer class declaration, which we’ll learn about later
• Constructors can’t have return type annotations - the class instance type is always what’s returned

Super Calls

Just as in JavaScript, if you have a base class, you’ll need to callsuper(); in your constructor body before using anythis. members:

ts
classBase {
k =4;
}
 
classDerivedextendsBase {
constructor() {
// Prints a wrong value in ES5; throws exception in ES6
console.log(this.k);
'super' must be called before accessing 'this' in the constructor of a derived class.17009'super' must be called before accessing 'this' in the constructor of a derived class.
super();
  }
}Try

Forgetting to callsuper is an easy mistake to make in JavaScript, but TypeScript will tell you when it’s necessary.

Methods

Background Reading:
Method definitions

A function property on a class is called amethod.Methods can use all the same type annotations as functions and constructors:

ts
classPoint {
x =10;
y =10;
 
scale(n:number):void {
this.x *=n;
this.y *=n;
  }
}Try

Other than the standard type annotations, TypeScript doesn’t add anything else new to methods.

Note that inside a method body, it is still mandatory to access fields and other methods viathis..An unqualified name in a method body will always refer to something in the enclosing scope:

ts
letx:number =0;
 
classC {
x:string ="hello";
 
m() {
// This is trying to modify 'x' from line 1, not the class property
x ="world";
Type 'string' is not assignable to type 'number'.2322Type 'string' is not assignable to type 'number'.
  }
}Try

Getters / Setters

Classes can also haveaccessors:

ts
classC {
_length =0;
getlength() {
returnthis._length;
  }
setlength(value) {
this._length =value;
  }
}Try

Note that a field-backed get/set pair with no extra logic is very rarely useful in JavaScript.It’s fine to expose public fields if you don’t need to add additional logic during the get/set operations.

TypeScript has some special inference rules for accessors:

• Ifget exists but noset, the property is automaticallyreadonly
• If the type of the setter parameter is not specified, it is inferred from the return type of the getter

SinceTypeScript 4.3, it is possible to have accessors with different types for getting and setting.

ts
classThing {
_size =0;
 
getsize():number {
returnthis._size;
  }
 
setsize(value:string |number |boolean) {
letnum =Number(value);
 
// Don't allow NaN, Infinity, etc
 
if (!Number.isFinite(num)) {
this._size =0;
return;
    }
 
this._size =num;
  }
}Try

Index Signatures

Classes can declare index signatures; these work the same asIndex Signatures for other object types:

ts
classMyClass {
  [s:string]:boolean | ((s:string)=>boolean);
 
check(s:string) {
returnthis[s]asboolean;
  }
}Try

Because the index signature type needs to also capture the types of methods, it’s not easy to usefully use these types.Generally it’s better to store indexed data in another place instead of on the class instance itself.

Class Heritage

Like other languages with object-oriented features, classes in JavaScript can inherit from base classes.

implements Clauses

You can use animplements clause to check that a class satisfies a particularinterface.An error will be issued if a class fails to correctly implement it:

ts
interfacePingable {
ping():void;
}
 
classSonarimplementsPingable {
ping() {
console.log("ping!");
  }
}
 
classBallimplementsPingable {
Class 'Ball' incorrectly implements interface 'Pingable'.  Property 'ping' is missing in type 'Ball' but required in type 'Pingable'.2420Class 'Ball' incorrectly implements interface 'Pingable'.  Property 'ping' is missing in type 'Ball' but required in type 'Pingable'.
pong() {
console.log("pong!");
  }
}Try

Classes may also implement multiple interfaces, e.g.class C implements A, B {.

Cautions

It’s important to understand that animplements clause is only a check that the class can be treated as the interface type.It doesn’t change the type of the class or its methodsat all.A common source of error is to assume that animplements clause will change the class type - it doesn’t!

ts
interfaceCheckable {
check(name:string):boolean;
}
 
classNameCheckerimplementsCheckable {
check(s) {
Parameter 's' implicitly has an 'any' type.7006Parameter 's' implicitly has an 'any' type.
// Notice no error here
returns.toLowerCase() ==="ok";
any
  }
}Try

In this example, we perhaps expected thats’s type would be influenced by thename: string parameter ofcheck.It is not -implements clauses don’t change how the class body is checked or its type inferred.

Similarly, implementing an interface with an optional property doesn’t create that property:

ts
interfaceA {
x:number;
y?:number;
}
classCimplementsA {
x =0;
}
constc =newC();
c.y =10;
Property 'y' does not exist on type 'C'.2339Property 'y' does not exist on type 'C'.Try

extends Clauses

Background Reading:
extends keyword (MDN)

Classes mayextend from a base class.A derived class has all the properties and methods of its base class, and can also define additional members.

ts
classAnimal {
move() {
console.log("Moving along!");
  }
}
 
classDogextendsAnimal {
woof(times:number) {
for (leti =0;i <times;i++) {
console.log("woof!");
    }
  }
}
 
constd =newDog();
// Base class method
d.move();
// Derived class method
d.woof(3);Try

Overriding Methods

Background Reading:
super keyword (MDN)

A derived class can also override a base class field or property.You can use thesuper. syntax to access base class methods.Note that because JavaScript classes are a simple lookup object, there is no notion of a “super field”.

TypeScript enforces that a derived class is always a subtype of its base class.

For example, here’s a legal way to override a method:

ts
classBase {
greet() {
console.log("Hello, world!");
  }
}
 
classDerivedextendsBase {
greet(name?:string) {
if (name ===undefined) {
super.greet();
    }else {
console.log(`Hello,${name.toUpperCase()}`);
    }
  }
}
 
constd =newDerived();
d.greet();
d.greet("reader");Try

It’s important that a derived class follow its base class contract.Remember that it’s very common (and always legal!) to refer to a derived class instance through a base class reference:

ts
// Alias the derived instance through a base class reference
constb:Base =d;
// No problem
b.greet();Try

What ifDerived didn’t followBase’s contract?

ts
classBase {
greet() {
console.log("Hello, world!");
  }
}
 
classDerivedextendsBase {
// Make this parameter required
greet(name:string) {
Property 'greet' in type 'Derived' is not assignable to the same property in base type 'Base'.  Type '(name: string) => void' is not assignable to type '() => void'.    Target signature provides too few arguments. Expected 1 or more, but got 0.2416Property 'greet' in type 'Derived' is not assignable to the same property in base type 'Base'.  Type '(name: string) => void' is not assignable to type '() => void'.    Target signature provides too few arguments. Expected 1 or more, but got 0.
console.log(`Hello,${name.toUpperCase()}`);
  }
}Try

If we compiled this code despite the error, this sample would then crash:

ts
constb:Base =newDerived();
// Crashes because "name" will be undefined
b.greet();Try

Type-only Field Declarations

Whentarget >= ES2022 oruseDefineForClassFields istrue, class fields are initialized after the parent class constructor completes, overwriting any value set by the parent class. This can be a problem when you only want to re-declare a more accurate type for an inherited field. To handle these cases, you can writedeclare to indicate to TypeScript that there should be no runtime effect for this field declaration.

ts
interfaceAnimal {
dateOfBirth:any;
}
 
interfaceDogextendsAnimal {
breed:any;
}
 
classAnimalHouse {
resident:Animal;
constructor(animal:Animal) {
this.resident =animal;
  }
}
 
classDogHouseextendsAnimalHouse {
// Does not emit JavaScript code,
// only ensures the types are correct
declareresident:Dog;
constructor(dog:Dog) {
super(dog);
  }
}Try

Initialization Order

The order that JavaScript classes initialize can be surprising in some cases.Let’s consider this code:

ts
classBase {
name ="base";
constructor() {
console.log("My name is " +this.name);
  }
}
 
classDerivedextendsBase {
name ="derived";
}
 
// Prints "base", not "derived"
constd =newDerived();Try

What happened here?

The order of class initialization, as defined by JavaScript, is:

• The base class fields are initialized
• The base class constructor runs
• The derived class fields are initialized
• The derived class constructor runs

This means that the base class constructor saw its own value forname during its own constructor, because the derived class field initializations hadn’t run yet.

Inheriting Built-in Types

Note: If you don’t plan to inherit from built-in types likeArray,Error,Map, etc. or your compilation target is explicitly set toES6/ES2015 or above, you may skip this section

In ES2015, constructors which return an object implicitly substitute the value ofthis for any callers ofsuper(...).It is necessary for generated constructor code to capture any potential return value ofsuper(...) and replace it withthis.

As a result, subclassingError,Array, and others may no longer work as expected.This is due to the fact that constructor functions forError,Array, and the like use ECMAScript 6’snew.target to adjust the prototype chain;however, there is no way to ensure a value fornew.target when invoking a constructor in ECMAScript 5.Other downlevel compilers generally have the same limitation by default.

For a subclass like the following:

ts
classMsgErrorextendsError {
constructor(m:string) {
super(m);
  }
sayHello() {
return"hello " +this.message;
  }
}Try

you may find that:

• methods may beundefined on objects returned by constructing these subclasses, so callingsayHello will result in an error.
• instanceof will be broken between instances of the subclass and their instances, so(new MsgError()) instanceof MsgError will returnfalse.

As a recommendation, you can manually adjust the prototype immediately after anysuper(...) calls.

ts
classMsgErrorextendsError {
constructor(m:string) {
super(m);
 
// Set the prototype explicitly.
Object.setPrototypeOf(this,MsgError.prototype);
  }
 
sayHello() {
return"hello " +this.message;
  }
}Try

However, any subclass ofMsgError will have to manually set the prototype as well.For runtimes that don’t supportObject.setPrototypeOf, you may instead be able to use__proto__.

Unfortunately,these workarounds will not work on Internet Explorer 10 and prior.One can manually copy methods from the prototype onto the instance itself (i.e.MsgError.prototype ontothis), but the prototype chain itself cannot be fixed.

Member Visibility

You can use TypeScript to control whether certain methods or properties are visible to code outside the class.

public

The default visibility of class members ispublic.Apublic member can be accessed anywhere:

ts
classGreeter {
publicgreet() {
console.log("hi!");
  }
}
constg =newGreeter();
g.greet();Try

Becausepublic is already the default visibility modifier, you don’t everneed to write it on a class member, but might choose to do so for style/readability reasons.

protected

protected members are only visible to subclasses of the class they’re declared in.

ts
classGreeter {
publicgreet() {
console.log("Hello, " +this.getName());
  }
protectedgetName() {
return"hi";
  }
}
 
classSpecialGreeterextendsGreeter {
publichowdy() {
// OK to access protected member here
console.log("Howdy, " +this.getName());
  }
}
constg =newSpecialGreeter();
g.greet();// OK
g.getName();
Property 'getName' is protected and only accessible within class 'Greeter' and its subclasses.2445Property 'getName' is protected and only accessible within class 'Greeter' and its subclasses.Try

Exposure ofprotected members

Derived classes need to follow their base class contracts, but may choose to expose a subtype of base class with more capabilities.This includes makingprotected memberspublic:

ts
classBase {
protectedm =10;
}
classDerivedextendsBase {
// No modifier, so default is 'public'
m =15;
}
constd =newDerived();
console.log(d.m);// OKTry

Note thatDerived was already able to freely read and writem, so this doesn’t meaningfully alter the “security” of this situation.The main thing to note here is that in the derived class, we need to be careful to repeat theprotected modifier if this exposure isn’t intentional.

Cross-hierarchyprotected access

TypeScript doesn’t allow accessingprotected members of a sibling class in a class hierarchy:

ts
classBase {
protectedx:number =1;
}
classDerived1extendsBase {
protectedx:number =5;
}
classDerived2extendsBase {
f1(other:Derived2) {
other.x =10;
  }
f2(other:Derived1) {
other.x =10;
Property 'x' is protected and only accessible within class 'Derived1' and its subclasses.2445Property 'x' is protected and only accessible within class 'Derived1' and its subclasses.
  }
}Try

This is because accessingx inDerived2 should only be legal fromDerived2’s subclasses, andDerived1 isn’t one of them.Moreover, if accessingx through aDerived1 reference is illegal (which it certainly should be!), then accessing it through a base class reference should never improve the situation.

See alsoWhy Can’t I Access A Protected Member From A Derived Class? which explains more of C#‘s reasoning on the same topic.

private

private is likeprotected, but doesn’t allow access to the member even from subclasses:

ts
classBase {
privatex =0;
}
constb =newBase();
// Can't access from outside the class
console.log(b.x);
Property 'x' is private and only accessible within class 'Base'.2341Property 'x' is private and only accessible within class 'Base'.Try

ts
classDerivedextendsBase {
showX() {
// Can't access in subclasses
console.log(this.x);
Property 'x' is private and only accessible within class 'Base'.2341Property 'x' is private and only accessible within class 'Base'.
  }
}Try

Becauseprivate members aren’t visible to derived classes, a derived class can’t increase their visibility:

ts
classBase {
privatex =0;
}
classDerivedextendsBase {
Class 'Derived' incorrectly extends base class 'Base'.  Property 'x' is private in type 'Base' but not in type 'Derived'.2415Class 'Derived' incorrectly extends base class 'Base'.  Property 'x' is private in type 'Base' but not in type 'Derived'.
x =1;
}Try

Cross-instanceprivate access

Different OOP languages disagree about whether different instances of the same class may access each others’private members.While languages like Java, C#, C++, Swift, and PHP allow this, Ruby does not.

TypeScript does allow cross-instanceprivate access:

ts
classA {
privatex =10;
 
publicsameAs(other:A) {
// No error
returnother.x ===this.x;
  }
}Try

Caveats

Like other aspects of TypeScript’s type system,private andprotectedare only enforced during type checking.

This means that JavaScript runtime constructs likein or simple property lookup can still access aprivate orprotected member:

ts
classMySafe {
privatesecretKey =12345;
}Try

js
// In a JavaScript file...
consts =newMySafe();
// Will print 12345
console.log(s.secretKey);

private also allows access using bracket notation during type checking. This makesprivate-declared fields potentially easier to access for things like unit tests, with the drawback that these fields aresoft private and don’t strictly enforce privacy.

ts
classMySafe {
privatesecretKey =12345;
}
 
consts =newMySafe();
 
// Not allowed during type checking
console.log(s.secretKey);
Property 'secretKey' is private and only accessible within class 'MySafe'.2341Property 'secretKey' is private and only accessible within class 'MySafe'.
 
// OK
console.log(s["secretKey"]);Try

Unlike TypeScripts’sprivate, JavaScript’sprivate fields (#) remain private after compilation and do not provide the previously mentioned escape hatches like bracket notation access, making themhard private.

ts
classDog {
#barkAmount =0;
personality ="happy";
 
constructor() {}
}Try

ts
"use strict";
classDog {
#barkAmount =0;
personality ="happy";
constructor() { }
}
 Try

When compiling to ES2021 or less, TypeScript will use WeakMaps in place of#.

ts
"use strict";
var_Dog_barkAmount;
classDog {
constructor() {
_Dog_barkAmount.set(this,0);
this.personality ="happy";
    }
}
_Dog_barkAmount =newWeakMap();
 Try

If you need to protect values in your class from malicious actors, you should use mechanisms that offer hard runtime privacy, such as closures, WeakMaps, or private fields. Note that these added privacy checks during runtime could affect performance.

Static Members

Background Reading:
Static Members (MDN)

Classes may havestatic members.These members aren’t associated with a particular instance of the class.They can be accessed through the class constructor object itself:

ts
classMyClass {
staticx =0;
staticprintX() {
console.log(MyClass.x);
  }
}
console.log(MyClass.x);
MyClass.printX();Try

Static members can also use the samepublic,protected, andprivate visibility modifiers:

ts
classMyClass {
privatestaticx =0;
}
console.log(MyClass.x);
Property 'x' is private and only accessible within class 'MyClass'.2341Property 'x' is private and only accessible within class 'MyClass'.Try

Static members are also inherited:

ts
classBase {
staticgetGreeting() {
return"Hello world";
  }
}
classDerivedextendsBase {
myGreeting =Derived.getGreeting();
}Try

Special Static Names

It’s generally not safe/possible to overwrite properties from theFunction prototype.Because classes are themselves functions that can be invoked withnew, certainstatic names can’t be used.Function properties likename,length, andcall aren’t valid to define asstatic members:

ts
classS {
staticname ="S!";
Static property 'name' conflicts with built-in property 'Function.name' of constructor function 'S'.2699Static property 'name' conflicts with built-in property 'Function.name' of constructor function 'S'.
}Try

Why No Static Classes?

TypeScript (and JavaScript) don’t have a construct calledstatic class the same way as, for example, C# does.

Those constructsonly exist because those languages force all data and functions to be inside a class; because that restriction doesn’t exist in TypeScript, there’s no need for them.A class with only a single instance is typically just represented as a normalobject in JavaScript/TypeScript.

For example, we don’t need a “static class” syntax in TypeScript because a regular object (or even top-level function) will do the job just as well:

ts
// Unnecessary "static" class
classMyStaticClass {
staticdoSomething() {}
}
 
// Preferred (alternative 1)
functiondoSomething() {}
 
// Preferred (alternative 2)
constMyHelperObject = {
dosomething() {},
};Try

static Blocks in Classes

Static blocks allow you to write a sequence of statements with their own scope that can access private fields within the containing class. This means that we can write initialization code with all the capabilities of writing statements, no leakage of variables, and full access to our class’s internals.

ts
classFoo {
static#count =0;
 
getcount() {
returnFoo.#count;
    }
 
static {
try {
constlastInstances =loadLastInstances();
Foo.#count +=lastInstances.length;
        }
catch {}
    }
}Try

Generic Classes

Classes, much like interfaces, can be generic.When a generic class is instantiated withnew, its type parameters are inferred the same way as in a function call:

ts
classBox<Type> {
contents:Type;
constructor(value:Type) {
this.contents =value;
  }
}
 
constb =newBox("hello!");
const b: Box<string>Try

Classes can use generic constraints and defaults the same way as interfaces.

Type Parameters in Static Members

This code isn’t legal, and it may not be obvious why:

ts
classBox<Type> {
staticdefaultValue:Type;
Static members cannot reference class type parameters.2302Static members cannot reference class type parameters.
}Try

Remember that types are always fully erased!At runtime, there’s onlyoneBox.defaultValue property slot.This means that settingBox<string>.defaultValue (if that were possible) wouldalso changeBox<number>.defaultValue - not good.Thestatic members of a generic class can never refer to the class’s type parameters.

this at Runtime in Classes

Background Reading:
this keyword (MDN)

It’s important to remember that TypeScript doesn’t change the runtime behavior of JavaScript, and that JavaScript is somewhat famous for having some peculiar runtime behaviors.

JavaScript’s handling ofthis is indeed unusual:

ts
classMyClass {
name ="MyClass";
getName() {
returnthis.name;
  }
}
constc =newMyClass();
constobj = {
name:"obj",
getName:c.getName,
};
 
// Prints "obj", not "MyClass"
console.log(obj.getName());Try

Long story short, by default, the value ofthis inside a function depends onhow the function was called.In this example, because the function was called through theobj reference, its value ofthis wasobj rather than the class instance.

This is rarely what you want to happen!TypeScript provides some ways to mitigate or prevent this kind of error.

Arrow Functions

Background Reading:
Arrow functions (MDN)

If you have a function that will often be called in a way that loses itsthis context, it can make sense to use an arrow function property instead of a method definition:

ts
classMyClass {
name ="MyClass";
getName = ()=> {
returnthis.name;
  };
}
constc =newMyClass();
constg =c.getName;
// Prints "MyClass" instead of crashing
console.log(g());Try

This has some trade-offs:

• Thethis value is guaranteed to be correct at runtime, even for code not checked with TypeScript
• This will use more memory, because each class instance will have its own copy of each function defined this way
• You can’t usesuper.getName in a derived class, because there’s no entry in the prototype chain to fetch the base class method from

this parameters

In a method or function definition, an initial parameter namedthis has special meaning in TypeScript.These parameters are erased during compilation:

ts
// TypeScript input with 'this' parameter
functionfn(this:SomeType,x:number) {
/* ... */
}Try

js
// JavaScript output
functionfn(x) {
/* ... */
}

TypeScript checks that calling a function with athis parameter is done so with a correct context.Instead of using an arrow function, we can add athis parameter to method definitions to statically enforce that the method is called correctly:

ts
classMyClass {
name ="MyClass";
getName(this:MyClass) {
returnthis.name;
  }
}
constc =newMyClass();
// OK
c.getName();
 
// Error, would crash
constg =c.getName;
console.log(g());
The 'this' context of type 'void' is not assignable to method's 'this' of type 'MyClass'.2684The 'this' context of type 'void' is not assignable to method's 'this' of type 'MyClass'.Try

This method makes the opposite trade-offs of the arrow function approach:

• JavaScript callers might still use the class method incorrectly without realizing it
• Only one function per class definition gets allocated, rather than one per class instance
• Base method definitions can still be called viasuper.

this Types

In classes, a special type calledthis refersdynamically to the type of the current class.Let’s see how this is useful:

ts
classBox {
contents:string ="";
set(value:string) {
(method) Box.set(value: string): this
this.contents =value;
returnthis;
  }
}Try

Here, TypeScript inferred the return type ofset to bethis, rather thanBox.Now let’s make a subclass ofBox:

ts
classClearableBoxextendsBox {
clear() {
this.contents ="";
  }
}
 
consta =newClearableBox();
constb =a.set("hello");
const b: ClearableBoxTry

You can also usethis in a parameter type annotation:

ts
classBox {
content:string ="";
sameAs(other:this) {
returnother.content ===this.content;
  }
}Try

This is different from writingother: Box — if you have a derived class, itssameAs method will now only accept other instances of that same derived class:

ts
classBox {
content:string ="";
sameAs(other:this) {
returnother.content ===this.content;
  }
}
 
classDerivedBoxextendsBox {
otherContent:string ="?";
}
 
constbase =newBox();
constderived =newDerivedBox();
derived.sameAs(base);
Argument of type 'Box' is not assignable to parameter of type 'DerivedBox'.  Property 'otherContent' is missing in type 'Box' but required in type 'DerivedBox'.2345Argument of type 'Box' is not assignable to parameter of type 'DerivedBox'.  Property 'otherContent' is missing in type 'Box' but required in type 'DerivedBox'.Try

this-based type guards

You can usethis is Type in the return position for methods in classes and interfaces.When mixed with a type narrowing (e.g.if statements) the type of the target object would be narrowed to the specifiedType.

ts
classFileSystemObject {
isFile():thisisFileRep {
returnthisinstanceofFileRep;
  }
isDirectory():thisisDirectory {
returnthisinstanceofDirectory;
  }
isNetworked():thisisNetworked &this {
returnthis.networked;
  }
constructor(publicpath:string,privatenetworked:boolean) {}
}
 
classFileRepextendsFileSystemObject {
constructor(path:string,publiccontent:string) {
super(path,false);
  }
}
 
classDirectoryextendsFileSystemObject {
children:FileSystemObject[];
}
 
interfaceNetworked {
host:string;
}
 
constfso:FileSystemObject =newFileRep("foo/bar.txt","foo");
 
if (fso.isFile()) {
fso.content;
const fso: FileRep
}elseif (fso.isDirectory()) {
fso.children;
const fso: Directory
}elseif (fso.isNetworked()) {
fso.host;
const fso: Networked & FileSystemObject
}Try

A common use-case for a this-based type guard is to allow for lazy validation of a particular field. For example, this case removes anundefined from the value held inside box whenhasValue has been verified to be true:

ts
classBox<T> {
value?:T;
 
hasValue():thisis {value:T } {
returnthis.value !==undefined;
  }
}
 
constbox =newBox<string>();
box.value ="Gameboy";
 
box.value;
(property) Box<string>.value?: string
 
if (box.hasValue()) {
box.value;
(property) value: string
}Try

Parameter Properties

TypeScript offers special syntax for turning a constructor parameter into a class property with the same name and value.These are calledparameter properties and are created by prefixing a constructor argument with one of the visibility modifierspublic,private,protected, orreadonly.The resulting field gets those modifier(s):

ts
classParams {
constructor(
publicreadonlyx:number,
protectedy:number,
privatez:number
  ) {
// No body necessary
  }
}
consta =newParams(1,2,3);
console.log(a.x);
(property) Params.x: number
console.log(a.z);
Property 'z' is private and only accessible within class 'Params'.2341Property 'z' is private and only accessible within class 'Params'.Try

Class Expressions

Background Reading:
Class expressions (MDN)

Class expressions are very similar to class declarations.The only real difference is that class expressions don’t need a name, though we can refer to them via whatever identifier they ended up bound to:

ts
constsomeClass =class<Type> {
content:Type;
constructor(value:Type) {
this.content =value;
  }
};
 
constm =newsomeClass("Hello, world");
const m: someClass<string>Try

Constructor Signatures

JavaScript classes are instantiated with thenew operator. Given the type of a class itself, theInstanceType utility type models this operation.

ts
classPoint {
createdAt:number;
x:number;
y:number
constructor(x:number,y:number) {
this.createdAt =Date.now()
this.x =x;
this.y =y;
  }
}
typePointInstance =InstanceType<typeofPoint>
 
functionmoveRight(point:PointInstance) {
point.x +=5;
}
 
constpoint =newPoint(3,4);
moveRight(point);
point.x;// => 8Try

abstract Classes and Members

Classes, methods, and fields in TypeScript may beabstract.

Anabstract method orabstract field is one that hasn’t had an implementation provided.These members must exist inside anabstract class, which cannot be directly instantiated.

The role of abstract classes is to serve as a base class for subclasses which do implement all the abstract members.When a class doesn’t have any abstract members, it is said to beconcrete.

Let’s look at an example:

ts
abstractclassBase {
abstractgetName():string;
 
printName() {
console.log("Hello, " +this.getName());
  }
}
 
constb =newBase();
Cannot create an instance of an abstract class.2511Cannot create an instance of an abstract class.Try

We can’t instantiateBase withnew because it’s abstract.Instead, we need to make a derived class and implement the abstract members:

ts
classDerivedextendsBase {
getName() {
return"world";
  }
}
 
constd =newDerived();
d.printName();Try

Notice that if we forget to implement the base class’s abstract members, we’ll get an error:

ts
classDerivedextendsBase {
Non-abstract class 'Derived' does not implement inherited abstract member getName from class 'Base'.2515Non-abstract class 'Derived' does not implement inherited abstract member getName from class 'Base'.
// forgot to do anything
}Try

Abstract Construct Signatures

Sometimes you want to accept some class constructor function that produces an instance of a class which derives from some abstract class.

For example, you might want to write this code:

ts
functiongreet(ctor:typeofBase) {
constinstance =newctor();
Cannot create an instance of an abstract class.2511Cannot create an instance of an abstract class.
instance.printName();
}Try

TypeScript is correctly telling you that you’re trying to instantiate an abstract class.After all, given the definition ofgreet, it’s perfectly legal to write this code, which would end up constructing an abstract class:

ts
// Bad!
greet(Base);Try

Instead, you want to write a function that accepts something with a construct signature:

ts
functiongreet(ctor:new ()=>Base) {
constinstance =newctor();
instance.printName();
}
greet(Derived);
greet(Base);
Argument of type 'typeof Base' is not assignable to parameter of type 'new () => Base'.  Cannot assign an abstract constructor type to a non-abstract constructor type.2345Argument of type 'typeof Base' is not assignable to parameter of type 'new () => Base'.  Cannot assign an abstract constructor type to a non-abstract constructor type.Try

Now TypeScript correctly tells you about which class constructor functions can be invoked -Derived can because it’s concrete, butBase cannot.

Relationships Between Classes

In most cases, classes in TypeScript are compared structurally, the same as other types.

For example, these two classes can be used in place of each other because they’re identical:

ts
classPoint1 {
x =0;
y =0;
}
 
classPoint2 {
x =0;
y =0;
}
 
// OK
constp:Point1 =newPoint2();Try

Similarly, subtype relationships between classes exist even if there’s no explicit inheritance:

ts
classPerson {
name:string;
age:number;
}
 
classEmployee {
name:string;
age:number;
salary:number;
}
 
// OK
constp:Person =newEmployee();Try

This sounds straightforward, but there are a few cases that seem stranger than others.

Empty classes have no members.In a structural type system, a type with no members is generally a supertype of anything else.So if you write an empty class (don’t!), anything can be used in place of it:

ts
classEmpty {}
 
functionfn(x:Empty) {
// can't do anything with 'x', so I won't
}
 
// All OK!
fn(window);
fn({});
fn(fn);Try