Notice
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- 오종택개발자님
- 출처 : 코딩앙마
- 흥달쌤
- 유틸리티타입은 공식문서 자주 보자
- 생코님Redux
- 함수형 코딩
- 클린코드다시읽기
- 쏙쏙들어오는함수형코딩
- 고등애플
- 출처는 코딩앙마
- 에릭노이먼
- 에릭 노먼드
- 큰돌의 CS책
- 쏙속 들어오는 함수형코딩
- 이웅모
- 갈길이 멀구나
- 김영한쌤
- 출처 : 코딩애플
- 로버트 C마틴
- 출처는 코딩애플
- 출처 : 자바스크립트 딥다이브
- 쏙쏙 들어오는 함수형코딩
- 쏙쏙 들어오는 함수형 코딩
- 나는 flux좋아...
- 출처 : 한입크기로 잘라먹는 타입스크립트
- 리엑트를 다루는 기술
- https://product.kyobobook.co.kr/detail/S000001952246
- 자바스크립트 딥다이브
- 에릭 노이먼
- 출처 : https://www.boostcourse.org/
Archives
- Today
- Total
흰둥씨의 개발장
[typescript] 유틸리티 타입(Utility type) 본문
Partial<T>
interface User{
id:number;
name:string;
age:number;
gender: "m" | "f";
}
/*
let admin :User = {
id:1,
name:"bob",
}
위와 같이 입력하면 age와 gender 속성을 입력하지 않아서 에러뜸
아래와 같이 partial을 이용하면 interface의 속성에 ?: (optional)로 지정한것 과 같음
*/
//interface User{
// id?:number;
// name?:string;
// age?:number;
// gender?: "m" | "f";
//}
let admin : Partial<User> = {
id:1,
name:"bob", //age랑 gender가 없어도 에러 안뜸
}
Required<T>
interface User{
id:number;
name:string;
age:number;
gender: "m" | "f";
}
let admin : Required<User> = { // Required는 <>안에 있는 내용을 모두 입력해줘야함
id:1,
name:"bob",
age:20,
gender:"f"
}
Readonly<T>
interface User{
id:number;
name:string;
age?:number;
}
let admin : Readonly<User> = { //Read-only속성
id:1,
name:"bob", //최초 할당은 가능
}
// admin.id = 4; 재할당 하려고 하면 에러남 admin을 Readonly 읽기전용으로 지정해서
Record<Key, Type>
/*
interface Score {
"1": "a" | "b" | "c" | "d";
"2": "a" | "b" | "c" | "d";
"3": "a" | "b" | "c" | "d";
"4": "a" | "b" | "c" | "d";
}
const score :Score = {
1:"a",
2:"d",
3:"c",
4:"b",
}
위와 같은 효과를 내기위해 아래와 같이 Record<키값, 타입값>활용가능
*/
type Grade = "1" | "2" | "3" | "4";
type Score = "a" | "b" | "c" | "d";
const score :Record<Grade, Score> = {
1:"a",
2:"d",
3:"c",
4:"b",
}
interface User {
id:number;
name:string;
age:number;
}
function isValid (user:User){ //유효한값을 입력했는지 확인하는 함수
const result: Record<keyof User, boolean> = { //result는 User의 키를 키값으로 그대로 이용하고, 반환타입은 불린
id : user.id >0,
name: user.name !== "",
age: user.age > 0,
}
return result;
}
Pick<type, key>
interface User {
id:number;
name:string;
age:number;
gender: "m" | "w";
}
const admin : Pick <User, "id" | "name"> = { //Pick을 이용해서 User의 id와 name속성만을 취함
id:0,
name:'kim',
}
Omit<type, key>
interface User {
id:number;
name:string;
age:number;
gender: "m" | "w";
}
const admin : Omit <User, "age" | "gender"> = { //Omit을 이용해서 User의 age와 gender속성만 빼고 이용
id:0,
name:'kim',
}
Exclude<Type1, Type2>
ㄴType1에서 Type2를 제외하고 사용함
type T1 = string | number | boolean ;
type T2 = Exclude<T1, number>; //T2는 string | boolean 로 사용
type T3 = Exclude<T1, number | boolean>; //T3는 string만 사용
NonNullable<Type>
ㄴNull, undefined를 제외한 값을 생성함
type T1 = string | number | boolean | void | undefined | null ;
type T2 = NonNullable<T1>; //T2는 string | number | boolean | void 사용중
https://www.typescriptlang.org/
JavaScript With Syntax For Types.
TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.
www.typescriptlang.org
'[오늘의 공부] > typescript' 카테고리의 다른 글
[typescript] react에 적용하기 (0) | 2023.06.22 |
---|---|
[typescript] Generic (0) | 2023.06.16 |
[typescript] 클래스 (0) | 2023.06.15 |
[typescript] 리터럴과 유니온/교차 타입 (0) | 2023.06.15 |
[typescript] 함수 (2) | 2023.06.15 |