[TS]인터페이스, 제네릭, 타입 별칭, 타입 단언, 유니온 타입

인터페이스

인터페이스는 타입을 정의한 규칙을 의미

 

제네릭

한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용.

타입을 마치 함수의 파라미터처럼 사용하는 것을 의미

 

타입 별칭과 인터페이스(✨✨)

• 타입 별칭과 인터페이스는 매우 유사
• 대부분의 경우 둘 중 하나를 자유롭게 선택하여 사용 가능
• interface 가 가지는 대부분의 기능은 type 에서도 동일하게 사용 가능
• 둘의 핵심적인 차이는,타입은 새 프로퍼티를 추가하도록 개방될 수 없는 반면, 인터페이스의 경우 확장 가능

교집합을 통하여 타입 확장하기

type Animal = {
  name: string
}

type Bear = Animal & {
  honey: Boolean
}

const bear = getBear();
bear.name;
bear.honey;

기존의 인터페이스에 새 필드를 추가하기

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {}); //첨본다

타입 단언 타입 단언을 사용하면 타입을 좀 더 구체적으로 명시할 수 있음

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

면접에서  사전 과제에 대해 리뷰할 때 너무 잦은 타입 단언은 좋지 않다 라고 얘기했음.

 

* chatGPT에게 물어본 결과

as를 사용할 경우, 타입 체킹을 하지 않고 넘어간다.

코드의 가독성을 해칠뿐만 아니라, 타입의 안정성을 보장할 수 없으며, 유지보수성을 떨어뜨리게 된다.

 

전문
타입 단언(as)은 타입스크립트에서 컴파일러에게 "나는 이 변수의 타입을 정확히 알고 있으니 검사하지 말고 이 타입으로 간주해!"라고 알려주는 것입니다.
타입 단언을 남발하면 코드의 가독성을 해치고, 유지보수성을 떨어뜨리며, 코드의 안정성을 보장할 수 없습니다. 예를 들어, 실제로는 문자열일 수 있는 값을 숫자로 단언하는 경우, 런타임 오류가 발생할 수 있습니다.

따라서, 타입 단언은 가능한 적게 사용하는 것이 좋습니다. 대신, 변수의 타입을 명확하게 추론하거나, 인터페이스와 같은 타입스크립트의 고급 타입 기능을 활용하여 코드의 안정성과 가독성을 높이는 것이 좋습니다. 또한, 타입스크립트가 제공하는 형태로 API를 작성하고, 이를 이용하는 것이 좋습니다

 

 

유니온 타입

기존의 타입을 기반으로 다양한 연산자를 사용하여 새로운 타입을 만드는 것

유니온을 다를 때에 해당 유니언 타입의 모든 멤버에 대해 유효한 작업일 때만 허용!

ex) string | number 라는 유니언 타입일 경우, string 타입에만 유효한 메서드는 사용할 수 x

에러 예)

function printId(id: number | string) {
  console.log(id.toUpperCase());
Property 'toUpperCase' does not exist on type 'string | number'.
  Property 'toUpperCase' does not exist on type 'number'.
}

이 문제를 해결하기 위해 타입을 좁혀서(narrowing) 해결할 수 있다

function printId(id: number | string) {
  if (typeof id === "string") {
    // id는 'string' 타입
 
    console.log(id.toUpperCase());
  } else {
    //  id는 'number' 타입
    console.log(id);
  }
}

 

---

as를 주로 사용했던 부분이 바로 유니온 타입 때인데 이번에 배우면서 타입을 단언하는 방법을 무분별하게 사용하지 않고 typeof  타입을 좁혀서 사용하는 방면으로 코드를 리팩토링 해야겠다 싶었다

 

---

참고 자료

 

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html 

Documentation - Everyday Types

https://www.samsungsds.com/kr/insights/typescript.html

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트[TypeScript] | 인사이트리포트 | 삼성SDS