학습내용

• 제네릭
• 타입 추론

제네릭

타입을 함수의 파라미터처럼 사용하는 방식. 함수, 인터페이스, 클래스 등을 다양한 타입으로 재사용 할 수 있다. 선언시에는 <T> 파라미터만 입력하고 생성 시점에 사용할 타입을 결정한다. 보통 Type의 T를 따와 <T>라고 표기하지만 어떤 값이 들어와도 상관 없다.

• 일반 함수

function getText<T>(text: T): T {
  return text;
}

• 화살표 함수

const getText = <T>(text: T) => {
  return text;
}

제네릭 타입 함수 사용시 <>는 생략 가능하다.

getText<string>('hi'); // = getText('hi')
getText<number>(10); // = getText(10)
getText<boolean>(true); // = getText(true)

제네릭의 필요성

function regularFn<T> (array: T[], value: T){
  const newArray = [value, ...array];
  return newArray;
}

const demoArray = [1, 2, 3];
const updateArray = regularFn(demoArray, 0);

updateArray의 값은 [0, 1, 2, 3]이지만 타입스크립트는 number[]가 아닌 any[]로 인식한다. 이 경우 실질적인 value는 number[]지만 타입스크립트로부터 number에 대한 지원을 받을 수 없게 된다. 예를 들어 number에서 사용할 수 없는 split() 메서드를 사용시, 타입스크립트에서는 에러가 없지만 실제로 코드를 실행하면 에러가 발생하는 식이다.

타입 변수

function printOut<T>(input: T[]): T[] {
  console.log(input.length);
  return input;
}

T 다음에 [대괄호]를 사용하지 않을시 에러가 발생한다. 배열이거나 String일 경우엔 length 속성이 적용되지만 그 둘 유형에 해당하지 않는 경우도 있기 때문이다.

제약 조건

제네릭 제약 조건을 통해서도 위와 같은 에러를 해결 할 수 있다. 인터페이스 생성 후 해당 인터페이스로 확장하는 방법을 통해서다.

interface LengthWise {
  length: number;
}

function printOut<T extends LengthWise>(input: T): T {
  console.log(input.length);
  return input;
}

printOut(10); // Error
printOut({ length: 0, value: 'hi' }); // LengthWise의 속성이 적용되었으므로 Error가 발생하지 않음

인터페이스 생성 후 해당 인터페이스로 확장 방식으로도 해결 가능

---

타입 추론

타입을 명시하지 않아도 자동으로 타입을 추론해주는 것

기본

자바스크립트와 마찬가지로 let은 같은 자료형 한에서 재할당이 가능하지만 const는 불가능하다.

• 재할당 가능

  let a = 123;
   let b = 'abc';
  
   a = 456;
   b = 'efg'; 

• 재할당 불가능

  const a = 123;
   const b = 'abc';
  
   a = 456; // error
   b = 'efg'; // error

함수

const func1 = (a = 'a', b = 1) => {
  return `${a} ${b};`;
};

func1(3, 6); // 3에서 error