TS 함수, 제너릭

함수

• 함수의 매개변수 타입은 명시적으로 정의한다.
• 함수의 반환 타입은 ts가 추론한다.
• 호출 시에는 타입을 명시하지 않아도 된다.

const a = (a: number, b: number) => {
  return a * b;
}

a(1) //2개의 인수가 필요한데 1개를 가져왔습니다.

• 선택적 매개변수는 마지막에 지정한다.

const b = (a: number, b?: number, c?: number)=>{
  //매개변수 3개가 모두 주어졌을 경우
  if(a && b && c){
    return a * b * c;
  }
  return ('false');
}

console.log(b(1,2,3)); // 6
console.log(b(5)); // false

• 기본값 지정

const c = (a: number, b = 0, c = 0)=>{
  if(a && b && c){
    return a * b * c;
  }
  return ('false');
}

console.log(c(1,2,3)); // 6
console.log(c(5)); // false

• 자바스크립트의 'arguments'대신 타입 안전한 타입을 사용하기

const d = (...nums: number[]) => {
  return nums.reduce((acc, cur) => {
    return acc * cur;
  }, 1)
}

console.log(d(1,2,3,4,5)); // 120

제너릭

• 타입스크립트가 타입을 추정해 한 가지 구체 타입(concrete type)으로 사용된다.

//func 매개변수를 그대로 반환하는 함수
type Copy = {
  <T>(array: T[], func: (e: T) => T): T[]
}

const newAry: Copy = (array, func) =>{
  const result = [];
  for(let i = 0; i < array.length; i++){
    result.push(func(array[i]));
  }
  return result;
}

//T가 number로 한정됨
const e = newAry([1, 2, 3], (e) => e); //const newAry: <number>(array: number[], func: (e: number) => number) => number[]
//T가 string으로 한정됨
const f = newAry(['1', '2', '3'], (e) => e); //const newAry: <string>(array: string[], func: (e: string) => string) => string[]

• 제너릭이 구체 타입으로 확정되는 타이밍
  • 호출 시그니처의 앞에 선언하는 경우: 함수를 실제 호출할 때
  • 제너릭의 범위를 모든 시그니처로 한정: 해당 타입의 함수를 선언할 때

type Copy = {
  <T>(array: T[], func: (e: T) => T): T[]
}

const newAry: Copy = (array, func) =>{
  const result = [];
  for(let i = 0; i < array.length; i++){
    result.push(func(array[i]));
  }
  return result;
}

//T가 number로 한정됨
const e = newAry([1, 2, 3], (e) => e); //const newAry: <number>(array: number[], func: (e: number) => number) => number[]

---

type Copy<T> = {
  (array: T[], func: (e: T) => T): T[]
}

//T가 number로 한정됨
const newAry: Copy<number> = (array, func) =>{
  const result = [];
  for(let i = 0; i < array.length; i++){
    result.push(func(array[i]));
  }
  return result;
}

const e = newAry([1, 2, 3], (e) => e); //const newAry: <number>(array: number[], func: (e: number) => number) => number[]

출처
보리스 체르니, 타입스크립트 프로그래밍(2021)