Typescript[Typescript] Type Narrow, CFA
[Typescript] Type Narrow & CFA 타입스크립트는 "string" | "number"같은 유니온 타입에 대해 타입을 CFA(Control Flow Analysis)와 사용자 정의 함수를 통해서 Type Narrow하여 그 결과를 개발자에게 보여줍니다. Control Flow는 한국어로 제어 흐름이고 프로그램에서 실행되는 각 구문, 명령어나 함수가 호출되는 순서를 의미합니다. 제어 흐름을 나타내는 구문은 어떤 조건에 따라 실행 하거나, 생략하거나를 결정하여 호출 순서 혹은 흐름을 바꿀 수 있도록 도와주는 구문으로 제어문이라고 합니다. 대표적인 boolean logic 제어문으로는 if, switch, try 같은 구문이 대표적입니다. 순수 자바스크립트의 코드를 분석하는 것과 같습니다. 사용자 정의 함수는 "is", "assert", "infer", "as"같은 키워드나 타입 Generic을 사용한 타입 혹은 타입 함수입니다. CFA를 통해서 타입이 결정되는 것과 다른 점은, 타입스크립트의 키워드들은 컴파일 후에는 다 사라집니다. 핵심은 CFA는 자바스크립트 코드를 통해서도 타입이 제어가되기 때문에, 런타임에 영향을 주지만, 사용자 정의 함수를 통한 타입은 런타임에 영향을 주지 않습니다. 가장 간단한 타입 좁히기 방법으로는 자바스크립트 If문과 자바스크립트 타입 연사자가 있습니다. 타입 연산자 종류는 크게 3가지가 있습니다. typeof, in, instanceOf입니다. 각각 Primitive+ built-in Type, Object, Class를 구별하는데 사용합니다. 구별하고자 하는 변...2025-04-05
Typescript[Typescript] Template Literal Types
[Typescript] Template Literal Types Typescript 기능들을 하나씩 다뤄볼 예정입니다. 그 첫 번째 기능으로 당첨된 것은 Template Literal Types입니다. literal types 자체는 어려운 내용이 아니지만, 2.활용 예시는 Generic Type과 Type infer 대해 알고 있어야 이해가 가능할 것 같습니다. Template Literal 타입이란 문자열 리터럴을 템플릿 문자열 형식(백틱 ``)으로 만들어 조합하여 사용할 수 있게 해주는 타입입니다. Template Literal 타입과 String Literal 타입은 문자열 규칙에 따른 디자인 토큰 생성이나, Object의 key값에 따른 자동 타입 생성같이 다양한 상황에서 사용할 수 있습니다. 아래 각 타입에 대한 설명입니다. Literal Type : string, number 같이 일반적인 타입만이 아니라, 특정 문자열이나 숫자를 타입으로 지정한 타입입니다. type Direction = "left" | "right"; const direction:Direction = "left"; ✅ const direction:Direction = "up"; ❌ // left와 right 값만 가질 수 있다. Type '"up"' is not assignable to type '"left" | "right"' const direction:string = "up"; ✅ // string 타입은 모든 문자열이 가능하다. Template Literal : String Literal을 템플릿 문자열 형식(백틱 ``)...2025-04-04