타입스크립트 유틸리티 타입 (파셜, 픽, 오밋) 정리

유틸리티 타입- 타입을 정의할 때 간결한 문법을 사용할 수 있게 해준다.- 이미 정의해 놓은 타입을 변환할 때에 사용하기 좋은 타입 문법이다.- 유틸리티 타입을 꼭 쓰지 않아도 기존의 인터페이스, 제네릭 등으로 충분히 가능하긴 하다. 종류는 겁나 많지만 자주 쓸 것 같은 파셜, 픽, 오밋을 정리해보자.  🔵 파셜 (Partial)interface Address { email: string; address: string;}// Partial를 활용한 타입type Email = Partial;const email1: Email = {}; // OKconst email2: Email = { email: 'abc' }; // OKconst email3: Email = { email: 'abc', a..

• format_list_bulleted 🧠 저장/Typescript
• · 2024. 3. 21.
• textsms

타입스크립트 타입추론, 타입단언, 타입가드, 타입호환 개념 정리

타입추론, 타입단언, 타입가드, 타입호환🔵 타입 추론- 타입을 따로 지정하지 않아도 알아서 추론하는 것 기본적인 타입추론// 기본적인 타입추론var a; // 이미 any로 추론함var b = 10; // number로 추론var c = 'abc' // string으로 추론  함수에 타입추론// 함수에 타입추론function getA(a) { return a; }// ==> any를 받고 any를 리턴하도록 추론function getB(b = 10) { var c = 'abc'; return b + c;}// ==> number를 받고 string를 리턴하도록 추론 제네릭으로 정의한 인터페이스에 타입추론// 제네릭으로 정의한 인터페이스에 타입추론interface Dropdown { ..

• format_list_bulleted 🧠 저장/Typescript
• · 2024. 3. 18.
• textsms

타입스크립트 제네릭 선언, 타입제한 간단 정리

제네릭 (Generics)- C#, Java 등 언어에서 재사용성이 높은 컴포넌트를 만들때 활용되는 특징- 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 생성하는데 사용- 타입을 마치 함수의 파라미터처럼 사용 🔵 함수에 제네릭 선언제네릭이 아닌 유니온 타입으로 했을 때 문제점function logMessage(text: string | number) { console.log(text); return text;}const res = logMessage('hi');// string 메서드 사용res.split(''); // ==> 에러! (string인지 number인지 몰라)- 유니온 타입을 활용하면 최종값의 타입이 정확하지 않음- return한 값이 여전히 string | number..

• format_list_bulleted 🧠 저장/Typescript
• · 2024. 3. 15.
• textsms

타입스크립트 연산자, 이넘, 클래스 활용방법 간단 정리

타입스크립트🔵 연산자를 이용한 타입 정의Union Type ('|')- 한가지 이상 타입을 쓰고 싶을 때 사용 (파이프 '|' 연산자 활용)- 내부적으로 타입들을 구분할 수 있음 (타입가드에 활용)* 타입가드 : 특정 타입으로 타입의 범위를 좁혀나가는(필터링) 과정- 타입스크립트 관점에선 어떤 값이 들어올 지 모르기 때문에 공통의 보장된 속성만 사용 가능 (1) 타입가드의 역할function logAge(value: string | number) { console.log(value); // 타입가드 (number) if (typeof value === 'number') { // 이 스코프에서는 자연스럽게 number로 인식된다 console.log(typeof value); // n..

• format_list_bulleted 🧠 저장/Typescript
• · 2024. 3. 12.
• textsms

인덱싱 패턴과 딕셔너리 패턴

인덱싱 패턴과 딕셔너리 패턴안녕하세요. 오늘은 타입스크립트 카테고리에 올리기는 하지만 사실 타입스크립트에만 국한되는 개념이 아닌 인덱싱과 딕셔너리 패턴에 대해 정리해보겠습니다. 인덱싱 패턴과 딕셔너리 패턴 특징 및 차이점 - 두 패턴 모두 타입스크립트에만 국한되는 개념이 아니다- 차이점으로는 접근 방식에서 있다.- 또한 각각 데이터 구조가 다르다.근데 내 생각엔 걍 비슷한 것 같다 ㅠ 모가몬지🔵 인덱싱 패턴- '배열'을 기반으로 데이터를 저장한다.- 인덱스를 사용하여 각 요소에 접근한다.- 즉, 순서가 있는 컬렉션 (1) 인터페이스 정의interface Indexing { [index: number]: string;}- number타입의 index와 string을 반환하는 인터페이스 (2) 해당 인터..

• format_list_bulleted 🧠 저장/Typescript
• · 2024. 3. 9.
• textsms