[TS] infer (타입 추론)
TIL
infer는 조건부 타입 내에서 특정 타입을 추론하는 키워드이다.ReturnType 구현함수 타입에서 반환값의 타입만 추출하는 ReturnType을 만들어보자.type ReturnType = T extends () => infer R ? R : never;type FuncA = () => string;type FuncB = () => number;type A = ReturnType; // stringtype B = ReturnType; // number동작 원리조건식 T extends () => infer R에서 infer R은 조건식을 참으로 만드는 최적의 R 타입을 추론하라는 의미다.타입 A를 계산하는 과정은 다음과 같다.1단계: 타입 변수 T에 FuncA가 할당된다.T = () => string2단..
[TS] 분산적인 조건부 타입
TIL
분산적인 조건부 타입type StringNumberSwitch = T extends number ? string : number;let a: StringNumberSwitch; // stringlet b: StringNumberSwitch; // number 위 조건부 타입에 Union을 할당해 보자.let c: StringNumberSwitch; // string | numbernumber | string은 number의 서브타입이 아니므로 number가 될 것 같지만, 실제로는 string | number가 된다. 동작 원리조건부 타입의 타입 변수에 Union 타입을 할당하면 분산적인 조건부 타입으로 동작한다.1단계: Union 타입 분리StringNumberSwitch은 다음과 같이 분리된다.Str..
[TS] 타입 조작 및 고급 타입 활용 연습
TIL
1. 조건을 만족하는 함수 타입 구현getSellersFromProducts 함수- 매개변수로 받은 Product 배열로부터, seller 객체만 추출해 새로운 배열로 반환- 반환값을 명시적으로 설정interface Product { id: number; name: string; price: number; seller: { id: number; name: string; company: string; };}function getSellersFromProducts(products: any): any { return products.map((product) => product.seller);}function getSellersFromProducts(products: Product[]..
[TS] 템플릿 리터럴 타입
TIL
템플릿 리터럴 타입(Template Literal Type)은 템플릿 리터럴을 이용해 특정 패턴을 갖는 String 타입을 만드는 기능이다.type Color = "red" | "black" | "green";type Animal = "dog" | "cat" | "chicken";type ColoredAnimal = `${Color}-${Animal}`;ColoredAnimal타입은 Color와 Animal의 모든 조합을 생성한다.결과는 "red-dog" | "red-cat" | "red-chicken" | "black-dog" | ...같은 유니언 타입이 된다. 이를 활용하면 정해진 패턴의 문자열만 허용하는 타입을 간단히 만들 수 있다.
[TS] 맵드 타입
TIL
맵드 타입(Mapped Type)은 기존 객체 타입을 기반으로 새로운 객체 타입을 만드는 기능이다. 유저 정보를 관리하는 함수들을 작성해보자.interface User { id: number; name: string; age: number;}function fetchUser(): User { return { id: 1, name: "woodstock", age: 20, };}function updateUser(user: User) { // 수정 기능} updateUser 함수로 유저 정보를 수정하려는데, 매개변수 타입이 User여서 수정하고 싶은 프로퍼티만 골라 보낼 수 없다. 이 상황을 해결하기 위해 모든 프로퍼티를 선택적으로 만든 새 타입을 정의해보자.type Partial..
[TS] keyof와 typeof 연산자
TIL
keyof 연산자keyof 연산자는 객체 타입의 모든 프로퍼티 키를 String Literal Union 타입으로 추출하는 연산자이다. 객체의 프로퍼티 값을 가져오는 함수를 작성해보자.interface Person { name: string; hp: number;}function getPropertyKey(person: Person, key: "name" | "hp") { return person[key];}const person: Person = { name: "woodstock", hp: 90,};getPropertyKey(person, "name");이렇게 key의 타입을 "name" | "hp"로 정의하면 Person 타입에 프로퍼티가 추가되거나 수정될 때마다 이 타입도 함께 바꿔야 한다..
[TS] 인덱스드 액세스 타입
TIL
인덱스드 액세스 타입(Indexed Access Type)은 객체, 배열, 튜플 타입으로부터 특정 프로퍼티나 요소의 타입만 추출하는 타입이다.객체 프로퍼티 타입 추출게시글 작성자 정보를 출력하는 함수를 작성해보자.interface Post { title: string; content: string; author: { id: number; name: string; };}function printAuthorInfo(author: { id: number; name: string }) { console.log(`${author.name}-${author.id}`);} 만약 Post의 author 타입이 수정되면 함수의 매개변수 타입도 함께 수정해야 한다.인덱스드 액세스 타입을 사용하면 이 문..
[CS50] 컴퓨팅 사고 - 알고리즘
TIL
알고리즘이란컴퓨터는 입력을 받아 처리한 후 출력한다. 입력받은 자료를 출력 형태로 만드는 처리 과정을 알고리즘이라고 한다.알고리즘은 입력값을 출력값으로 바꾸기 위한 명령들의 순서적 나열이다. 같은 결과를 만들더라도 알고리즘에 따라 소요 시간이 달라질 수 있다.정확한 알고리즘전화번호부에서 Mike Smith를 찾는다고 가정해보자.첫 페이지를 펼친다.Mike Smith가 있는지 확인한다.없으면 다음 페이지로 넘긴다.찾을 때까지 또는 끝날 때까지 반복한다.이 알고리즘은 정확하다. Mike Smith가 있다면 언젠가는 찾을 수 있다.하지만 한 페이지씩 넘기는 방식은 매우 비효율적이다. 한 번에 두 페이지를 넘기면? 빨라지지만 원하는 페이지를 건너뛸 수도 있다. 여전히 가장 효율적인 방법은 아니다. 효율적인 알고..
[CS50] 컴퓨팅 사고 - 정보의 표현
TIL
컴퓨터의 정보 처리우리는 컴퓨터를 통해 다양한 정보를 처리한다. 간단한 숫자부터 문자, 사진, 영상, 음악까지 정보를 표현하는 형태는 매우 많다. 컴퓨터는 어떻게 이런 다양한 정보를 처리할까?문자의 표현컴퓨터는 스위치를 ON/OFF하면서 숫자를 표현한다. 그렇다면 문자는 어떻게 표현할까?문자를 숫자로 표현할 수 있도록 정해진 약속(표준)이 있다. 그중 하나가 ASCII(American Standard Code for Information Interchange, 아스키코드)로, 총 128개의 문자를 정의한다.알파벳 'A'를 2진법으로 표현하면 다음과 같다. 10진법으로 65이므로 2^6×1 + 2^0×1 = 64+1, 즉 1000001이다. ASCII는 영문 알파벳과 기본 기호만 표현할 수 있어 한계가 있..
[TS] 제네릭 함수 타입 정의 및 응용 연습
TIL
1. 조건을 만족하는 함수 func의 타입 정의func 함수- 매개변수를 그대로 반환- 매개변수 value에는 모든 타입의 값이 들어올 수 있음- 반환값의 타입은 매개변수로 전달된 값의 타입과 같음function func(value: any) { return value;}function func(value: T):T { return value;} 2. 조건을 만족하는 함수 getLastValue의 타입 정의getLastValue 함수- 매개변수로 배열을 받아 배열의 마지막 값을 반환- 매개변수 dat에는 빈 배열을 제외한 모든 배열이 들어올 수 있음- 반환값의 타입은 매개변수 data 배열의 마지막 요소의 타입이어야 함function getLastValue(data: any) { return dat..