강의 실습159 유틸리티 타입 소개 한 입 크기로 잘라먹는 타입스크립트 - 유틸리티 타입 (Utility Types) 1. 유틸리티 타입 타입스크립트가 자체적으로 제공하는 특수한 타입들. 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것. 예시) Readonly : 타입 변수로 전달한 객체 타입의 모든 프로퍼티를 readonly 프로퍼티로 바꿔준다. Partial : 타입 변수로 전달한 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔준다. 타입스크립트가 제공하는 다양한 유틸리티 타입 : https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility TypesTypes which.. 2024. 12. 22. infer - 조건부 타입 내에서 타입 추론하기 한 입 크기로 잘라먹는 타입스크립트 - infer (Inference(추론)) 1. infer 조건부 타입 내에서 특정 타입만 추론해올 수 있는 기능. 조건식을 참으로 만드는 특정 타입을 추론한다. infer 다음으로 오는 타입을 추론하지 못하는 경우에는 조건식이 거짓이 된다. - chapter2.ts/** * infer * innference -> 추론하다 */// 함수 타입 정의type FuncA = () => string;type FuncB = () => number;// 조건부 타입 + infer 정의type ReturnType = T extends () => infer R ? R : never;// 타입 추론 예제type A = ReturnType; // string typetype B = Re.. 2024. 12. 21. 분산적인 조건부 타입 한 입 크기로 잘라먹는 타입스크립트 - 분산적인 조건부 타입 (Distributive Conditional Types) 1. 분산적인 조건부 타입 조건부 타입을 유니온과 함께 사용할 때, 분산적으로 동작하게 되는 문법. 조건부 타입의 동작 방식이 바뀌게 된다. 유니온 타입으로 타입 변수를 전달하면, 한 번에 유니온 타입을 전달하는 것이 아닌 한 번씩 각 타입변수를 전달하게 된다. 그리고 그 타입들이 유니온으로 묶이게 된다. 쉽게 말해 유니온 타입의 모든 멤버 타입들이 분리가 되고, 분리된 결과들을 각각 유니온으로 다 묶어준다. - chapter1.ts/** * 분산적인 조건부 타입 */// 제네릭과 조건부 타입 예시type StringNumberSwitch = T extends number ? strin.. 2024. 12. 17. 조건부 타입 소개 한 입 크기로 잘라먹는 타입스크립트 - 조건부 타입 (Conditional Types) * 실습 환경설정 section9 폴더를 생성한 뒤, section8 폴더에서 사용했던 package-lock.json, package.json, tsconfig.json 파일을 복사하여 section9 폴더에 붙여넣는다. 이후 package.json 파일에서 'name' 부분 값을 'section9' 로 수정한다. - package.json{ "name": "section9", ...}이후 터미널에서 'npm i' 명령어를 입력하여 package.json 의 'dependencies' 에 명시된 외부 패키지들을 일괄적으로 설치한다. - Terminalnpm i added 2 packages, and audi.. 2024. 12. 16. 템플릿 리터럴 타입 한 입 크기로 잘라먹는 타입스크립트 - 템플릿 리터럴 타입 (Template Literal Type) 1. 템플릿 리터럴 타입 스트링 리터럴 타입들을 기반으로 특정 패턴을 갖는 문자열 타입들을 만드는 기능. - chapter3.ts/** * 템플릿 리터럴 타입 */type Color = 'red' | 'black' | 'green';type Animal = 'dog' | 'cat' | 'chicken';// type ColoredAnimal = 'red-dog' | 'red-cat' | 'red-chicken' | 'black-dog' ... // 굉장히 많아진다.type ColoredAnimal = `${Color}-${Animal}`;const coloredAnimal: ColoredAnimal = .. 2024. 12. 15. 맵드 타입 한 입 크기로 잘라먹는 타입스크립트 - 맵드 타입 (Mapped Type) 1. 맵드 타입 특정 객체 타입을 원하는데로 변환이 가능하기 때문에, 하나의 객체 타입으로 다양한 상황에 대처가 가능하다. 주의할 점은, 맵드 타입은 인터페이스에서는 쓸 수 없기 때문에 타입 별칭으로만 사용해야 한다. 활용도가 굉장히 높고 실무에서도 자주 쓰이는 타입이다. - chapter2.ts/** * 맵드 타입 */interface User { id: number; name: string; age: number;}// 한 명의 유저 정보를 불러오는 기능function fetchUser(): User { // ... 기능 return { id: 1 , name: '송진성' .. 2024. 12. 10. keyof 연산자 한 입 크기로 잘라먹는 타입스크립트 - keyof 연산자 (Keyof Operator) 1. keyof 연산자 해당 객체 타입의 모든 프로퍼티의 key 를 유니온 타입으로 추출. 무조건 타입에만 사용할 수 있는 연산자. - chapter1.ts/** * keyof 연산자 */interface Person { name: string; age: number;}function getPropertyKey(person: Person, key: keyof Person) { // keyof Person : 'name' | 'age' return person[key];}const person: Person = { name: '송진성' , age: 31};getPropertyKey(person, .. 2024. 12. 9. 인덱스드 엑세스 타입 한 입 크기로 잘라먹는 타입스크립트 - 인덱스드 엑세스 타입 (Indexed Access Type) 1. 인덱스드 엑세스 타입 인덱스를 이용하여 다른 타입 내에 특정 프로퍼티의 타입을 추출하는 타입. (특정 프로퍼티 타입을 뽑아서 변수에 정의해줄 수 있도록 도와줌) 1) 객체- chapter0.ts/** * 인덱스드 엑세스 타입 */// 객체interface Post { title: string; content: string; author: { id: number; name: string; age: number; };}// function printAuthorInfo(author: { id: number; name: string; age: num.. 2024. 12. 4. 타입 조작하기 한 입 크기로 잘라먹는 타입스크립트 - 타입 조작하기 1. 타입 조작하기 기본타입, 별칭, 인터페이스로 만든 타입들을 타입스크립트의 특수한 문법을 이용하여 상황에 따라 다른 타입으로 변환하는 기능. - 원래 존재하던 타입interface { a: string; b: stirng; c: string;} - 새로운 타입interface { a: string | number; b: stirng | number; c: string | number;}타입 조작하기 종류) 제네릭 V 인덱스드 엑세스 타입 V keyof 연산자 V Mapped(맵드) 타입 V 템플릿 리터럴 타입 조건부 타입 이번 섹션 8 에서 다룰 것들만 V 체크 표시.1) 인덱스드 엑세스 타입 객체, 배열, 튜플 타.. 2024. 12. 3. 이전 1 2 3 4 5 ··· 18 다음