제네릭 화살표함수

화살표 함수식을 활용

let corsURL = (url:string): string => `https://crossorigin.me/${url}`;

제너릭 함수 구현

* function GenericReturnFunc<T>(arg: T): T { return arg; }
* const GenericReturnFunc = (arg: T):<T> {
  return arg
 }

 

함수에서 타입스크립트 활용 return값은 type

// number 타입의 매개변수를 return하는 함수
function NumberReturnFunc(arg: number): number{ return arg; }
const NumberReturnFunc = (agr: number ):number => {
return arg
}

// string 타입의 매개변수를 return하는 함수
function StringReturnFunc(arg: string): string { return arg; }
const NumberReturnFunc = (agr: string  ):string => { 
return arg
}

// boolean 타입의 매개변수를 return하는 함수
function BooleanReturnFunc(arg: boolean): boolean { return arg; }
const NumberReturnFunc = (agr: boolean): boolean=> { 
return arg
}

 

 

interface 활용한 제네릭 타입 함수 구현

return값이 통신하는 데이터일 경우 ? 

타입을 알 수 없기에 제네릭으로 활용

export interface IPaginationMeta {
  page: number
  totalPage: number
}

export interface IPagination<T> {
  meta: IPaginationMeta
  list: T[]
}


export interface ISomeModel {
  id: number
  title: string
  content: string
}

export const someFunc = (): IPagination<ISomeModel> => {
  // const someRes = {
  //   meta: {page: 1,totalPage: 10},
  //   list: [
  //     {
  //       id: 1,title: 'asdfasdf',content: 'jsiodfisjodf'
  //     }
  //   ]
  // }
  const someRes = someHttpFunc()
  return someRes
}

 

tsx에서 화살표 함수 사용 시

제네릭 매개변수에 extneds를 사용하여 컴파일러에게 제네릭 화살표 함수라고 알려줘야 함

let GenericReturnFunc = <Type extends {}>(arg: Type): Type => {
return arg;
}