TypeScript 的 class 类型

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

另类的蚂蚁 · TypeScript: 演练场示例 - ...· 昨天 ·

发怒的卤蛋 · Typescript:使用扩展Array<T ...· 昨天 ·

爽快的四季豆 · 在TypeScript中定义空对象类型_在t ...· 昨天 ·

快乐的麻辣香锅 · typescript ...· 昨天 ·

爱笑的高山 · TypeScript_ts ...· 昨天 ·

博学的乌龙茶 · 古代为贵族制定的温柔酷刑，用动物器官行刑，在 ...· 1 周前 ·

逆袭的豆腐 · Visual ...· 2 月前 ·

闯红灯的八宝粥 · 保持站立 | 小宇宙 - 听播客，上小宇宙· 2 月前 ·

魁梧的汤圆 · 原神学院2来了(不会没看吧)_手机游戏热门视频· 3 月前 ·

文质彬彬的豆芽 · 使用c++onnxruntime部署yolo ...· 4 月前 ·

class Point {
  x:number;
  y:number;

class Point {

class Point {
  x = 0;
  y = 0;

// 打开 strictPropertyInitialization
class Point {
  x: number; // 报错
  y: number; // 报错

class Point {
  x!: number;
  y!: number;

class A {
  readonly id = 'foo';
const a = new A();
a.id = 'bar'; // 报错

class A {
  readonly id:string;
  constructor() {
    this.id = 'bar'; // 正确

class A {
  readonly id:string = 'foo';
  constructor() {
    this.id = 'bar'; // 正确

class Point {
  x:number;
  y:number;
  constructor(x:number, y:number) {
    this.x = x;
    this.y = y;
  add(point:Point) {
    return new Point(
      this.x + point.x,
      this.y + point.y

class Point {
  x: number;
  y: number;
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;

class Point {
  constructor(x:number, y:string);
  constructor(s:string);
  constructor(xs:number|string, y?:string) {
    // ...

class B {
  constructor():object { // 报错
    // ...

class C {
  _name = '';
  get name() {
    return this._name;
  set name(value) {
    this._name = value;

class C {
  _name = 'foo';
  get name() {
    return this._name;
const c = new C();
c.name = 'bar'; // 报错

// TypeScript 5.1 版之前
class C {
  _name = '';
  get name():string {  // 报错
    return this._name;
  set name(value:number) {
    this._name = String(value);

class C {
  _name = '';
  get name():string {
    return this._name;
  set name(value:number|string) {
    this._name = String(value);

class MyClass {
  [s:string]: boolean |
    ((s:string) => boolean);
  get(s:string) {
    return this[s] as boolean;

class MyClass {
  [s:string]: boolean;
  f() { // 报错
    return true;

class MyClass {
  [s:string]: boolean | (() => boolean);
  f() {
    return true;

class MyClass {
  [s:string]: boolean;
  get isInstance() {
    return true;

interface Country {
  name:string;
  capital:string;
// 或者
type Country = {
  name:string;
  capital:string;
class MyCountry implements Country {
  name = '';
  capital = '';

interface A {
  get(name:string): boolean;
class B implements A {
  get(s) { // s 的类型是 any
    return true;

class B implements A {
  get(s:string) {
    return true;

interface A {
  x: number;
  y?: number;
class B implements A {
  x = 0;
const b = new B();
b.y = 10; // 报错

class B implements A {
  x = 0;
  y?: number;

interface Point {
  x: number;
  y: number;
class MyPoint implements Point {
  x = 1;
  y = 1;
  z:number = 1;

class Car {
  id:number = 1;
  move():void {};
class MyCar implements Car {
  id = 2; // 不可省略
  move():void {};   // 不可省略

interface Foo {
  private member:{}; // 报错

class Car implements MotorVehicle, Flyable, Swimmable {
  // ...

class Car implements MotorVehicle {
class SecretCar extends Car implements Flyable, Swimmable {

interface A {
  a:number;
interface B extends A {
  b:number;

interface MotorVehicle {
  // ...
interface Flyable {
  // ...
interface Swimmable {
  // ...
interface SuperCar extends MotoVehicle,Flyable, Swimmable {
  // ...
class SecretCar implements SuperCar {
  // ...

interface Flyable {
  foo:number;
interface Swimmable {
  foo:string;

class A {
  x:number = 1;
interface A {
  y:number;
let a = new A();
a.y = 10;
a.x // 1
a.y // 10

class A {
  x:number = 1;
interface A {
  y:number;
let a = new A();
a.y // undefined

class Color {
  name:string;
  constructor(name:string) {
    this.name = name;
const green:Color = new Color('green');

interface MotorVehicle {
class Car implements MotorVehicle {
// 写法一
const c1:Car = new Car();
// 写法二
const c2:MotorVehicle = new Car();

class Point {
  x:number;
  y:number;
  constructor(x:number, y:number) {
    this.x = x;
    this.y = y;
// 错误
function createPoint(
  PointClass:Point,
  x: number,
  y: number
  return new PointClass(x, y);

function createPoint(
  PointClass:typeof Point,
  x:number,
  y:number
):Point {
  return new PointClass(x, y);

function createPoint(
  PointClass: new (x:number, y:number) => Point,
  x: number,
  y: number
):Point {
  return new PointClass(x, y);

function createPoint(
  PointClass: {
    new (x:number, y:number): Point
  x: number,
  y: number
):Point {
  return new PointClass(x, y);

interface PointConstructor {
  new(x:number, y:number):Point;
function createPoint(
  PointClass: PointConstructor,
  x: number,
  y: number
):Point {
  return new PointClass(x, y);

class Foo {
  id!:number;
function fn(arg:Foo) {
  // ...
const bar = {
  id: 10,
  amount: 100,
fn(bar); // 正确

class Person {
  name: string;
class Customer {
  name: string;
// 正确
const cust:Customer = new Person();

class Person {
  name: string;
  age: number;
class Customer {
  name: string;
// 正确
const cust:Customer = new Person();

class Person {
  name: string;
class Customer {
  name: string;
  age: number;
// 报错
const cust:Customer = new Person();

class Person {
  name: string;
const obj = { name: 'John' };
const p:Person = obj; // 正确

obj instanceof Person // false

class Empty {}
function fn(x:Empty) {
  // ...
fn({});
fn(window);
fn(fn);

class Point {
  x: number;
  y: number;
  static t: number;
  constructor(x:number) {}
class Position {
  x: number;
  y: number;
  z: number;
  constructor(x:string) {}
const point:Point = new Position('');

// 情况一
class A {
  private name = 'a';
class B extends A {
const a:A = new B();
// 情况二
class A {
  protected name = 'a';
class B extends A {
  protected name = 'b';
const a:A = new B();

class A {
  greet() {
    console.log('Hello, world!');
class B extends A {
const b = new B();
b.greet() // "Hello, world!"

const a:A = b;
a.greet()

class B extends A {
  greet(name?: string) {
    if (name === undefined) {
      super.greet();
    } else {
      console.log(`Hello, ${name}`);

class A {
  greet() {
    console.log('Hello, world!');
class B extends A {
  // 报错
  greet(name:string) {
    console.log(`Hello, ${name}`);

class A {
  protected x: string = '';
  protected y: string = '';
  protected z: string = '';
class B extends A {
  // 正确
  public x:string = '';
  // 正确
  protected y:string = '';
  // 报错
  private z: string = '';

// 例一
class MyArray extends Array<number> {}
// 例二
class MyError extends Error {}
// 例三
class A {
  greeting() {
    return 'Hello from A';
class B {
  greeting() {
    return 'Hello from B';
interface Greeter {
  greeting(): string;
interface GreeterConstructor {
  new (): Greeter;
function getGreeterBase():GreeterConstructor {
  return Math.random() >= 0.5 ? A : B;
class Test extends getGreeterBase() {
  sayHello() {
    console.log(this.greeting());

interface Animal {
  animalStuff: any;
interface Dog extends Animal {
  dogStuff: any;
class AnimalHouse {
  resident: Animal;
  constructor(animal:Animal) {
    this.resident = animal;
class DogHouse extends AnimalHouse {
  resident: Dog;
  constructor(dog:Dog) {
    super(dog);

const dog = {
  animalStuff: 'animal',
  dogStuff: 'dog'
const dogHouse = new DogHouse(dog);
console.log(dogHouse.resident) // undefined

class DogHouse extends AnimalHouse {
  declare resident: Dog;
  constructor(dog:Dog) {
    super(dog);

class Greeter {
  public greet() {
    console.log("hi!");
const g = new Greeter();
g.greet();

class A {
  private x:number = 0;
const a = new A();
a.x // 报错
class B extends A {
  showX() {
    console.log(this.x); // 报错

class A {
  private x = 0;
class B extends A {
  x = 1; // 报错

class A {
  private x = 10;
  f(obj:A) {
    console.log(obj.x);
const a = new A();
a.f(a) // 10

class A {
  private x = 1;
const a = new A();
a['x'] // 1
if ('x' in a) { // 正确
  // ...

class A {
  #x = 1;
const a = new A();
a['x'] // 报错

class Singleton {
  private static instance?: Singleton;
  private constructor() {}
  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    return Singleton.instance;
const s = Singleton.getInstance();

class A {
  protected x = 1;
class B extends A {
  getX() {
    return this.x;
const a = new A();
const b = new B();
a.x // 报错
b.getX() // 1

class A {
  protected x = 1;
class B extends A {
  x = 2;

class A {
  protected x = 1;
  f(obj:A) {
    console.log(obj.x);
const a = new A();
a.x // 报错
a.f(a) // 1

class Point {
  x:number;
  y:number;
  constructor(x:number, y:number) {
    this.x = x;
    this.y = y;

class Point {
  constructor(
    public x:number,
    public y:number
const p = new Point(10, 10);
p.x // 10
p.y // 10

class A {
  constructor(
    public a: number,
    protected b: number,
    private c: number,
    readonly d: number
// 编译结果
class A {
    constructor(a, b, c, d) {
      this.a = a;
      this.b = b;
      this.c = c;
      this.d = d;

class A {
  constructor(
    public readonly x:number,
    protected readonly y:number,
    private readonly z:number

class MyClass {
  static x = 0;
  static printX() {
    console.log(MyClass.x);
MyClass.x // 0
MyClass.printX() // 0

class MyClass {
  private static x = 0;
MyClass.x // 报错

class MyClass {
  static #x = 0;

class A {
  public static x = 1;
  protected static y = 1;
class B extends A {
  static getY() {
    return B.y;
B.x // 1
B.getY() // 1

class Box<Type> {
  contents: Type;
  constructor(value:Type) {
    this.contents = value;
const b:Box<string> = new Box('hello!');

class Box<Type> {
  static defaultContents: Type; // 报错

abstract class A {
  id = 1;
const a = new A(); // 报错

abstract class A {
  id = 1;
class B extends A {
  amount = 100;
const b = new B();
b.id // 1
b.amount // 100

abstract class A {
  foo:number;
abstract class B extends A {
  bar:string;

abstract class A {
  abstract foo:string;
  bar:string = '';
class B extends A {
  foo = 'b';

abstract class A {
  abstract execute():string;
class B extends A {
  execute() {
    return `B executed`;

class A {
  name = 'A';
  getName() {
    return this.name;
const a = new A();
a.getName() // 'A'
const b = {
  name: 'b',
  getName: a.getName
b.getName() // 'b'

// 编译前
function fn(
  this: SomeType,
  x: number
  /* ... */
// 编译后
function fn(x) {
  /* ... */

class A {
  name = 'A';
  getName(this: A) {
    return this.name;
const a = new A();
const b = a.getName;
b() // 报错

function foo(
  this: { name: string }
  this.name = 'Jack';
  this.name = 0; // 报错
foo.call({ name: 123 }); // 报错

// noImplicitThis 打开
class Rectangle {
  constructor(
    public width:number,
    public height:number
  getAreaFunction() {
    return function () {
      return this.width * this.height; // 报错

class Box {
  contents:string = '';
  set(value:string):this {
    this.contents = value;
    return this;

class A {
  static a:this; // 报错

class FileSystemObject {
  isFile(): this is FileRep {
    return this instanceof FileRep;
  isDirectory(): this is Directory {

简介 #

属性的类型 #

readonly 修饰符 #

方法的类型 #

存取器方法 #

属性索引 #

类的 interface 接口 #

implements 关键字 #

实现多个接口 #

类与接口的合并 #

Class 类型 #

实例类型 #

类的自身类型 #

结构类型原则 #

类的继承 #

可访问性修饰符 #

public #

private #

protected #

实例属性的简写形式 #

静态成员 #

泛型类 #

抽象类，抽象成员 #

this 问题 #