dev-note

Abstraction 객체지향프로그래밍에는 추상 클래스와 구체 클래스가 존재합니다. 구체 클래스는 new 키워드를 통해 생성할 수 있고 추상 클래스는 구체 클래스가 가져야 할 속성을 지정하는 도면이기 때문에 abstract 키워드를 사용해 선언합니다. 다만 이 abstract class는 인스턴스를 자체적으로 생성할 수 없는데요. 만약 추상 클래스에 객체 인스턴스를 생성하는 경우 cannot create an instance of an abstract class 라는 오류를 던질 겁니다. TypeScript의 추상 클래스 타입스크립트에서 추상클래스의 목적은 구체 클래스 (하위 클래스)의 공통 동작을 묶는 것입니다. abstarct class Student { // ... } 학생마다 나이가 있기 때문에 ..

리터럴 타입과 유니온 타입을 아는가? 이 둘을 명확히 알아야 keyof typeof에 대해 설명할 수 있다. 1. Literal Types 타입 스크립트에서 리터럴 타입은 string, number, boolean 등 타입의 더욱 구체적인 타입이다. 예를 들어, "Hello World!" 는 string 타입이지만 string 타입은 "Hello World!" 가 아니다. 즉, "Hello World!"는 더욱 구체적인 스트링 타입, 리터럴 타입이다. type Greeting = "Hello" Greeting은 String value로 "Hello"만을 가질 수 있는 객체이다. let greeting: Greeting greeting = "Hello" // OK greeting = "Hi" // Erro..

super과 this에는 어떠한 차이점이 있을까요? 1. this a) 현재 class를 가리키는 reference 변수이다. b) 현재 class와 부모 class의 method에 접근할 수 있다. (*private method 제외) 2. super a) 부모 class를 가리키는 reference 변수이다. b) public 혹은 protected로 상속받은 method만 접근 가능하다. 그렇기에 getter/setter을 통해 속성을 제어해야 한다. 또한 super은 자식 class와 부모 class를 구별하기 위해 사용되며 오버라이딩을 하기 유용하다는 장점이 있다. /** * Parent class */ class BookClub { constructor(public monthlyBook: st..

infer 키워드는 조건부 타입의 조건식이 참으로 평가될 때 사용하는 키워드이다. 예를 들어, Element extends Element 와 같은 타입을 작성하면 U타입은 number 타입으로 추론된다. 즉, U가 추론 가능한 타입이면 참이고 아니라면 거짓인 것이다. 조건부 타입 절에서만큼은 굉장히 유용한 키워드이자 단골 구문이기에 정리를 해보고자 한다. 구조 T extends infer U ? X : Y 예시 1 type Type = T extends infer R ? R : null; const a: Type = 123; console.log(typeof a); // number 이 때, infer 키워드의 명시가 의미있는가에 대해 의문을 가질 수 있을 것이다. 예시 2 type ReturnType ..

타입과 인터페이스의 차이에 대해 알고 있는가? 업무 진행 시 어떠한 상황에서 타입을 사용하고 어떠한 상황에서 인터페이스를 사용하는가? 타입과 인터페이스의 특징은 객체의 타입 이름을 지정하는 것이다. 둘의 기능에는 공통점과 차이점이 있다. 상속을 받는 방법의 차이 interface는 extends를 사용하며, type은 &를 이용해 상속을 통한 확장을 한다. interface interface1 { a: string; } interface interface2 extends interface1 { b: string; } const interfaceConst: interface2 = { a: "a", b: "b" } type type1 = { a: string; } type type2 = type1 & { b..

전개 구문 (Spread Syntax) 전개 구문(Spread Syntax)는 ECMAScript6(2015)에서 새로 추가된 문법으로, 객체 혹은 배열들을 펼칠 수 있게 해 준다. 문법 자체는 간단하며, 그저 배열 혹은 객체 앞에 점 세 개를 붙여주면 된다. // object {...obj} // array -1 [...arr] // array -2 {...arr} ES5 vs ES6 배열 문법 1. ES5 배열: concat method const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; const finArr = arr1.concat(arr2, arr3); console.log(finArr); // [1, 2, 3, 4, ..

타입스크립트에서 서로 연관된 값을 타입으로 지정할 때 enum 또는 union type을 주로 사용하는데, 이 둘의 차이를 한번 정리해보고 적절하게 사용해보고자 본 포스팅을 작성한다. String union type Job = "teacher" | "nurse" | "doctor" | "police" Enum enum Job { teacher = "teacher", nurse = "nurse", doctor = "doctor", police = "police" } Is there any problem of enum? Yes. 그리고 enum의 제약 사항을 알면 union 및 enum을 시의적절하게 사용할 수 있을 것 같다. 1. 코드 사이즈 증가 enum은 JavaScript의 객체로 컴파일 되기 때문에..