728x90
728x90
내가 겪은 케이스는 다음과 같다. const transportations = ["taxi", "bus", "subway", "bicycle", "walk"]; 위와 같이 상수로 사용할 교통 수단의 경우의 수를 미리 정의해 놓을 수 있다. 그리고, 파티의 참석자 정보를 객체로 표현한다고 했을 때, 아래와 같은 데이터를 상정할 수 있다. const participant = { nickname: "park"; age: 43; transportation: "airplane"; } 위의 객체의 타입을 interface로 표현하면, 다음과 같을 것이다. interface Participant { nickname: string; age: number; transportation: string; } 물론, 이대로도 훌..
타입스크립트로 작성된 오픈소스를 보면, 종종 다음과 같은 코드를 직면하게 되는 순간이 있다. import type { Test } from "./Test"; export type { Test }; 해당 문법은 타입스크립트 버전 3.8에서 추가된 type only imports and exports 문법이다. 이는 타입만을 import하고 export하기에 타입스크립트에서 불필요하게 모듈을 불러오는 문제를 해결할 수 있다. 런타임 시 사용되지 않는 import를 구분할 수 있기에 컴파일 단계에서 사용되지 않는 import를 제거할 수 있다. ⭐️ 항상 완전히 지워지기 때문에, 런타임 실행 시 해당 코드는 남지 않는다. 때때로 타입에 대한 import/export가 제대로 지워지지 않아 오류가 발생하는 경우..
자바스크립트는 Error 객체를 통해서 에러를 발생시킬 수 있다. throw new Error("Error !!!"); // or throw Error("에러 !!!"); ➡️ new 키워드 없이 Error 객체를 호출해도, new 키워드를 사용한 것과 동일한 결과가 나타난다. 자바스크립트에서 발생한 에러는 try catch문을 통해서 에러를 탐지하고, 핸들링할 수 있다. function errorTest() { throw new Error("에러입니다. 🍌"); } try { errorTest(); console.log("성공!"); // 미출력 } catch(error) { console.log(error, "발생!"); // 출력 } finally { console.log("성공/실패 상관없이 반드..
제네릭은 타입을 동적으로 설정할 수 있게 해주는 문법이다. 외부에서 타입을 주입하여, 동적으로 타입을 설정할 수 있기에 재사용이 가능한 컴포넌트를 구현하는데 있어서 핵심이다. 타입스크립트에서 가장 간단한 제네릭의 예이다. // typescript v5.0.4 function printf(i: T): void { console.log(i); } printf("Hi ~"); printf(123); printf("Zombie~"); // 제네릭 타입도 추론이 가능하다. printf 함수의 인자는 어떤 타입의 변수든 인자로 받아 출력한다. 만약 제네릭을 사용하지 않았다면 인자인 변수 i의 타입은 any가 되었거나, 가능한 모든 타입을 union을 통해서 엮어내야 한다. function printf(i: any)..
typeof는 기존 자바스크립트에서 이미 제공되는 문법이다. 타입스크립트에서도 역시 typeof를 사용할 수 있는데, 타입스크립트에서는 좀 더 확장된 기능들을 사용할 수 있다. 기본적인 문법은 자바스크립트와 크게 다르지 않다. // typescript v5.0.4 const str: string = "Hello type"; type Str = typeof str; // string 위와 같이 typeof로 타입을 타입 변수에 할당할 수 있다. 물론, 변수에 할당하지 않고도 곧바로 타입으로 지정할 수도 있다. // typescript v5.0.4 const str: string = "Hello type"; const hello: typeof str = "Hi"; 그리고 타입스크립트에서 typeof의 중요한..
타입스크립트는 클래스 문법에 대한 추가적인 지원이 있다. 따라서, 클래스를 작성할 때 타입스크립트는 자바스크립트와는 다른 문법을 사용하므로 이에 대해서 글을 남기도록 하였다. interface & type interface Bus { custommer: string[]; driver: string; callBus: () => string; getCustomer: () => string[]; onBoardBus: (custommer: string) => void; } 위와 같은 interface는 타입스크립트에서 객체의 타입을 표현하기 위해서 사용할 수 있다. 다만, java와 같은 객체지향 언어와 마찬가지로 interface를 implements하여 말 그대로 클래스의 인터페이스로 사용할 수 있다. cl..