[TypeScript] 삼항 연산자를 이용한 타입스크립트 조건부 타입
TypeScript 2023. 8. 7. 01:07

조건부 타입이란? type A = number extends string ? string : number; // number extends string이 참이면 string, 거짓이면 number type ObjA = {a: number}; type ObjB = {a: number; b: number}; type B = ObjB extends ObjA ? number : string; // ObjB가 ObjA의 서브 타입이므로 true => number 타입 타입스크립트에서 삼항 연산자를 이용해 타입을 정하는 것을 조건부 타입이라고 한다. 주로 조건식으로 A extends B를 사용하며 A가 B의 서브 타입이면 true, 아니면 false를 반환한다. 위의 예시 코드를 보면 타입 A의 조건식은 numbe..

[TypeScript] 타입을 조작하는 4가지 방법 (인덱스, keyof, 맵드)
TypeScript 2023. 8. 4. 10:11

인덱스드 액세스 타입(Indexed Access) interface User { id: number; name: string; profile: { job: string; mbti: string; } } const userA: User = { id: 0, name: 'Lee', profile: { job: 'developer', mbti: 'INFJ' } } // 타입의 특정 인덱스 타입을 가져오고 싶을 때 ['인덱스']로 가져올 수 있다. function getUserProfile(profile: User['profile']) { console.log(`${profile.job}-${profile.mbti}`); } getUserProfile({job: 'designer', mbti: 'ENFP'}); ..

[TypeScript] 타입 변수로 타입을 받아오는 제네릭
TypeScript 2023. 8. 1. 13:57

제네릭이란? 타입스크립트에서 제네릭이란 타입을 선언 당시 바로 정해주는 게 아니라 타입 변수라는 것을 둬서 매개변수의 타입이 타입 변수의 타입에 들어가는 일반적인 타입 추론 방식을 의미한다. 이를 통해 함수, 클래스, 인터페이스 등을 작성할 때 다양한 타입에 유연하게 대응할 수 있고, 코드의 재사용성도 높일 수 있다. function func(value: T): T { return value; } func(123); // T는 number 타입 func('abc'); // T는 string 타입 함수 이름 옆에 라고 되어 있는 게 바로 타입 변수이다. 타입 변수란 말 그대로 타입을 저장할 수 있는 변수이다. 이제 함수를 호출할 때 들어오는 매개변수의 타입에 따라서 T에 들어오는 타입이 유동적으로 변하게 ..

[TypeScript] 타입스크립트 클래스(class)로 객체 쉽게 만들기
TypeScript 2023. 7. 30. 23:07

자바스크립트에서의 클래스 const studentA = { name: 'Shawn', age: 30, grade: 'A+' }; const studentB = { name: 'Lee', age: 25, grade: 'B' }; ... 객체의 형태가 모두 같고, 값만 다른 객체를 여러 개 찍어내야 한다면 위 코드처럼 일일이 객체를 하나하나 생성하는 것은 어쩌면 매우 비효율적인 방법일 수 있다. 이렇게 같은 형식의 객체들을 찍어내기 위해서는 모양틀이 필요한데, 그 역할을 해주는 게 바로 클래스이다. class Student { // 필드 name; age; grade; // 생성자 construct(name, age, grade) { this.name = name; this.age = age; this.gr..

[TypeScript] 객체의 타입을 정의할 때 쓰면 좋은 interface
TypeScript 2023. 7. 28. 14:18

인터페이스(interface)란? interface Person { name: string; age: number; } interface란 상호 간에 정의된 규칙이라는 뜻으로 타입스크립트에서는 객체의 타입을 지정할 때 많이 사용한다. 기존에 배운 type 선언처럼 interface를 선언할 때도 같은 방식으로 선언해준다. 일반적으로 interface는 객체의 타입을 정할 때 사용되며, 확장 기능이나 선업 병합과 같은 기능들로 인해서 객체를 정의할 때 interface 선언을 사용하는 것이 보편적이다. 또한, 선언을 할 때 '='를 사용하지 않고 바로 중괄호를 열어서 사용한다는 점도 type과의 차이점이라고 할 수 있다. 사용 방법 interface Person { name: string; age?: nu..