타입스크립트 (Class)

hojoon·2023년 5월 2일
0

타입스크립트

목록 보기
7/9

Class

  • object를 만드는 청사진
  • 클래스 이전에 object를 만드는 기본적인 방법은 function
  • Javascript에도 class는 es6부터 사용 가능
  • OOP를 위한 초석
  • Typescript에서는 클래스도 사용자가 만드는 타입의 하나

Class를 만드는법

우선 Person이라는 클래스를 만들어주고
class PersonClass {}

const classPerson = new PersonClass();
라고 변수에 담아준다.

console.log(classPerson) // PersonClass{}

조금 더 상세하게 들어가보자.

class PersonClass {
  name;
  constructor(name: string) {
    this.name = name;
  }
}
const classPerson = new PersonClass("mark");
console.log(classPerson);

이 코드는 PersonClass라는 이름의 class이고 object를 만들었을 때 name이라는 property를 가지고 있으며 constructor라는 생성자에 name의 type이 string으로 설정되어 있는 코드 라고 설명할 수 있다.

Constructor

class PersonConstructor {
  name: string = "Mark";
  age: number;
}

실제 이 코드는 age에 빨간줄이 뜬다.
왜냐하면 클래스 기준으로 age에는 값이 할당되지 않았고 코드 입장에서는 초기화 된적이 없다고 판단하고 있기때문이다.

const personCon1: PersonConstructor = new PersonConstructor();
console.log(personCon1); // name:"Mark"
console.log(personCon1.age); //undefined

age에 값이 할당되지 않았다. 그래서 컴파일러 단계에서는 찾을 수가 없다고 말하는 중이다. 하지만 만약에 컴파일단계가 아니라 런타임 단계에서 값이 할당된다면??

그래서 의도적으로 !를 붙여줄 수 있다.

class PersonConstructor {
  name: string = "Mark";
  age!: number;
}
  • 이러면 에러를 일으키지 않는다. 개발자가 값이 number로 할당되지 않아도 에러를 일으키지 않겠다고 명시적으로 표현을 하는 것인데, 다만 느낌표를 사용할때는 주의를 해야한다.
  • 무슨말이냐면 변수의 값이 무조건 존재한다는 확신이 있을 경우 사용해야 한다는 것이다. 그렇지 않으면 버그가 발생했을 때 에러를 찾기 어려워지고 그것은 타입스크립트 사용 의미에서 완전히 벗어나는 일이 될것이다.
profile
프론트? 백? 초보 개발자의 기록 공간

0개의 댓글