TypeScript에서 클래스의 인스턴스를 만들지 않고 액세스할 수 있는 메서드를 만드는 방법은 무엇입니까?

Originally posted here!

클래스의 인스턴스를 생성하지 않고 액세스할 수 있는 클래스에서 메서드를 생성하려면 TypeScript에서 메서드를 클래스의 멤버static로 정의해야 합니다. static 멤버를 생성하려면 키워드 static 뒤에 method definition in the class 을 입력해야 합니다.

TL; DR

// a simple class with 2 fields,
// a constructor, and a static method
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // this is now a static method
  static sayGreeting() {
    console.log(`Hi, Person`);
  }
}

// access or call the `sayGreeting` method
// without creating an instance of the class
Person.sayGreeting(); // Hi, Person ✅

예를 들어 Person와 name라는 2개의 fields이 있는 age라는 클래스가 있고, constructor이라는 메서드가 있다고 가정해 보겠습니다.

// a simple class with 2 fields,
// a constructor, and a method
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayGreeting() {
    console.log(`Hi, ${this.name}`);
  }
}

이제 sayGreeting 메서드는 클래스의 인스턴스를 생성할 때만 액세스할 수 있습니다.

그러나 클래스 자체에 연결하고 Person 클래스의 인스턴스를 생성하지 않고 해당 메서드/멤버에 액세스할 수 있어야 합니다. 그렇게 하려면 메서드 정의를 작성하기 전에 static 키워드를 사용해야 합니다.
sayGreeting 메서드를 static 메서드로 만들어 봅시다.

다음과 같이 할 수 있습니다.

// a simple class with 2 fields,
// a constructor, and a static method
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // this is now a static method
  static sayGreeting() {
    console.log(`Hi, ${this.name}`);
  }
}

이제 sayGreeting 메서드를 정적 메서드로 만들었으므로 this 연산자는 작동하지 않습니다. 가리키는 클래스의 인스턴스가 없기 때문입니다. 그래서 이렇게 대신에 Hi, Person라고 말하도록 방법을 바꾸자.

다음과 같이 할 수 있습니다.

// a simple class with 2 fields,
// a constructor, and a static method
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // this is now a static method
  static sayGreeting() {
    console.log(`Hi, Person`);
  }
}

이제 다음과 같이 Person 클래스의 인스턴스를 생성하지 않고 메서드에 액세스해 보겠습니다.

// a simple class with 2 fields,
// a constructor, and a static method
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // this is now a static method
  static sayGreeting() {
    console.log(`Hi, Person`);
  }
}

// access or call the `sayGreeting` method
// without creating an instance of the class
Person.sayGreeting(); // Hi, Person ✅

보시다시피 sayGreeting 클래스에서 Person 정적 메서드를 호출할 수 있었고 Hi, Person의 출력이 콘솔에 기록되었습니다.

클래스 인스턴스를 만들지 않고 액세스할 수 있는 클래스 메서드를 성공적으로 만들었습니다. 예이 🥳!

codesandbox에 있는 위의 코드를 참조하십시오.

그게 다야 😃!

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.