본문 바로가기

typeScript11

TypeScript 와 Enum 문제 03/26 Enum 은 보통, 자주 사용해야 할 관련된 상수들을 정의해서 모아놓을 수 있기 때문에, 편리하게 종종 사용하게 된다. 다시 말해, 어떤 변수가 가질 수 있는 값의 후보군을 미리 정해두고 그 안에서만 선택하게 만들기 때문에, 관리가 편하고 휴먼에러를 줄일 수 있는 방법으로서 유용하다.그런데 이런 Enum 도, TypeScript 에서 사용할 때는 문제가 생길 수 있다는데... Tree - shaking 불가능TS 는 enum 을 컴파일할 때 즉시 실행 함수(IIFE) 형태의 JavaScript 코드를 생성한다. 문제는, 이런 코드는 정적 분석이 어려워서 번들러(Webpack, Rollup 등) 가 사용하지 않는 코드를 제거하지 못하고 최종 번들에 포함시킨다는 것.너무 본론만 설명해서 (두괄식의.. 2025. 12. 23.
옵셔널 체이닝(?.) 03/13 사실 JS 에서도 TS 에서도 사용할 수 있는 문법이라서 어디에 쓸까 하다가.. JS 는 좀 글이 쌓이는데 반해 특별하게 TS에만 있는 문법이 아니라면 잘 쓰지 않게 되는 것 같아 이쪽으로 정했다. 조만간 둘이 통합해야 되는게 아닌가 몰라..?사실 swift 에도 있다고 한다 Optional Chaining옵셔널 체이닝은, 속성 값이 null 이거나 undefined 일 수 있는 객체에 안전하게 접근할 수 있게 해주는 연산자이다. 다시 말해서, 어떠한 객체나 속성이 값이 존재하는지 여부를 알지 못하더라도, 오류를 발생시키는 대신 undefined 를 반환하고 넘어가는 것이다.// 주소 정보가 없어도 에러가 나지 않음user?.adress?.city // 메서드가 존재할 때만 실행admin.s.. 2025. 12. 19.
declare 02/11 declare 란TypeScript 에서 delclare 키워드는, 컴파일러에게 이 변수 / 함수 / 클래스 / 모듈 이 어딘가 다른 곳(일반적으로 JavaScript 파일 혹은 런타임 환경) 에 이미 정의되어 있으니, JavaScript 코드로 컴파일할 필요는 없다 라고 알려주는 역할만을 수행한다.다시 말해, 실제 구현 코드를 생성하지 않고, 타입 정보만을 제공하는 엠비언트 선언(Ambient Declaration) 에 사용하는 것.엠비언트 선언은 TypeScript 의 주요 목표인, 방대한 JavaScript 생태계와 상호 운용되기 위해 타입만 선언하며, 타입 시스템의 일관성을 유지하면서도 기존 JavaScript 리소스를 활용할 수 있게 하는 개념이다. 주요 용도기존 JavaScript .. 2025. 12. 2.
TypeScript import 오류들 01/13 .TS 모듈 불러오기 활성화 오류An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled. 에러 발생파일을 불러올 때 .ts 확장자를 사용했는데, TypeScript 에서는 기본적으로 이 기능이 비활성화 되어 있다. 에러 메세지에서 안내한 것 처럼, allowImportingTsExtension 를 켜주면 해결되는 문제.tsconfig.json 파일을 수정하면 된다.{ "compilerOptions": { "allowImportingTsExtensions": true, // 기타 다른 옵션들 }} allowImportingTsExtensions 옵션 활성화 오류Op.. 2025. 11. 25.
extends / implements 08/14 extendsJavaScript 에서 어떤 class 를 상속받기 위해 사용.class 의 .prototype 은 반드시 Object 이거나, null 이어야 한다. (null 인 경우, prototype 체인의 최상단) implementsTypeScript 에서 class 와 interface 를 동시에 확장할 수 있음.class 의 interface 에 만족하는지 여부를 체크하고, inplements 한 interface 의 type 이 없다면 에러를 반환.implements 는 오직 type 체크를 위해 사용하기 때문에, 생성했을 때 내부 값을 변경 해 주지 않는다. 정리extends새로운 class 의 상속을 위해 사용.상위 class의 모든 property 와 method 를 갖고 있.. 2024. 9. 23.
TypeScript 의 유용한 연산자 08/09 TypeScript 에서의 ! (느낌표)대부분의 언어에서 느낌표는 대부분 False 를 의미하는 연산자로 쓰인다.TypeScript 에서는, 느낌표를 변수 뒤에 붙이면 False 가 아닌 다른 방식으로 사용할 수 있다.논리 부정 연산자 (Logical Negation)피연산자의 논리 값을 반전시킨다.피연산자가 true면 false로, false면 true로 바꿔 준다.Null 이 아닌 단언 연산자 !. (Non-null assertion operator)피연산자가 null 이 아니라고 컴파일러에게 전달하여,일시적으로 null 제약 조건을 완화할 수 있다.확정 할당 단언 !: (Definite Assignment Assertions)TypeScript 컴파일러가 감지할 수 없더라도, 변수가 실제.. 2024. 9. 17.