TypeScript에서 클래스 메서드를 만드는 방법은 무엇입니까?

Originally posted here!

TypeScript에서 class 메서드를 생성하려면 정의해야 하는 메서드의 이름 뒤에 () 매개변수 기호(여는 괄호와 닫는 괄호)와 매개변수 및 해당 유형(있는 경우), :를 작성하여 수행할 수 있습니다. 기호(콜론) 다음에 메서드에서 반환해야 하는 값의 type입니다(간단히 말해서 메서드는 클래스 내부의 함수입니다).

TL;DR

// a simple class with some fields and
// a constructor to intialise the field values
class Person {
  name: string;
  age: number;

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

  // a method that returns a greeting
  sayGreeting(): string {
    return `Hey ${this.name}`;
  }
}

// create an instance of the class
const john = new Person("John Doe", 23);

// call the `sayGreeting` method
// from the `john` object
const greeting = john.sayGreeting();

// log the contents
console.log(greeting); // Hey John Doe ✅

예를 들어, 각각 Person 유형을 갖는 name와 string 유형을 갖는 age라는 2개의 필드가 있는 number라는 클래스가 있고 값을 초기화하는 constructor이 있다고 가정해 보겠습니다. 이와 같은 분야의

// a simple class with some fields and
// a constructor to initialize the field values
class Person {
  name: string;
  age: number;

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

이제 sayGreeting 필드의 값으로 인사말을 반환하는 name라는 메서드를 만들어 보겠습니다.

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

// a simple class with some fields and
// a constructor to initialize the field values
class Person {
  name: string;
  age: number;

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

  // a method that returns a greeting
  sayGreeting(): string {
    return `Hey ${this.name}`;
  }
}

따라서 Person 클래스를 자세히 살펴보면 sayGreeting라는 메서드를 정의한 것을 볼 수 있습니다. 매개변수를 추가하지 않은 괄호 뒤에 : 기호(콜론)와 메서드의 반환 값으로 string를 입력합니다. 이것이 TypeScript에서 간단한 클래스 메서드를 만드는 데 필요한 전부입니다.

이제 Person 키워드를 사용하여 new 클래스의 인스턴스를 생성한 다음 매개변수 괄호를 통해 "John Doe"값을 name 매개변수에 전달하고 23 매개변수를 age 매개변수에 전달해 보겠습니다.

// a simple class with some fields and
// a constructor to initialize the field values
class Person {
  name: string;
  age: number;

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

  // a method that returns a greeting
  sayGreeting(): string {
    return `Hey ${this.name}`;
  }
}

// create an instance of the class
const john = new Person("John Doe", 23);

마지막으로 sayGreeting() 객체에서 john 메서드를 호출한 다음 다음과 같이 내용을 기록해 보겠습니다.

// a simple class with some fields and
// a constructor to initialize the field values
class Person {
  name: string;
  age: number;

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

  // a method that returns a greeting
  sayGreeting(): string {
    return `Hey ${this.name}`;
  }
}

// create an instance of the class
const john = new Person("John Doe", 23);

// call the `sayGreeting` method
// from the `john` object
const greeting = john.sayGreeting();

// log the contents
console.log(greeting); // Hey John Doe ✅

보시다시피 Hey John Doe 메서드를 호출한 후 sayGreeting()의 출력을 얻었습니다.

TypeScript에서 클래스 메서드를 성공적으로 만들었습니다. 예이 🥳.

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

그게 다야 😃!

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