김기지의 코딩노트

🐰 유틸리티 타입 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것 🐰 맵드 타입 기반의 유틸리티 타입 1. Partial partial 부분적인, 일부분의 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 변환하는 타입 interface Post { title: string; tag: string[]; content: string; thumbnailURL?: string; } const draft: Partial = { title: '제목 나중에 짓자', content: '초안...', } 타입 Post는 thumbnailURL 프로퍼티를 제외한 다른 프로퍼티는 선택적 프로퍼티가 아니다. 하지만 변수 draft는 Partial 유틸리티..

목차 🐶 infer inference 추론하다 조건부 타입 내에서 특정 타입을 추론하는 문법 특정 함수 타입에서 반환값의 타입만 추출하는 특수한 조건부 타입을 만들 때 이용한다. type FuncA= () => string; type FuncB = () => number; // 조건부 타입 type ReturnType = T extends () => infer R? R : never; // infer R -> 조건식을 참으로 만드는 타입을 추론하도록 동작 // () => string 일 때 R = string // () => number 일 때 R = number type A = ReturnType; // string type B = ReturnType; // number type C = ReturnTy..

🐶 분산적인 조건부 타입 유니온 타입과 함께 사용할 때 조건부 타입이 분산적으로 동작하는 문법 type StringNumberSwitch = T extends number? string : number; let a: StringNumberSwitch; // string let b: StringNumberSwitch; // number let c: StringNumberSwitch; // string | number // T는 number 타입의 슈퍼타입이 됨 -> 거짓이 되므로 number 타입이 되어야함 // 하지만 c는 string | number 유니온 타입이 됨 a는 number 타입의 인자를 넘김 -> 조건이 참이므로 string 타입 b는 string 타입의 인자를 넘김 -> 조건이 거짓이므로..

🐶 조건부 타입 extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 결정하는 문법 type A = number extends string? string : number; // numebr는 string를 확장하는 타입(서브타입)이 아님 -> number 타입으로 정의 number extends string? 조건이 참이라면 string 타입으로 설정 조건이 거짓이라면 number 타입으로 설정 number 타입은 string 타입의 서브 타입이 아니므로 타입 A는 number타입이 된다. type ObjA = { a: number; } type ObjB = { a: number; b: number; } type B = ObjB extends ObjA? number : string; // ..

🐾 타입 조작 🐾 템플릿 리터럴 타입 string literal 타입을 기반으로 특정 패턴을 갖는 문자열 타입을 만드는 기능 type Color = 'red' | 'black' | 'green'; type Animal = 'dog' | 'cat' | 'chicken'; 위 두 코드를 혼합하여 색과 동물을 만들어 내는 타입을 만든다고 가정하자. type ColoredAnimal = `red-dog` | 'red-cat' | 'red-chicken' | 'black-dog' ... ; ColoredAnimal은 Color와 Animal을 조합해 만들 수 있는 모든 가지수의 string literal 타입으로 이루어진 union 타입이다. 여기서 Color나 Animal 타입에 string literal 타입..

🐾 타입 조작 🐾 맵드 타입 기존의 객체 타입을 기반으로 새로운 객체 타입을 만드는 타입 조작 기능 interface User { id: number; name: string; age: number; } // 한 명의 유저 정보를 불러오는 기능 function fetchUser(): User{ return { id: 1, name: '기지', age: 27, } } // 한 명의 유저 정보를 수정하는 기능 function updateUser(user: User){ // 수정하는 기능 } 유저 정보를 관리하는 프로그램의 일부를 만든다고 가정하자. 유저 정보가 서버에 저장되어 있다고 가정하고, 한 명의 유저 정보를 불러오는 기능을 하는 함수를 만들었다. 또, 한 명의 유저 정보를 수정하는 기능을 만들어 준다..

🐾 타입 조작 🐾 keyof 연산자 객체 타입으로부터 프로퍼티의 모든 key들을 string literal union 타입으로 추출하는 연산자 interface Person { name: string; age: number; } function getPropertyKey(person: Person, key: 'name' | 'age'){ return person[key]; } const person: Person = { name: '기지', age: 27, }; getPropertyKey(person, 'name'); 위처럼 person의 프로퍼티를 꺼내 반환하는 함수를 만든 경우, Person 타입에 새로운 프로퍼티가 추가되거나 수정된다면 이 타입도 계속 수정을 해야한다. 하지만 keyof 연산자를 이..

🐾 타입 조작 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 기능 제네릭 또한 타입을 조작하는 기능에 포함이 된다. 🐾 인덱스드 엑세스 타입 인덱스를 이용해 다른 타입 내의 특정 프로퍼티의 타입을 추출하는 타입 1. 객체 프로퍼티의 타입 추출 interface Post { title: string; content: string; author: { id: number; name: string; age: number; }; } const post:Post = { title: '게시글 제목', content: '게시글 본문', author: { id: 1, name: '기지', age: 27, }, }; 게시글을 표현하는 객체 타입 Post를 ..

🧀 자바스크립트에서의 Promise 자바스크립트에서 프로미스는 Promise 라는 이름의 클래스이다. 따라서 new 연산자를 이용해 프로미스 객체를 생성한다. const promise = new Promise((resolve, reject)=>{ setTimeout(()=>{ // resolve에 결과값 20을 전달 resolve(20); }, 3000); }); promise.then((response)=>{ console.log(response); // 20 }); Promise의 콜백 함수는 resolve와 reject 두 개의 매개변수를 가짐 resolve -> 성공 시 호출되는 함수 reject -> 실패 시 호출되는 함수 🧀 타입스크립트에서의 Promise 타입스크립트에서 Promise는 제네..

🍞 제네릭 클래스 클래스의 이름 뒤에 타입 변수를 선언하면 제네릭 클래스가 된다. Number 타입의 리스트를 생성하는 클래스를 만들어보자. class NumberList { constructor(private list: number[]){} push(data: number){ this.list.push(data); } pop(){ return this.list.pop(); } print(){ console.log(this.list); } } list 필드를 private으로 설정해 클래스 내부에서만 접근할 수 있도록 한다. 새로운 요소를 추가하는 push, 제거하는 pop, 출력하는 print 메소드를 만들어 준다. 이 NumberList 클래스로 인스턴스를 만들어 사용해보자. const numberL..