728x90
728x90
타입스크립트에서 객체의 타입을 체크하는 것은 종종 필요한 작업이다. 특히, Bird나 Human과 같은 특정한 타입(type alias / interface)을 가진 객체를 다룰 때는 더욱 중요한데, 타입스크립트에서 객체의 타입을 체크하는 방법 중 하나인 `in` 키워드에 대해 알아보았다. typeof로 타입 체크하기 JavaScript에서는 `typeof` 연산자를 사용하여 변수의 데이터 타입을 확인할 수 있다. 일반적으로 이 방법은 원시 타입 (예: 문자열, 숫자, boolean)을 체크할 때 사용된다. 🤷♂️ 하지만 객체의 경우 `typeof`는 단순히 `'object'`를 반환하므로 객체의 구체적인 타입을 알 수 없기에 유효하지 않다. const myObject: Bird | Human = ge..
unknown과 any 모두 유연하게 타입을 설정하기 위해서 사용된다. 🌧️ 다만, 타입 에러를 잡아내기 어렵기에 권장되지는 않는다. 다만, 이 둘의 차이점으로는 any가 더 유연하고 안전성이 낮은 반면, unknown은 타입 안정성을 유지하면서 유연함을 제공한다. unknown vs any 예제 // unknown 타입 let value1: unknown; value1 = 123; // 할당 가능 value1 = 'Hello'; // 할당 가능 // any 타입 let value2: any; value2 = 123; // 할당 가능 value2 = 'Hello'; // 할당 가능 기본적으로는 any와 unknown모두 다양한 타입을 할당할 수 있게 해준다. // unknown과 any의 차이 let n..
타입스크립트는 데코레이터 문법을 지원한다. 다만, 현재 (v5.0.4) 버전에서는 실험적인 문법으로 이를 지원하기에 추후 변경될 가능성이 있다. 👍 타입스크립트에서는 데코레이터를 사용하여 메타데이터를 부여할 수 있다. (추가적인 설정이나 정보를 첨부한다) 🍉 실험적인 기능이기에 데코레이터 문법을 사용하기 위해서는 tsconfig.json 설정이 필요하다. { "compilerOptions": { "target": "ES5", "experimentalDecorators": true } } target이 ES5 이하 버전이 되면, 일부 문법이 제대로 작동하지 않을 수도 있다. 데코레이터의 종류로는 클래스 데코레이터 (Class Decorator), 메서드 데코레이터 (Method Decorator), 프로퍼..
내가 겪은 케이스는 다음과 같다. 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("성공/실패 상관없이 반드..