프론트엔드 기본개념 복습/Typescript 7

[Typescript] String Union Type을 value로 사용하기

String Union Type을 활용할 때 이따금씩 가능한 타입의 값들을 코드 안에서 value로 활용하고 싶은 경우가 있다. 한 예시로 MBTI에 대한 String Union Type을 형성한 후 각각의 MBTI를 표현하는 MBTI를 생성하고 싶을 때는 map 함수를 활용하여 컴포넌트들을 사용하는 것이 매우 효율적이다. 가능한 방법은 두 가지가 있다. 두 가지 모두 type을 먼저 생성하는 것이 아니라 가능한 값들을 생성한 후 그로부터 타입을 추출하는 방법들이다. 1. 배열 활용 위 예시와 같이 가능한 값들의 배열을 생성한 후 'typeof 배열이름[number]'을 통해 그 값들을 가지는 타입을 생성할 수 있다. 배열에 변화가 없다는 as const를 덧붙여야지만 해당 값들로 타입을 생성할 수 있으..

[Typescript] Mapped Types & Utility Types

1. Mapped Types 자바스크립트의 map을 생각하면 쉽다. 가장 대표적인 사용 예시로 두 가지가 있다. (1) 키 - value 타입 지정 (2) in 자바스크립트의 for in을 생각하면 쉽다. 위 예시의 경우 OnlyBools는 T 타입의 모든 키에 대해 boolean 값을 가지는 타입을 반환한다. 2. Utility Types 이미 타입스크립트에서는 사람들이 자주 사용할 만한 타입들을 많이 만들어 두었다. 대표적인 예시는 다음과 같다. (1) Required Required는 주어진 타입의 모든 프로퍼티를 required로 변경해준다. 위의 예시에서 person은 age가 더 이상 optional이 아니기 때문에 에러가 발생한다. (2) Partial Partial은 Required와 반대..

[Typescript] Type alias vs Interface

1. 공통점 object의 타입을 정의하는 데 사용될 수 있다. class를 통해 구현(implementation)이 가능하다. 확장(extension)이 가능하다. 2. 차이점 중복 선언 - Type alias는 중복 선언이 불가능하지만 Interface는 중복 선언이 가능하다. 그러나 Interface의 중복 선언은 새롭게 정의되는 것이 아니라 기존의 정의에 새로운 내용이 추가되는 것이다. (Intersection으로 생각하면 된다, 그러나 여태까지 프로젝트 경험으로 봤을 때는 실용성 있는 차이인지에 대해서 아직 잘 모르겠다.) Union type - Type alias는 Union type이 가능하다. 그러나 Intersection은 Union type이 불가능하다. 3. 결론 - Union typ..

[Typescript] Intersection Type

인터섹션 타입은 두 가지 이상의 타입의 합집합인 타입을 의미한다. 모든 타입을 합쳤다는 점에서 여러 타입 중 하나에만 해당하면 되는 Union Type과는 차이가 있다. Intersection Type은 & 연산자를 통해 생성할 수 있으며 재료가 되는 타입들 간에 동일한 프로퍼티가 있는 것은 문제가 되지 않는다. (다만 해당 프로퍼티가 동일한 타입을 가져야 한다. 아래 예시의 경우 Student의 name은 number 타입인데 Developer의 name은 string 타입을 가지면 오류가 발생한다.)

[Typescript] never 타입

타입스크립트의 never 타입은 일반적으로 함수의 반환형으로 사용되며 '절대 아무것도 리턴해서는 안된다'는 의미로 사용된다. 함수에서 반환형으로 never 타입이 사용될 때는 오류를 출력하거나 리턴값을 절대 내보내지 않을 때에 해당합니다. 여기서 리턴값을 절대 내보내지 않는 때는 무한루프로 이해하면 된다. never과 void는 다른 타입이다. 따라서 return문을 작성하지 않았더라도 never을 반환형으로 사용하는 함수가 위 두 경우에 해당하지 않는다면 에러가 발생한다.

[Typescript] 타입스크립트 기본 개념

1. 타입스크립트는 자바스크립트의 슈퍼셋이다. (따라서 자바스크립트에서 이용하는 기능들을 모두 이용할 수 있다.) 2. 타입스크립트는 정적 타입 언어이다. 그렇기 때문에 컴파일 단계에서 타입이 결정되며 보다 안전한 프로그래밍을 구현할 수 있다. (반면 자바스크립트는 동적 타입 언어이다. 자바스크립트에서 타입은 런타임에서 결정된다. 그렇기 때문에 코드를 이해하는 데 어려움이 있으며 프로그램을 작성하는 과정에서 오류를 발견하기 어렵다.) 3. 타입스크립트는 자바스크립트보다 객체지향프로그래밍(OOP)에서 강력한 모습을 보여준다. ES6부터 자바스크립트 역시 클래스의 기능이 제공되기는 했지만 자바스크립트는 본질적으로 프로토타입 기반 언어이기 때문에 완벽한 객체지향을 구현하지는 못한다. 프로토타입 기반 언어는 클..