Front-end/TypeScript

📍 https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 1. 유틸리티 타입이란? 유틸리티 타입이란 타입스크립트가 자체적으로 제공하는 특수한 타입들이다. 제네릭, 맵드 타입, 조건부 타입등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 유용한 타입들을 모아 놓은 것이다. 💡 가장 자주 활용되는 유틸리티 타입 2. 맵드 타입 기반 2.1 Partial 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 변환 기존 객체 타입에 정의된 프로퍼티들 중 일부분만 사용할 수..

1. 조건부 타입 type A = number extends string ? number : string; 조건부 타입은 extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 정의하도록 돕는 문법이다. number extends string 조건식이 참이라면 number 타입, 거짓이면 string 타입이된다. number extends string은 number 타입이 string 타입의 서브 타입이 아니기 때문에 거짓이 되고 type A는 string 타입이된다. type ObjA = { a: number; }; type ObjB = { a: number; b: number; }; type B = ObjB extends ObjA ? number : string; 다른 예제로 조건식에 객..

1. 타입 조작이란? 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 기능 제네릭 또한 타입 조작 기능에 포함된다. 제네릭 이외의 다양한 타입 조작기능이 있다. 2. 인덱스드 엑세스 타입 인덱스를 이용해 다른 타입내의 특정 프로퍼티의 타입을 추출하는 타입 객체, 배열, 튜플에 사용할 수 있다. 2.1 객체 프로퍼티의 타입 추출하기 만약 게시글을 표현하는 객체 타입과 게시글 변수가 있다고 가정하자. 게시글에서 작성자의 이름과 아이디를 붙여 출력하는 함수도 존재해야한다. interface Post { title: string; content: string; author: { id: number; name: string; age: number; ..

1. 제네릭이란 제네릭이란 함수, 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 기능이다. 1.1 제네릭은 언제 필요할까 function func(value: any) { return value; } let num = func(10); // any 타입 let str = func("string"); // any 타입 num.toUpperCase(); func 함수는 인수로 전달한 값을 그대로 반환하는 함수이다. 즉, 10을 전달하면 10이 "string"을 전달하면 "string"이 저장된다. 하지만 func 함수는 any 타입이 된다. 왜냐하면 반환값 타입이 return 문을 기준으로 추론되었지 때문이다. 이때 10 숫자가 저장되어있는 num에 toUpperCase와 ..

1. 함수의 타입을 정의하는 방법 // 함수를 설명하는 가장 좋은 방법 // 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 설명 function func(a, b) { return a + b; } function func(a: number, b: number): number { return a + b; } // 생략가능 function func(a: number, b: number) { return a + b; } 타입스크립트의 함수는 어떤 타입의 매개변수를 받고 어떤 타입의 값을 반환하는지 정의해주면 된다. 반환값 타입은 자동으로 추론되기 때문에 생략이 가능하다. 1.1 화살표 함수 타입 const add = (a: number, b: number): number => a + b; // 생략 가능 c..

1. 타입 추론이란? let a = 10; // number 타입으로 추론 타입스크립트는 타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론한다. 이것을 타입 추론 이라고한다. 즉, 모든 변수에 일일이 타입을 정의하지 않아도 된다. function func(param){ // 오류 } 하지만 모든 상황에 타입을 추론할 수 있는건 아니다. 함수의 매개변수 타입은 자동으로 추론할 수 없다. 타입 추론이 불가능한 변수에는 암시적으로 any 타입이 추론된다. → 엄격한 타입 검사 모드에서는 이런 any 타입의 추론을 오류로 판단한다. 2. 타입 추론이 가능한 상황들 2.1 변수 선언 let a = 10; // number 타입으로 추론 let b = "hello"; // string 타입으로 추론 let c..