출처 : 이정환의 한 입 크기로 잘라먹는 TypeScript TypeScript 에서 자주 사용되는 유틸리티 타입을 정리해보겠습니다... 허허 유틸리티 타입이란 : 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 (실무에서) 자주 사용되는 타입을 미리 만들어 놓은 것.맵드(mapped) 타입 기반조건부 타입 기반Partial ExcludePick ExtractRequiredReturnTypeOmit Readonly Record  맵드 타입 기반 1. Partial - 부분적인 타입 만들기특정 객체 타입의 모든 프로퍼티를 선택적(`optional`) 로 바꿔주는 타입interface Post { title: string; tags: string[]; content: string; t..

출처 : 이정환의 한 입 크기로 잘라먹는 타입 스크립트1. 조건부 타입의 기본 개념조건부 타입 (Conditional Types) 는 `T extends U ? X : Y` 형태로,`T`가 `U`를 상속하는지 여부에 따라 다른 타입을 반환한다. type A = number extends string ? string : number; // number위에서 `number` 는 `string` 집합과 연관이 없으므로 `number` 가 결과로 나오게 됨. 2. 객체 타입을 활용한 조건부 타입객체 타입에서 특정 속성이 있는지 여부를 판단할 수 있다!type ObjA = { a: number;};type ObjB = { a: number; b: number;};type B = ObjB extends Obj..

출처: 이정환의 한 입 크기로 잘라먹는 타입스크립트 1. 인덱스드 엑세스 타입 (Indexed Access Type) : 객체 또는 배열에서 특정 요소의 타입을 가져오는데 사용됨.type PostList = { //interface 는 객체타입 정의에만 특화되어있기 때문에 배열을 정의하긴 불편 title: string; content: string; author: { id: number; name: string; age: number; };}[];function printAuthorInfo(author: PostList[number]["author"]) { //인덱스라고 부름 console.log(`${author.name}-${author.id}`);}const post..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트. 제네릭 인터페이스 & 제네릭 타입 별칭 정리. 제네릭 인터페이스 : 타입을 일반화 하여 다양한 타입을 받을 수 있는 인터페이스 interface KeyPair { key: K; value: V;}let keyPair: KeyPair = { key: "key", value: 0,};let keyPair2: KeyPair = { key: true, value: ["1"],};`KeyPair` : 제네릭 타입 변수 (`K`, `V`)를 사용해 다양한 타입을 저장할 수 있도록 정의.인덱스 시그니처 : 객체의 key-value 구조에서 key의 타입을 특정할 수 없을 때 사용interface NumberMap { [key: string]: num..

제네릭 (Generic) 함수란?  프로그래밍을 하다 보면 재사용성이 높은 코드가 필요할 때가 많은데,어떤 타입이든 받을 수 있는 범용적인 함수를 만들고 싶을 때 (any 같은 치트키 말고)그 때 제네릭 개념을 유용하게 사용한다. 1. 제네릭이란?타입을 변수처럼 사용할 수 있도록 도와주는 기능.즉, 함수를 선언할 때 특정 타입으로 고정하는 것이 아닌 어떤 타입이든 받을 수 있도록 유동적으로 설계할 수 있다. 예를 들어, func라는 제네릭 함수를 봐보자.// 제네릭 함수function func(value: T): T { return value;} 여기서 ``는 타입 변수로, 실제 함수가 호출될 때 전달된 값에 따라 타입이 결정된다. 2. 제네릭 함수 사용 예시 // 1.숫자 타입let num = fun..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트1. TypeScript의 클래스 (Class) TypeScript에서 클래스는 객체를 생성하는 템플릿 역할을 한다. JavaScript 는 객체 리터럴을 사용해서 객체를 생성할 수 있는데 이런 방식은 같은 구조의 객체를 여러 개 만들 때 불편함. 따라서 클래스를 활용하면 동일한 구조의 객체를 쉽게 생성할 수 있다.class Employee {// 필드 ( 속성 ) name: string; age: number; position: string; // 생성자 ( constructor ) constructor( name: string, age: number, position: string) { this.name = name; ..

인터페이스 (interface): TypeScript에서 객체의 구조를 정의하는 기능.클래스나 객체가 특정 솏성과 메서드를 포함하도록 강제할 수 있으며, 코드의 가독성과 유지보수성을 높이는 역할. 주요 특징 객체의 구조 (Shape)를 정의할 때 사용함수 시그니처 정의 가능`extends` 키워드를 통해 확장 (상속) 가능같은 이름의 인터페이스가 여러 번 선언되면 자동으로 병합됨 기본적인 인터페이스 선언  interface Person {   readonly name: string;   age?: number;   //sayHi: () => void; // 오버로딩을 구현할땐 함수 타입은 사용이 안됨   sayHi(): void; // 메소드의 오버로드 사용하고 싶을 땐 호출 시그니처로 작성해야 함.  ..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트 함수 오버로딩 ( Function OverLoading) 정리 함수 오버로딩이란 : 하나의 함수를 매개변수 개수 또는 타입에 따라 여러 개의 버전으로 정리하는 문법.같은 이름의 함수를 다양한 방식으로 호출할 수 있도록 함.C언어를 예시로 : 같은 함수 이름으로 매개변수의 개수만 다르게 사용하는 방법.//매개변수 없음void func() { printf("매개변수 없음");}// 매개변수 한개void func(int a) { printf("매개변수 없음");}// 매개변수 두 개void func(int a, int b) { printf("매개변수 없음");} 함수 오버로딩 구현 방법 1. 오버로드 시그니처 (Overload Signature)함수의 구현..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트서로소 유니온 타입 ( Disjointed Union Type ) 태그드 유니온(Tagged Union Type)라고 불린다: 교집합이 없는 완전히 다른 타입들을 하나의 유니온 타입으로 묶은 것. 서로소 유니온 타입의 특징1. 각 타입을 구별할 수있는 "태그" 필드 (`tag` 또는 `state` 등) 가 존재2. switch-case 문 또는 if-else 문으로 특정 타입을 쉽게 판별 가능. 예제 1. 사용자(user) 타입 type Admin = {  tag: "ADMIN";  name: string;  kickCount: number;};type Member = {  tag: "MEMBER";  name: string;  point: number..

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트타입 단언 ( Assertion )타입 스크립트에서 " 이 변수는 내가 원하는 타입이야! " 라고 선언하는 방법. `값 as 타입` 형식으로 사용한다.  1. 기본 타입 단언  type Person = {  name: String;  age: number;};let person = {} as Person; // person을 Person 타입이라고 단언 person.name = "땅콩하우스";person.age = 27;  빈 객체 `{}` 를 `Person` 타입이라고 단언했지만, 속성을 직접 추가해야 정상적으로 사용 가능함.2. 타입 단언의 규칙`A as B` 사용 시, A가 B의 슈퍼타입이거나 서브타입이어야 함.-> 즉 ,관련 없는 타입끼리는 단언..