타입 가져오기와 내보내기

@2023/09/21

안녕하세요 lika-7입니다

이번 시간에는 TypeScript에서 타입, 인터페이스를 가져오고 내보내는 내용에 대해서 설명 하겠습니다

모듈에서 import, export

JavaScript 에서 import와 export 키워드를 통해 모듈 시스템을 이용할 수 있습니다.

우리는 JavaScript에서 모듈 시스템을 이용 해 함수 기능과 변수를 재사용한 코드 블록으로 만들 수 있었습니다.

💡

타입스크립트의 “타입, 인터페이스” 또한 모듈 시스템을 통해 재사용 가능한 코드 블록으로 만들수 있습니다

예제

//TypeScript
//main.ts

import {getFullName, User} from './user' 

const heropy:User = {
    firstName: 'Heropy',
    lastName: 'june',
    age: 85,
    isValid: true
}

const fullName = getFullName(heropy)

console.log(fullName)
console.log(heropy.isValid)

💡

1. user 파일에서 getFullName 함수와 User 인터페이스를 가지고 옵니다. 2. heropy 함수는 user모듈에서 가져온 User 인터페이스를 이용합니다 3. fullName 변수는 getFullName( ) 함수로 초기화 합니다

//TypeScript
//user.ts

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

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

💡

1.interface User 를 선언 합니다. 이를 이름 있는 내보내기 합니다 2. getFullName 함수를 선언 합니다. 이를 이름 있는 내보내기 합니다

main.ts는 user.ts 모듈의 User 인터페이스와 getFullName 함수를 import 하여 사용할수 있었습니다.

정리

✅

타입, 인터페이스 또한 모듈화 하여 사용 할 수 있습니다