프로그래밍/TypeScript10 유틸리티 타입 유틸리티 타입 맵드 타입 기반의 유틸리티 타입 1 - Partial, Required, Readonly /** * Partial * -> 부분적인, 일부분의 * -> 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입 */ interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string; } type Partial = { [key in keyof T]?: T[key]; }; const draft: Partial = { title: "제목 제목", content: "초안 ...", }; /** * Required * -> 필수의, 필수적인 * -> 특정 객체 타입의 모든 프로퍼티를 필수 프로퍼티로 바꿔.. 2023. 10. 26. 조건부 타입 조건부 타입 조건부 타입 소개 /** * 조건부 타입 */ // 앞에 있는 타입이 뒤에 있는 타입의 서브 타입인지 확인해서 맞다면 ? 뒤, 틀리다면 : 뒤 타입 할당 type A = number extends string ? string : number; type ObjA = { a: number; }; type ObjB = { a: number; b: number; }; type B = ObjB extends ObjA ? number : string; /** * 제네릭과 조건부 타입 */ type StringNumberSwitch = T extends number ? string : number; let varA: StringNumberSwitch; let varB: StringNumberSwitch;.. 2023. 10. 24. 타입 조작하기 타입 조작하기 인덱스트 엑세스 타입 /** * 인덱스드 엑세스 타입 * 인덱스를 이용해 다른 타입내의 특정 프로퍼티 타입을 추출하는 타입 * 객체, 배열, 튜플에 사용 가능 */ type PostList = { title: string; content: string; author: { id: number; name: string; age: number; location: string; }; }[]; // 아래와 같은 코드로 Post[key] 대체하면 오류, Post["author"]에는 오로지 타입만 명시할 수 있다. // const key = "author"; // Post["author"]["id"] 중첩으로 대괄호도 쓸 수 있다 // 인덱스드 엑세스 타입을 이용할 때 대괄호 안에 number 타입을.. 2023. 10. 24. 타입스크립트 제네릭 제네릭 제네릭 소개 /** * 제네릭 * = 일반적인 * 모든 타입에 두루두루 쓸 수 있는 범용 (함수) */ // 제네릭 함수 // 함수에 인수에 따라서 반환값의 타입을 가변적으로 정해줄 수 있다! function func(value: T): T { return value; } let num = func(10); let bool = func(true); let str = func("string"); let arr = func([1, 2, 3]); // let arr = func([1, 2, 3] as [number, number, number]); 타입 변수 응용하기 /** * 첫 번째 사례 */ function swap(a: T, b: U) { return [b, a]; } const [a, b] =.. 2023. 10. 23. 타입스크립트 클래스 클래스 자바스크립트의 클래스 소개 /** * 클래스 */ let studentA = { name: "이정환", grade: "A+", age: 27, study() { console.log("열심히 공부 함"); }, introduce() { console.log("안녕하세요!"); }, }; class Student { // 필드 name; grade; age; // 생성자 constructor(name, grade, age) { this.name = name; this.grade = grade; this.age = age; } // 메서드 study() { console.log("열심히 공부 함"); } introduce() { console.log(`안녕하세요! ${this.name}입니다!`); .. 2023. 10. 23. 타입스크립트 인터페이스 인터페이스 인터페이스 /** * 인터페이스 */ interface Person { readonly name: string; age?: number; sayHi(): void; sayHi(a: number, b: number): void; } const person: Person = { name: "Rachel", sayHi: function () { console.log("Hi"); }, }; person.sayHi(); person.sayHi(1, 2); 인터페이스 확장하기 /** * 인터페이스의 확장(상속) */ interface Animal { name: string; color: string; } interface Dog extends Animal { isBark: boolean; } const .. 2023. 10. 23. 이전 1 2 다음
