💡 유틸리티 타입이란유틸리티 타입이란 타입스크립트가 자체적으로 제공하는 특수한 타입입니다. 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용하여 자주 사용되는 유용한 타입들을 모아 놓은 것을 의미합니다.  이번 게시글에서 살펴볼 유틸리티 타입들은 다음과 같습니다.    💡 맵드 타입 기반의 유틸리티 타입• PartialPartial은 부분적인 또는 일부분의 라는 뜻으로, Partial는 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입입니다.  interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string;}const draft: Post = { // ❌ tags 프로퍼티가..

💡 조건부 타입• 조건부 타입의 정의조건부 타입은 extends와 삼항 연산자를 통해 조건에 따라 각각 다른 타입을 정의하도록 돕는 문법입니다.  type A = number extends string ? string : number;조건부 타입은 number extends string ? 과 같은 조건식이 있고 이 조건이 참이라면 ? 바로 다음에 위치한 타입인 string 타입이 결과가 되고, 거짓이라면 그 다음 타입인 number 타입이 결과가 됩니다. 현재 위 조건부 타입의 조건식은 number 타입이 string 타입의 서브타입이 아니기 때문에 거짓이 되고 그 결과 타입 A는 number 타입이 됩니다.  type ObjA = { a: number;};type ObjB = { a: numbe..

https://shyunu.tistory.com/55 [ TypeScript ] 타입 조작하기(1): 인덱스드 액세스 타입, keyof & typeof 연산자💡 타입 조작타입을 조작한다는 것은 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 타입스크립트의 강력한 기능입니shyunu.tistory.com이어서 타입을 조작하는 방법을 정리해보겠습니다. 💡 맵드 타입맵드 타입은 기존의 객체 타입을 기반으로 새로운 객체 타입을 만들어내는 기능입니다.  // 맵드 타입interface User { id: number; name: string; age: number;}// 1명의 유저 정보를 불러오는 기능function fetchUser():..

💡 타입 조작타입을 조작한다는 것은 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 타입스크립트의 강력한 기능입니다. 타입스크립트에서는 제네릭 이외에도 다양한 타입 조작 기능을 제공합니다.   타입을 조작하는 방법에는 다음과 같이 4가지의 방법이 있습니다. 이번 게시물에서는 '인덱스드 엑세스 타입'과 'keyof & typeof 연산자'에 대해 먼저 설명하고 다음 게시물에서 나머지 두가지 방법에 대해 다루겠습니다.  ⓵ 첫번째로 살펴볼 타입 조작 기능은 객체, 배열, 튜플 타입으로부터 특정 프로퍼티나 특정 요소의 타입만 추출하는 인덱스드 액세스 타입입니다.  ⓶ 두번째로는 객체 타입으로부터 해당 타입 내에 정의된 프로퍼티의 키들을 유니온 ..

💡 제네릭 인터페이스• 인터페이스에 제네릭 적용하기interface KeyPair { key: K; value: V;}제네릭은 인터페이스에도 적용할 수 있습니다. 다음과 같이 키페어를 저장하는 객체의 타입을 제네릭 인터페이스로 정의했습니다.   let keyPair: KeyPair = { key: "key", value: 0,};let keyPair2: KeyPair = { key: true, value: ["1"],};변수 keyPair의 타입으로 KeyPair를 정의했습니다. 그 결과 K에는 string, V에는 number 타입이 각각 할당되어 key 프로퍼티는 string 타입이고, value 프로퍼티에는 number 타입인 객체 타입이 됩니다.  변수 KeyPair2의 타입으로 Ke..

💡 제네릭이란 ?• 제네릭이 필요한 상황 (any, unknown)제네릭이란 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어주는 타입스크립트의 기능입니다.   function func(value: any) { return value;}let num = func(10); // any 타입let str = func("string"); // any 타입다음과 같이 다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수가 하나 있다고 가정하겠습니다. 일단 다양한 타입의 매개변수를 제공받아야 하기 때문에 매개변수 value의 타입을 any 타입으로 임시로 지정하였습니다.  이 함수는 인수로 전달한 값을 그냥 그대로 반환하는 단순한 함수입니다. 따라서 변수 num에..

💡 JavaScript의 클래스클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법입니다.  let studentA = { name: "수현", grade: "A+", age: 27, study() { console.log("열심히 공부하자!"); }, introduce() { console.log("안녕하세요!"); },};학생을 객체로 표현한다면 다음과 같이 작성할 수 있습니다.  let studentA = { name: "수현", grade: "A+", age: 27, study() { console.log("열심히 공부하자!"); }, introduce() { console.log("안녕하세요!"); },};let studentB = { ..

💡인터페이스• 인터페이스란 ?인터페이스란 타입 별칭과 동일하게 타입에 이름을 지어주는 문법입니다.   interface Person { name: string; age: number;}const person: Person = { name: "수현", age : 27};이와 같이 Person 객체의 타입을 정의한다면 이렇게 정의한 인터페이스를 타입 주석과 함께 사용하여 변수의 타입을 정의할 수 있습니다. 이렇게 인터페이스는 타입 별칭과 문법만 조금 다를 뿐 기본적인 기능은 거의 같습니다.  • 선택적 프로퍼티interface Person { name: string; age?: number;}const person: Person = { name: "수현", // age : 27};인터페이스에..

💡 함수 오버로딩합수의 오버로딩이란 하나의 함수를 매개변수의 개수나 타입에 따라 다르게 동작하도록 만드는 문법입니다. 하나의 함수명을 func이고 모든 매개변수의 타입을 number라고 가정합니다. 저는 2가지 버전의 함수를 만들어보려고 합니다. ⓵ 매개변수가 1개일 때 매개변수에 20을 곱한 값을 출력하는 함수⓶ 매개변수가 3개일 때 모든 매개변수를 더한 값을 출력하는 함수  function func(a: number): void;function func(a: number, b: number, c: number): void; 타입스크립트에서 함수 오버로딩을 구현하기 위해서는 먼저 다음과 같이 버전별 오버로드 시그니쳐를 만들어 주어야 합니다. 이렇게 구현부 없이 선언부만 만들어둔 함수를 오버로드 시그니..