[TS] 런타임과 컴파일

런타임과 컴파일타임자바스크립트는 고수준 언어에 속하며 컴파일러나 인터프리터에 의해 기계가 이해할 수 있는 저수준 프로그래밍 언어로 번역되어 실행된다.자바스크립트는 인터프리터 언어지만, 자바스크립트를 해석하고 실행하는 역할을 하는 V8 엔진은 때때로 최적화를 위해 컴파일 단계를 거친다. 이를 통해 코드를 캐싱하여 이후 실행 시간을 단축한다.컴파일타임은 소스코드가 컴파일 과정을 거쳐 컴퓨터가 인식할 수 있는 기계어 코드(바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미한다.소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행된다. 런타임은 컴파일 과정을 마친 응용 프로그램이 사용자에 의해 실행되는 과정이다.자바스크립트 런타임자바스크립트 런타임은 자바스크립트가 실행되는 환경을 의미..

• format_list_bulleted TypeScript
• · 2025. 1. 31.
• textsms

[TS] Record 원시 타입 키 개선

Record의 키를 string 이나 number 같은 원시 타입으로 명시하면 타입스크립트는 키가 유효하지 않더라도 타입상으로 문제가 없기 때문에 오류를 표시하지 않는다. 이는 런타임 에러를 야기할 수 있다.foodByCategory 객체는 무한한 키 집합을 가지게 된다. 객체에 없는 키값을 사용해도 타입스크립트는 오류를 표시하지 않는다. 그러나 런타임에서 westerns은 undefined 가 되어 오류를 반환한다.type Category = string;interface Food { name: string;}const foodByCategory: Record = { 한식: [{ name: '제육덮밥' }, { name: '뚝배기 불고기' }], 일식: [{ name: '초밥' }, { name:..

• format_list_bulleted TypeScript
• · 2025. 1. 30.
• textsms

[TS] 불변 객체 타입

타입스크립트에서 keyof 연산자는 객체 타입을 받아 해당 객체의 키값을 string 또는 number 의 리터럴 유니온 타입을 반환한다.interface ColorType { red: string; green: string; blue: string;}type ColorKeyType = keyof ColorType; // 'red' | 'green' | 'blue'타입스크립트에서 typeof 연산자는 변수 혹은 속성의 타입을 추론하는 역할을 한다.const colors = { red: '#F45452', green: '#0C952A', blue: '#1A7CFF',};type ColorsType = typeof colors;/**type ColorsType = { red: string; g..

• format_list_bulleted TypeScript
• · 2025. 1. 29.
• textsms

[TS] NonNullable로 타입 가드

NonNullable을 활용한 타입 가드NonNullable 은 타입스크립트에서 제공하는 유틸리티 타입으로 제네릭으로 받는 T가 null 또는 undefined 일 때 never 를 반환하는 타입이다.type NonNullable = T extends null | undefined ? never : T;null을 가질 수 있는(Nullable) 값의 null 처리는 자주 사용되는 타입 가드 패턴의 하나이다. 일반적으로 if문을 사용해서 null 처리 타입 가드를 적용하지만, is 키워드와 NonNullable 타입으로 타입 검사를 위한 유틸 함수를 만들어서 사용할 수 있다.매개변수 value가 null이나 undefined가 아니라면 타입이 좁혀진다.function NonNullable(value: T)..

• format_list_bulleted TypeScript
• · 2025. 1. 28.
• textsms

[TS] 유틸리티 타입

유틸리티 타입을 활용하여 타입 중복 선언 제거Props 타입과 styled-components 타입은 똑같은 타입으로 두 타입을 각각 선언하면 중복된 코드가 생긴다. 그리고 타입이 변경되면 두 타입을 모두 변경해줘야 하는 번거러움이 발생한다.유틸리티 타입인 Pick 을 활용하면 중복된 코드를 작성하지 않아도 되고 유지보수를 더욱 편리하게 할 수 있다. 이외에도 상속받는 컴포넌트 혹은 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 props 등에도 활용할 수 있다.// 컴포넌트export type Props = { height?: string; color?: string; isFull?: boolean; className?: string;};const Hr: FC = ({ height, color, i..

• format_list_bulleted TypeScript
• · 2025. 1. 27.
• textsms

[TS] 조건부 타입

조건부 타입타입스크립트에서는 조건부 타입을 사용해 조건에 따라 출력 타입을 다르게 도출할 수 있다. 조건부 타입은 자바스크립트의 삼항 연산자와 동일하게 T extends U ? X : Y 형태를 가진다.조건부 타입을 활용하면 중복되는 타입 코드를 제거하고 상황에 따라 적절한 타입을 얻을 수 있기 때문에 더욱 정확한 타입 추론을 할 수 있게 된다.interface Bank { financialCode: string; companyName: string; name: string; fullName: string;}interface Card { financialCode: string; companyName: string; name: string; appCardType?: string;}// 일반적..

• format_list_bulleted TypeScript
• · 2025. 1. 26.
• textsms