[Typescript Study] 유틸리티 타입

Mayton·2022년 8월 7일
0

Javascript & Typescript

목록 보기
6/6

유틸리티 타입

  • 전역으로 사용 가능한 편리한 타입 변환 도구
  • 이해하고 사용하면 생산성 증가
  • 이해하기 위해 직접 만들고 직접 사용하면 이해도도 높아진다.

Partial

type PersonOpt = Partial<Person>

function getInfo(p: PersonOpt){
 return p
}

getInfo({name:"str"})

모든 속성을 ?가 붙어 필수가 아니게 된다.

required

interface Animal{
 name:string
 type?:string
}

type AnimalRequired = Required<Animal>

function getInfo(p:AnimalRequired){
 return p
}

모든 속성을 필수로 만들어 준다.

readonly

interface Animal{
 name:string
 type?:string
}
const animal : Readonly<Animal>={
 name:"Dog",
 type:"강아지"
}

animal.type= "고양이"
// 덮어씌우기 불가

console.log(animal)

읽기 전용으로 객체를 만들어줌

record

type Path= "home" | "order" | "cart";
interface pathURL{
 path:string
}

const navPath: Record<Path, PathURL>={
	home:{
     path:"/home"
   },
	order: {
     path:"/order"
   },
 	cart:{
     path:"/cart"
   },
}

union타입과 자주 비교가 됨 route를 만들 때 자주 사용
<key, type>의 형태로 Record 내 값을 작성 해 준다.

omit


interface Friends{
 name:string
 age:number
 tel:number
}

type BaseInfoFriends = Omit<Friends, "age">

const myFriends: BaseInfoFriends = {
 name:"친구",
 tel:010-1234-5678
}

불필요한 속성을 드러낼 때 주로 사용한다.

pick


interface Friends{
 name:string
 age:number
 tel:number
}

type NameAndTelPerson = Pick<Friends, "name"|"tel">

const me:NameAndTelPerson={
 name:"me",
 tel:119,
}

특정 속성에서 원하는 속성만 가져온다.

exclude

type Animal = "Man"|"Woman"|"Cat"|"Dog"

type Person = Exclude<Animal, "Cat"|"Dog">
type DogAndCat =Exclude<Animal, "Man"|"Woman">

type Example = Exclude<string|number|boolean,boolean>

Omit이랑 비슷하지만, union 타입을 위한 utility type , Exclude<타입, 제외할 유니온 멤버>

extract

type Example = Extract<"1"|"2"|"3", "3"|"4"|"5">
// "3"만 타입에 들어가게 된다.

type Example2 = Extract <stirng | number | boolean, boolean>

Extract<타입, 교집합 시킬 수 있는 유니온 멤버>, intersection과 유사

non nullable

NonNullable<타입> 정의되지 않은 것을 제거한다.

paramerters

type Tuple1 = Parameters<(n1:number,n2:number)=>void>
//[n1:number, n2:number]
type Tuple2 = Parameters<<T>(param: T)=> T>
//[param:unknown]
type Tuple3 = Parameters<(param: any)=>void>
//[param:any]
type Tuple3 = Parameters<any>
//unknown[]
type Tuple3 = Parameters<string>
//error
type Tuple3 = Parameters<number>
//error
type Tuple3 = Parameters<never>
//never
type Tuple3 = Parameters<<T>(...args:T[])=>void>
 //unknown[]

함수의 매개변수를 추출해서 튜플타입을 만들어준다.

return type


function func(s:string):string{
  return s
}
type Return1 = ReturnType<() => string>
type Return2 = ReturnType<() => void>
type Return3 = ReturnType<()=> unknown>
type Return4 = ReturnType<()=> null>
type Return5 = ReturnType<<T>(p:T)=>T>
type Return6 = ReturnType<typeof func>
//string
  

함수의 반환 타입을 빼서 타입을 만들어 준다 -> Redux에서 많이 사용

instance type


class BaseClass{

}
const P = new BaseClass();

type In = InstanceType<typeof BaseClass>
// class와 typeof조합을 만들면 간단하게 만들 수 있다.
                       

심플하고 많이 사용하는 타입

Never Type

  • 일부 함수의 반환이 없는 경우를 명시

  • 예외를 던지거나 실행이 종료될 때

function someError(message:string):never{
throw new Error(message)
}

function someFunc(param:string|number): never{
if(typeof param==="string){

}else if(typeof param==="number){

}else{
//some never
}
}

type StrUnion = never | string
// 이때는 union타입에서 제거가 됨 strUnion = string

type NeverInter = never & string
// 교차타입에서는 never가 덮음



>void타입과는 또 다른 타입임을 알아야한다.
profile
개발 취준생

0개의 댓글