728x90
728x90
타입스크립트로 작성된 오픈소스를 보면, 종종 다음과 같은 코드를 직면하게 되는 순간이 있다. 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..
타입스크립트에서 고정된 값을 주기위해서 다음과 같이 union을 활용할 수 있다. type Fruit = "Apple" | "Banana" | "Cocoa"; const fruit: Fruit = "Apple"; 위에서 fruit은 자동완성도 지원되고, Apple, Banana, Cocoa 셋 중 하나의 값만 가질 수 있게 된다. 다만, 다른 언어에 익숙한 사람이라면 enum을 사용하여 위의 고정된 선택지의 값을 표현하고 싶어할 수 있다. enum Fruit { Apple, Banana, Cocoa } const fruit: Fruit = Fruit.Apple; // 0 위의 타입스크립트는 다음과 같이 자바스크립트로 변환된다. "use strict"; var Fruit; (function (Fruit) ..