*.d.ts & 유틸함수(Record / Omit)

🚕*.d.ts

Typescript파일에서 JS파일을 호출할 경우 타입을 읽지 못하므로, Typscript에게 JS파일의 타입의 대해 설명을 해줘야 하는 역할이다. 이렇게 설명 되어 있는 파일을 Declaration File 이라고 한다

 

예시

musicPlay.ts 라는 파일에서 playMusic라는 함수가 있고, date.js의 isPlayOk라는 함수를 통해 재생하는 함수가 있다

 

musicPlay.ts

import { isPlayOK } from "@/utils/date";

function playMusic(url: string, date: string): boolean {
  // 외부 JS 호출
  isPlayOK(date);
  return true;
}

export {};

 

date.js

function isPlayOK(date) {
  // 복잡한계산 후 true / false 리턴
  return true;
}

export { isPlayOK };

 

아래와 같이 js파일을 호출하는 곳에서 오류가 발생한다

결국은 js파일에서 이슈가 발생하므로, js에 대한 Declaration File이 필요하다

 

global.d.ts

declare module "@/utils/date" {
  declare function isPlayOK(data: string): boolean;
}

위와 같이 date.js의 isPlayOk에 대해 타입에 대해 미리 정의 해둔다.

다만 위 파일 작성시에는 js파일에 대한 **“정확한 기능이나, 리턴타입“**에 대해 인지를 하고 있어야 한다

 

 

 

Record

Key,Value형태 이며, Key,value에 타입을 지정할 수 있다

interface PageValue {
  title: string;
}

type PageKey = "home" | "about" | "contact";
const nav: Record<PageKey, PageValue> = {
  contact: { title: "t1" },
  about: { title: "t2" },
  home: { title: "t3" },
};

 

 

Omit

Type에서 원하는 키 값을 제거하는 기능

 

// Omit
// Type에서 원하는 키 값을 제거하는 기능
interface Person {
  name: string;
  age: number;
  country: string;
  gender: "m" | "w";
  likefood: string;
}

type KoreaPerson = Omit<Person, "likefood">;
// name,age,country,gender