타입 가져오기 / 내보내기

TypeScript의 타입 가져오기와 내보내기 하는 방법을 아래 예시 코드와 함께 살펴보겠습니다.

 

 

user.ts

interface User {
  firstName: string;
  lastName: string;
  age: number;
  isValid: boolean;
}

export function getFullName(user: User) {
  return `${user.firstName} ${user.lastName}`;
}

함수 getFullName은 매개 변수 user의 타입을 인터페이스 User를 사용하여 명시하고 있으며, export를 사용하여 해당 함수를 이름을 가진 내보내기를 하고 있습니다.

 

 

main.ts

import { getFullName } from "./user";

const rati = { name: "rati", age: 5, isValid: true };
const fullName = getFullName(rati); // 타입 에러 발생

console.log(fullName);
console.log(rati.isValid);

user.ts 파일에서 내보내기 하는 함수 getFullName를 import 해주고, 위와 같은 객체 데이터를 가진 변수 rati를 함수의 인수로 전달합니다.

 

함수 getFullName의 매개 변수 user는 인터페이스 User를 사용하여 타입을 명시하고 있기 때문에 firstName, lastName 속성이 필수인데 인수로 전달하는 객체의 경우 firstName, lastName 속성이 없기 때문에 위의 타입 에러가 발생하게 됩니다.

 

이 경우 객체를 인수로 전달하기 전 user.ts에 생성한 인터페이스 User를 사용하여 객체의 타입으로 한번 더 명시해주면 됩니다.

 

인터페이스 User를 export를 사용하여 내보내기 해주고

가져오기 한 뒤 객체 데이터의 타입으로 명시해주게 되면 해당 객체를 함수의 인수로 전달하기 전에 객체 구조의 타입 에러를 확인할 수 있게 됩니다.