[Typescript] class 만들 때 타입지정하기

필드값 타입지정

class 내부에는 object 가 사용할 수 있는 필드값을 만들 수 있다.

class Person {
  data = 0;
}

let john = new Person();
let kim = new Person();

console.log(john.data);
console.log(kim.data);

예를 들어 Person 이라는 class 에 0 값을 가지는 data 라는 걸 만들어놓으면

john 이나 kim 에서 이 data 라는 필드를 사용할 수 있다.

 

이 때 이 data 라는 필드에 타입을 지정해준다면 다음과 같다

class Person {
  data :number = 0;
}

하지만 굳이 쓰지 않아도 자동으로 number 타입이된다.

타입스크립트는 자동으로 타입지정을 해주기 때문!

 

constructor 타입지정

타입스크립트에서는 필드값이 정의되어 있어야

constructor 안에서 사용이 가능하다.

class Person {
  name;
  age;
  constructor (){
    this.name = 'kim';
    this.age = 20;
  }
}

위와 같은 식이다.

원래 자바스크립트에서는 아래와 같이 사용해줘도 문법에 오류가 나지 않았었다.

(아래는 자바스크립트 버전 참고!)

class Person {
  constructor (){
    this.name = 'kim';
    this.age = 20;
  }
}

 

constructor 함수에는 변수를 집어넣을 수 있다.

class Person {
  name;
  age;
  constructor (a){
    this.name = a;
    this.age = 20;
  }
}

그러면 new Person('홍길동') 이런식으로 object 마다 다른 이름을 부여할 수 있을 것이다.

이때 이 a 라는 변수에 타입지정을 해보자

class Person {
  name;
  age;
  constructor ( a :string ){
    this.name = a;
    this.age = 20;
  }
}

a 라는 변수에 string 타입 지정을 해주었다.

 

아니면 a 라는 변수의 디폴트값을 지정해줄수도 있다.

파라미터에 값을 입력을 안하면 자동으로 할당해주는 것이다.

class Person {
  name;
  age;
  constructor ( a = 'kim' ){
    this.name = a;
    this.age = 20;
  }
}

 

참고

constructor 함수에는 return 타입지정을 하면 안된다.

 

methods 타입지정

class 안에 있는 methos 의 타입지정을 해보자

class Person {
  name: string;

  constructor(x: string) {
    this.name = x;
  }

  sayFeeling(x: string): string {
    console.log('I am ' + x);
    return 'I am ' + x; // 반환 값 추가
  }
}

let person1 = new Person('dawon');
const result: string = person1.sayFeeling('happy'); // "I am happy"
console.log(result); // "I am happy"

위처럼 sayFeeling 이라는 함수는 Person 이라는 class 의 prototype 에 추가된다.

이러면 모든 Person 의 자식들(object)들은 sayFeeling 이라는 함수를 이용할 수 있다.

이 때 sayFeeling 함수의 파라미터와 return 값에 타입지정을 string 으로 해보았다.

 

---

ref: 코딩애플