[Typescript] Class - Param properties
For the following class:
class Car {
make: string
model: string
year: number
constructor(make: string, model: string, year: number) {
this.make = make
this.model = model
this.year = year
}
}
We can write like this:
class Car {
constructor(
public make: string,
public model: string,
public year: number
) {}
}
const myCar = new Car("Honda", "Accord", 2017)
The first argument passed to the constructor should be a
string
, and should be available within the scope of the constructor asmake
. This also creates apublic
class field onCar
calledmake
and pass it the value that was given to the constructor
It is important to understand the order in which “constructor-stuff” runs.
class Base {}
class Car extends Base {
foo = console.log("class field initializer")
constructor(public make: string) {
super()
console.log("custom constructor stuff")
}
}
const c = new Car("honda")
The order of execution:
"use strict";
class Base {
}
class Car extends Base {
constructor(make) {
super();
this.make = make;
this.foo = console.log("class field initializer");
console.log("custom constructor stuff");
}
}
const c = new Car("honda");
Note the following order of what ends up in the class constructor:
super()
- param property initialization
- other class field initialization
- anything else that was in your constructor after
super()
Before V4.6, the follow code is not possible:
class Base {}
class Car extends Base {
foo = console.log("class field initializer")
constructor(public make: string) {
console.log("before super")
super()
console.log("custom constructor stuff")
}
}
const c = new Car("honda")
A 'super' call must be the first statement in the constructor when a class contains initialized properties, parameter properties, or private identifiers.
To fix it:
class Base {}
class Car extends Base {
private make: string;
constructor(make: string) {
console.log("before super")
super()
this.make = make;
console.log("custom constructor stuff")
}
}
const c = new Car("honda")
But after Typescript v4.6, it is possible to have some other code before super() call.
相关文章
- [Typescript] Generics in a Class Names Creator
- [Typescript] Represent Generics at the Lowest Level
- [Typescript] Tips: Assign local variables to default generic slots to dry up your code and improve performance
- [Typescript] 26. Medium - Trim
- [Typescript] Type Queries (keyof & typeof)
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [Vuex] Lazy Load a Vuex Module at Runtime using TypeScript
- [Vue + TS] Write a Vue Component as a Class in TypeScript
- [TypeScript] Create a fluent API using TypeScript classes
- [TypeScript] Sharing Class Behavior with Inheritance in TypeScript
- [TypeScript] Interface and Class
- [Typescript] Write clean Type 2 - Reduce the usage in generic slot
- [Typescript] Write clean Type 1 - Generic slots, using built-in types as much as possible
- [Typescript] Create an Object Whose Keys Are Derived From a Union
- [Typescript] Constraining Types for Anything but null or undefined (T extends {})
- [Typescript] 78. Medium - Unqiue
- [Typescript] Get class properties type in union
- [Typescript] 25. Medium - Trim Left
- [Typescript] Index access types
- [Typescript] Generics constraint
- [TypeScript] Make typescript stick - 2
- [TypeScript] Class Property Inference from Constructors V4
- [Typescript] "Readonly" Mapped Type
- [TypeScript] Generic Functions, class, Type Inference and Generics
- [TypeScript] Creating a Class in TypeScript
- [Angular 2] 1. QuickStart with Angular2 + TypeScript
- TypeScript 里的 module 解析过程 - Module Resolution
- TypeScript class 的静态成员变量
- TypeScript class 构造函数和成员的初始化顺序
- 掌握TypeScript:10个最佳实践提高代码质量
- 实现一个自动生成typescript类型声明的工具