[TS] class, Constructor ,Methods

이해용·2022년 6월 23일
0
post-thumbnail

Class

TypeScript는 ES2015에 도입된 class 키워드를 완벽하게 지원한다.

JavaScript 언어 기능과 마찬가지로 TypeScript는 유형 주석 및 기타 구문을 추가하여 클래스와 다른 유형 간의 관계를 표현할 수 있도록 한다.

class 의 기본 구조

class Point {}

필드 선언은 클래스에 쓰기 가능한 공용 속성을 만든다.

class Point {
  x: number;
  y: number;
}
 
const pt = new Point();
pt.x = 0;
pt.y = 0;

x, y 에 type을 지정하지 않으면 any 로 설정되므로 type을 지정해주는 것이 좋다.

필드에는 initializers(이니셜라이저)도 있을 수 있습니다. 클래스가 인스턴스화될 때 자동으로 실행된다.

class Point {
  x = 0;
  y = 0;
}
 
const pt = new Point();
// Prints 0, 0
console.log(`${pt.x}, ${pt.y}`);

const, let, var 와 마찬가지로 클래스 속성의 initializers(이니셜라이저)는 해당 유형을 유추하는 데 사용된다.

const pt = new Point();
pt.x = "0";
//Type 'string' is not assignable to type 'number'.

--strictPropertyInitialization

strictPropertyInitialization 설정은 클래스 필드를 생성자에서 초기화해야 하는지 여부를 제어한다.

class GoodGreeter {
  name: string;
 
  constructor() {
    this.name = "hello";
  }
}

Constructor

class constructor는 함수와 매우 유사하다. type annotations, default value 및 overloads 가 있는 parameters를 추가할 수 있다.

class Point {
  x: number;
  y: number;
 
  // Normal signature with defaults
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }
}

위처럼 x, y 를 선언해서 타입 지정도 가능하며 constructor 안의 변수에서도 타입 지정이 가능하다.

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

아래처럼 지정해도 가능하다.

class Point {
  x;
  y;
 
  constructor(a = 3, b = 'lee') {
    this.x = a;
    this.y = b;
  }
}

※ constructor 함수는 return 타입지정을 하면 안된다. constructor에 의해서 항상 object자료가 생산되기 때문에 의미가 없기 때문이다.

Methods

class에서 함수 속성을 method라고 한다.
Method 는 함수 및 constructors 와 동일한 type annotation을 사용할 수 있다.

class Point {
  x = 10;
  y = 10;
 
  scale(n: number): void {
    this.x *= n;
    this.y *= n;
  }
}

참고 및 출처
코딩애플 강의
https://www.typescriptlang.org/

profile
프론트엔드 개발자입니다.

0개의 댓글