티스토리

김기지의 코딩노트

검색하기

블로그 홈

김기지의 코딩노트

princesskiji.tistory.com/m

김기지 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[TypeScript] 유틸리티 타입 - 맵드 타입 기반의 유틸리티 타입 🐰 유틸리티 타입 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것 🐰 맵드 타입 기반의 유틸리티 타입 1. Partial partial 부분적인, 일부분의 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 변환하는 타입 interface Post { title: string; tag: string[]; content: string; thumbnailURL?: string; } const draft: Partial = { title: '제목 나중에 짓자', content: '초안...', } 타입 Post는 thumbnailURL 프로퍼티를 제외한 다른 프로퍼티는 선택적 프로퍼티가 아니다. 하지만 변수 draft는 Partial 유틸리티.. 공감수 0 댓글수 0 2023. 9. 26.
[TypeScript] infer 목차 🐶 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.. 공감수 0 댓글수 0 2023. 9. 25.
[TypeScript] 분산적인 조건부 타입 🐶 분산적인 조건부 타입 유니온 타입과 함께 사용할 때 조건부 타입이 분산적으로 동작하는 문법 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 타입의 인자를 넘김 -> 조건이 거짓이므로.. 공감수 0 댓글수 0 2023. 9. 25.
[TypeScript] 조건부 타입 🐶 조건부 타입 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; // .. 공감수 0 댓글수 0 2023. 9. 25.
[TypeScript] 타입 조작 - 템플릿 리터럴 타입 🐾 타입 조작 🐾 템플릿 리터럴 타입 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 타입.. 공감수 0 댓글수 0 2023. 9. 23.
[TypeScript] 타입 조작 - 맵드 타입 🐾 타입 조작 🐾 맵드 타입 기존의 객체 타입을 기반으로 새로운 객체 타입을 만드는 타입 조작 기능 interface User { id: number; name: string; age: number; } // 한 명의 유저 정보를 불러오는 기능 function fetchUser(): User{ return { id: 1, name: '기지', age: 27, } } // 한 명의 유저 정보를 수정하는 기능 function updateUser(user: User){ // 수정하는 기능 } 유저 정보를 관리하는 프로그램의 일부를 만든다고 가정하자. 유저 정보가 서버에 저장되어 있다고 가정하고, 한 명의 유저 정보를 불러오는 기능을 하는 함수를 만들었다. 또, 한 명의 유저 정보를 수정하는 기능을 만들어 준다.. 공감수 0 댓글수 0 2023. 9. 22.
[TypeScript] 타입 조작 - keyof 연산자 🐾 타입 조작 🐾 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 연산자를 이.. 공감수 0 댓글수 0 2023. 9. 22.
[TypeScript] 타입 조작 - 인덱스드 엑세스 타입 🐾 타입 조작 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 기능 제네릭 또한 타입을 조작하는 기능에 포함이 된다. 🐾 인덱스드 엑세스 타입 인덱스를 이용해 다른 타입 내의 특정 프로퍼티의 타입을 추출하는 타입 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를 .. 공감수 0 댓글수 0 2023. 9. 18.
[TypeScript] 프로미스와 제네릭 🧀 자바스크립트에서의 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는 제네.. 공감수 0 댓글수 0 2023. 9. 16.
[TypeScript] 제네릭 클래스 🍞 제네릭 클래스 클래스의 이름 뒤에 타입 변수를 선언하면 제네릭 클래스가 된다. 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.. 공감수 0 댓글수 0 2023. 9. 15.
[TypeScript] 제네릭 인터페이스와 제네릭 타입 별칭 🌿 제네릭 인터페이스 제네릭은 인터페이스에서도 적용이 가능하다. 인터페이스에 타입 변수를 선언해 사용하면 제네릭 인터페이스가 된다. interface KeyPair{ key: K; value: V; }; 키페어를 저장하는 객체의 타입을 제네릭 인터페이스로 정의 제네릭 인터페이스는 제네릭 함수와는 달리 변수의 타입으로 정의할 때 반드시 꺽쇠와 함께 타입 변수에 할당할 타입을 명시해야 한다. 제네릭 함수는 매개변수에 제공되는 값의 타입을 기준으로 타입 변수의 타입을 추론할 수 있지만 인터페이스는 마땅히 추론할 수 있는 값이 없기 때문이다. let keyPair: KeyPair ={ key: 'key', value: 0, }; let keyPair2: KeyPair = { key: true, value: ['.. 공감수 0 댓글수 0 2023. 9. 15.
[TypeScript] map, forEach 메소드 타입 정하기 🤖 map 메소드 타입 정하기 map 원본 배열의 각 요소에 콜백함수를 수행하고 반환된 값들을 모아 새로운 배열로 만들어 반환한다. const arr = [1, 2, 3]; let newArr = arr.map((el) => el*2); // [2, 4, 6] map에 ctrl(또는 command)카를 누른 상태로 클릭을 하면 배열에 관련된 메소드가 정의되어 있는 파일이 열린다. map(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[]; 콜백 함수의 타입은 함수 타입 표현식으로 정의되어 있는 복잡한 모습이다. 이를 직접 구현해보자. 🤖 map 메소드 직접 만들기 1. 제네릭 함수가 아닌 일반적인 함수 만들기 functi.. 공감수 0 댓글수 0 2023. 9. 14.
[TypeScript] 제네릭 함수와 타입 변수 🐼 제네릭 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 기능 매개변수를 받아 그대로 반환하는 함수를 만들어보자. function func(value: any) { return value; } let num = func(10); // any 타입 let str = func("string"); // any 타입 num은 숫자 타입을, str은 문자열 타입의 값을 가지지만 커서를 대보면 모두 any타입이 된다. 이는 func 함수의 반환값이 return 문을 기준으로 추론되었기 때문이다. 이러한 경우 각 변수는 any 타입이기 때문에 num.toFixed 와 같이 숫자 타입에 string 타입의 메소드를 사용해도 타입스크립트가 오류를 감지하지 못하게 된다. 이 코드는.. 공감수 1 댓글수 1 2023. 9. 13.
[TypeScript] 인터페이스와 클래스 👒 인터페이스를 구현하는 클래스 타입스크립트의 인터페이스는 클래스의 설계도 역할을 할 수 있다. 인터페이스를 이용해 클래스에 어떤 필드들이 존재하고, 어떤 메소드가 존재하는 지 정의할 수 있다. interface CharacterInterface{ name: string; moveSpeed: number; move(): void; } // CharacterInterface가 정의한 타입의 객체를 클래스가 생성하도록 하기 // implements(구현하다) class Character implements CharacterInterface{ // 인터페이스는 public 필드만 정의할 수 있음 // -> private, protected 설정 불가능 // private하거나 protected한 필드가 필요한.. 공감수 0 댓글수 0 2023. 9. 11.
[TypeScript] 접근 제어자 🍊 접근 제어자 Access Modifier 타입스크립트에서만 제공되는 기능으로 클래스의 특정 필드나 메소드에 접근할 수 있는 범위를 설정하는 기능이다. 3개의 접근 제어자 public : 모든 범위에서 접근 가능 private : 클래스 내부에서만 접근 가능 protected : 클래스 내부 또는 파생 클래스 내부에서만 접근 가능 🍊 public 어디서든지 해당 프로퍼티에 접근할 수 있음을 의미히며 필드의 접근 제어자를 지정하지 않을 경우 기본값으로 설정된다. class Employee { // 필드 name: string; // 자동으로 public age: number; // 자동으로 public public position: string; // 직접 명시 가능 // 생성자 constructor(n.. 공감수 0 댓글수 0 2023. 9. 9.
[TypeScript] 타입스크립트의 클래스 🥕 자바스크립트의 클래스 ... 들어가기 전에 더보기 먼저 자바스크립트의 클래스를 알아보기 위해 js 파일을 하나 만들어준다. js파일을 만들면 tsconfig.json 파일에 오류메세지가 뜬다. 이는 컴파일러가 타입스크립트 파일이 아닌 자바스크립트 파일가 생성되었음을 인지해 오류를 알려주는 것이다. 이를 해결하기 위해 '자바스크립트도 허용해라' 라는 의미로 "allowJs"옵션을 허용해준다. "compilerOptions": { ... "allowJs": true, }, 클래스 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법 let studentA = { name: '기지', grade: 'A+', age: 27, study(){ console.log('열심히 함'); } , introduce(.. 공감수 0 댓글수 0 2023. 9. 7.
[TypeScript] 인터페이스 선언 합침 🎃 인터페이스 선언 합침 타입 별칭은 동일한 스코프 내에 중복된 이름으로 선언할 수 없지만 인터페이스는 가능하다. 인터페이스는 중복된 이름의 인터페이스 선언은 모두 하나로 합치기 때문에 중복된 이름으로 선언이 가능하다. // 타입 별칭은 동일한 스코프 내에 중복된 이름으로 선언 불가능 type Person = { // ❌ name: string; }; type Person = { // ❌ age: number; }; // 인터페이스는 중복된 이름으로 선언 가능 interface Person { name: string; }; interface Person { age: number; }; // -> 중복된 이름의 인터페이스 선언은 모두 하나로 합쳐지기 때문 // 즉, 위에서 선언한 Person 인터페이스들은.. 공감수 0 댓글수 0 2023. 9. 5.
[TypeScript] 인터페이스 확장 👾 인터페이스 확장 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 프로퍼티를 정의하지 않도록 도와주는 문법 interface Animal { name: string; age: number; } interface Dog { name: string; age: number; isBark: boolean; } interface Cat { name: string; age: number; isScratch: boolean; } interface Chicken { name: string; age: number; isFly: boolean; } 각 타입들은 Animal 타입을 기반으로 각각 추가적인 프로퍼티를 갖고 있다. 모든 타입에는 name, age 프로퍼티가 중복해서 정의되어 있어 Animal 타입의 프.. 공감수 0 댓글수 0 2023. 9. 5.
[TypeScript] 인터페이스 ⚡️ 인터페이스 상호간에 약속된 규칙 타입에 이름을 지어주는 또 다른 문법 + 객체의 구조를 정의하는 데 특화된 문법으로 타입 별칭에서는 제공하지 않는 상속, 합침 등의 특수한 기능을 제공한다. interface Person { readonly name: string; age?: number; }; const person:Person = { name: 'kiji', // age: 28, -> 선택적 프로퍼티 }; person.name = '기지'; // ⚡️❌ -> 읽기전용으로 재할당이 불가능 인터페이스를 정의하고 타입 주석과 함께 사용해 변수의 타입을 정의하며 기본적인 기능을 타입 별칭과 거의 같다. ⚡️ 메소드 타입 함수 타입 표현식을 이용하거나 호출 시그니쳐를 이용해 메소드 타입을 정의한다. int.. 공감수 0 댓글수 0 2023. 9. 4.
[TypeScript] 사용자 정의 타입가드 🐳 사용자 정의 타입가드 참 또는 거짓을 반환하는 함수를 이용해 개발자의 입맛대로 타입 가드를 만들 수 있도록 도와주는 문법이다. type Dog = { name: string; isBark: boolean; }; type Cat = { name: string; isScratch: boolean; }; type Animal = Dog | Cat; function warning(animal: Animal){ // 타입 좁히기 if("isBark" in animal){ // 강아지의 경우 animal } else if("isScratch" in animal){ // 고양이의 경우 } } (타입을 수정할 수 없다고 가정할 때)in 연산자를 이용해 타입을 좁히는 방식을 사용한다. 조건문을 통해 타입이 좁혀지면 .. 공감수 0 댓글수 0 2023. 9. 4.
[TypeScript] 함수 오버로딩 🌻 함수 오버로딩 타입스크립트에서만 지원되는 기능 함수를 매개변수의 개수나 타입에 따라 다르게 동작하도록 만드는 문법이다. 오버로드 시그니쳐 함수 오버로딩을 하기 위해서는 함수에 어떤 버전들이 있는지 알려주어야 한다. 함수 구현부가 없이 함수 선언식으로 표시하며 이를 오버로드 시그니쳐라 한다. // 함수 구현부가 없이 선언식만 써놓음 -> 오버로드 시그니쳐 function func(a: number): void; function func(a: number, b: number, c: number): void; func 함수는 매개변수를 1개 받는 버전과 3개 받는 총 2개의 버전이 있다는 것을 알려준다. 구현 시그니쳐 함수가 실제로 어떻게 실행될 것인지를 정의한 부분을 구현 시그니쳐라 한다. // 함수의 .. 공감수 0 댓글수 0 2023. 9. 2.
[TypeScript] 함수 타입의 호환성 🍫 함수 타입의 호환성 특정 함수 타입을 다른 함수 타입으로 괜찮은지 판단하는 것 타입 호환성을 판단하는 기준 2가지를 모두 만족해야만 함수 타입 호환성이 가능하다. 두 함수의 반환값 타입이 호환되는가? 두 함수의 매개변수의 타입이 호환되는가? 기준 1. 반환값 타입이 호환되는가? type A = () => number; type B = () => 10; let a:A = () => 10; let b:B = () => 10; a = b; // number타입은 number literal 타입의 슈퍼 타입으로 다운 캐스팅 불가능 b = a; // ❌ // 즉, 반환값끼리의 다운 캐스팅이 되면 안됨 타입 A의 반환값은 number, 타입 B의 반환값은 number literal으로 A 반환값 타입이 B 반환.. 공감수 0 댓글수 0 2023. 9. 2.
[TypeScript] 함수 타입 표현식과 호출 시그니쳐 🍪 함수 타입 표현식 함수 타입을 타입 별칭과 함께 별도로 정의할 수 있다. type Add = (a:number, b:number) => number; const add:Add = (a, b):number => a+b; 함수 타입 표현식을 이용하면 함수 선언 및 구현 코드와 타입 선언을 분리할 수 있어 유용하다. 여러개의 함수가 동일한 타입을 갖는 경우 함수 표현식을 이용해 간결하게 표현할 수 있다. // 함수 타입 표현식을 사용하면 좋은 예 // 여러개의 함수가 동일한 타입을 갖는 경우 type Operation = (a:number, b:number) => number; const add:Operation = (a,b) => a+b; const sub:Operation = (a, b) => a-b;.. 공감수 0 댓글수 0 2023. 8. 28.
[TypeScript] 함수 타입 🍔 함수 타입 정의하기 함수가 어떤 매개변수를 받고 어떤 값을 반환하는지를 알려준다. // 함수를 설명하는 가장 좋은 방법 // 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 이야기 // 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과값을 반환하는지 이야기 function func(a: number, b: number){ // 반환값의 타입은 return문을 추론하여 자동으로 설정되기 때문에 따로 선언하지 않아도 됨 return a+b; }; 즉, 어떤 타입의 매개변수를 받고 어떤 타입의 값을 반환하는지 이야기하면 된다. 함수의 반환값 타입은 자동으로 추론되기 때문에 생략이 가능하다. 🍔 화살표 함수 타입 정의하기 화살표 함수의 타입 정의 방식은 함수 선언식과 동일하다. const add = (.. 공감수 0 댓글수 0 2023. 8. 25.
[TypeScript] 서로소 유니온 타입 🍠 서로소 유니온 타입 교집합이 없는 타입들로만 만든 유니온 타입 type Admin = { name: string; kickCount: number; }; type Member = { name: string; point: number; }; type Guest = { name: string; visitCount: number; }; type User = Admin | Member | Guest; 회원의 역할 분류에 따라 타입을 각각 분류한 후 3 타입의 합집합 타입인 User 타입을 만들었다. 회원의 역할에 따라 각각 다른 기능을 수행하도록 하는 함수 login을 만들어본다면 function login(user: User) { if ("kickCount" in user) { // Admin consol.. 공감수 0 댓글수 0 2023. 8. 23.
[TypeScript] 타입 좁히기 🌽 타입 좁히기 조건문 등을 이용해 넓은타입에서 좁은타입으로 타입을 상황에 따라 좁히는 방법 조건문을 이용해 조건문 내부에서 변수가 특정 타입임을 보장하면(더 좁은타입임을 증명하면) 타입스크립트는 이 변수의 타입을 더 좁은타입으로 자동으로 추론한다. function func(value: number | string){ // 밖에서 value의 타입은 number | string으로 메소드를 사용할 수 없음 value; value.toFixed(); // ❌ value.toUpperCase(); // ❌ // value의 타입이 number -> toFixed()사용 if(typeof value === 'number'){ // 조건문 내부에서는 value의 타입이 number console.log(valu.. 공감수 0 댓글수 0 2023. 8. 18.
[TypeScript] 타입 단언 🍊 타입 단언 특정 값을 원하는 타입으로 단언할 수 있다. 특정 타입으로 정의된 변수에 빈 객체를 넣어두면 에러가 발생한다. type Person = { name:string; age:number; } let person:Person = {} // ❌ 빈 객체를 넣는 경우 에러 발생 이는 person 변수 안에 들어가야할 프로퍼티가 존재하지 않기 때문이다. 그렇다면 변수person을 타입을 정의하지 않고 빈 객체를 할당한 후에 나중에 프로퍼티를 초기화하는건 가능할까? // Person타입을 선언해주지 않으면 나중에 프로퍼티를 초기화할 때 에러 발생 let person ={}; // 초기값인 빈 객체를 기준값으로 추론하기 때문 person.name = "kiji"; // ❌ person.age = 27; .. 공감수 0 댓글수 0 2023. 8. 16.
[TypeScript] 타입 추론 타입 추론 타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론하는 타입스크립트의 기능 타입스크립트는 모든 변수에 일일이 타입을 정의하지 않아도 되는 편리함을 제공하지만 모든 상황에 타입을 잘 추론하는 것은 아니다. function func(param){ // 오류 } 함수의 매개변수 타입은 자동으로 추론이 불가능하다. 🥨 타입 추론이 가능한 상황 1. 변수 선언 일반적인 변수 선언의 경우 초기값을 기준으로 타입이 추론된다. // 변수의 초기값으로 타입을 추론 let a = 10; let b = "hello"; let c = { id:1, name: "기지", profile: { nickname: "kiji", }, urls:["https://kimkiji.com"], }; 2. 구조 분해 할당 객체와.. 공감수 0 댓글수 0 2023. 8. 15.
[TypeScript] 대수 타입 대수 타입 여러개의 타입을 합성해서 새롭게 만들어낸 타입 합집합 타입과 교집합 타입이 존재한다. 🍥 합집합 - Union 타입 바 | 를 이용하여 유니온 타입을 정의한다. let a:string | number; // string 타입과 number 타입을 모두 넣을 수 있음 a = 1; a = "hello"; // boolean 타입의 값도 넣고 싶다면 추가하기 let b:string | number | boolean; 유니온 타입으로 정의된 변수에는 구성된 타입의 어떠한 값도 넣을 수 있다. 유니온 타입에 참여하는 타입들의 개수에는 제한이 없으므로 원하는 타입을 모두 추가할 수 있다. 🍡 Union 타입으로 배열 타입 정의하기 배열 타입 또한 유니온 타입으로 다양한 요소를 담을 수 있다. let ar.. 공감수 0 댓글수 0 2023. 8. 11.
[TypeScript] 객체 타입의 호환성 🥐 객체 타입의 호환성 모든 객체 타입은 각각 다른 객체 타입들과 슈퍼-서브 타입 관계를 갖는다. 따라서 업 캐스팅은 허용하고 다운 캐스팅은 허용하지 않는다. type Animal = { name:string; color:string; }; type Dog = { name:string; color:string; breed:string; }; let animal:Animal = { name: "기린", color: "yellow", }; let dog:Dog ={ name: "만복이", color: "white", breed: "진도", }; // 업캐스팅 animal = dog; // 다운 캐스팅 dog = animal // ❌ Animal 타입의 변수 animal에 Dog 타입의 변수 dog를 할당하는.. 공감수 0 댓글수 0 2023. 8. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.