TypeScript의 유형 가져오기 기능

1. TypeScript에서 사용자 정의 유형 정의
2. import type을 사용하여 TypeScript에서 사용자 정의 유형 가져오기

TypeScript는 주로 웹 애플리케이션을 개발하는 데 사용되는 프로그래밍 언어이며 JavaScript의 상위 집합입니다.

언어는 주로 Angular와 같은 프레임워크와 함께 사용됩니다. TypeScript에는 프로그래밍에서 활용할 수 있는 기본 및 기본이 아닌 데이터 유형이 있습니다.

사용자 정의 유형을 정의하는 애플리케이션 개발은 일반적으로 불가피합니다. 이러한 사용자 정의 유형은 다른 애플리케이션 모듈에서 사용하도록 정의됩니다.

이 자습서에서는 모듈에 이러한 사용자 정의 유형을 포함하는 방법을 설명합니다. 이러한 사용자 정의 유형은 import type 및 import 메소드를 사용하여 애플리케이션에 포함될 수 있습니다.

다음 단계에서는 이러한 방법을 자세히 다룹니다.

TypeScript에서 사용자 정의 유형 정의

Visual Studio Code 소프트웨어로 이동하여 export-import-type이라는 새 폴더를 만들거나 원하는 이름을 사용하십시오.

폴더 아래에 foo.ts라는 파일을 만듭니다. 다음 코드를 복사하여 파일에 붙여넣습니다.

export type Employee = {
    firstName: string
    lastName: string
    email: string
}

export function logEmployee(employee: Employee){
    return employee;
}

export type Account = {
    username: string
    password: string
}

export function logAccount(account: Account){
   return account
}

다음은 foo.ts 파일에 정의된 사용자 정의 유형입니다. 모든 사용자 정의 유형은 내보내기 키워드를 사용하여 파일 외부의 다른 모듈이 액세스할 수 있음을 나타냅니다.

Employee 유형은 firstName, lastName 및 email의 세 가지 속성을 정의합니다. logEmployee() 메소드는 유형 Employee 매개변수를 허용하고 직원 세부 정보를 콘솔에 기록합니다.

계정 유형은 사용자 이름 및 암호 속성 두 개를 정의합니다. logAccount() 메서드는 Account 유형의 매개변수를 수락하고 계정 세부 정보를 콘솔에 기록합니다.

import type을 사용하여 TypeScript에서 사용자 정의 유형 가져오기

동일한 폴더 아래에 bar.ts라는 파일을 만듭니다. 다음 코드를 복사하여 파일에 붙여넣습니다.

import type {Employee, Account} from "./foo"
import {logEmployee, logAccount} from "./foo"

function logEmployeeTwice(employee: Employee){
    console.log(logEmployee(employee))
    console.log(logEmployee(employee))
}

let employee: Employee ={
    firstName: "david",
    lastName: "mbochi",
    email: "david@gmail.com"
}

logEmployeeTwice(employee)

function logUserAccount(account: Account){
    console.log(logAccount(account))
}

let account: Account={
    username: "johndoe",
    password: "@john123"
}

logUserAccount(account)

위의 코드에서 유형 선언 및 주석에 사용할 수 있는 선언을 가져오기 위해 유형 가져오기 접근 방식을 사용했습니다.

값 요소를 가져오기 위해 import 접근 방식을 사용했습니다. 이것은 두 가지 방법에 사용해야 하는 기본 규칙입니다.

값 요소에서 import type을 사용하려고 하면 다음 오류가 발생합니다.

import type {logEmployee, logAccount} from "./foo"

오류:

'logEmployee' cannot be used as a value because it was imported using 'import type'.ts(1361)
bar.ts(2, 14): 'logEmployee' was imported here.

'logAccount' cannot be used as a value because it was imported using 'import type'.ts(1361)
bar.ts(2, 27): 'logAccount' was imported here.

다음 명령을 사용하여 tsconfig.json 파일을 생성하여 TypeScript 구성을 추가합니다.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ tsc init

생성된 tsconfig.json 파일에 다음 구성 속성이 있는지 확인합니다.

{
    "compilerOptions":{
        "target": "es5",
        "noEmitOnError":true
    }
}

다음 명령을 사용하여 모든 TypeScript 파일을 JavaScript로 트랜스파일합니다.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ tsc

다음 명령을 사용하여 node를 사용하여 bar.js 파일을 실행합니다.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ node bar.js

출력:

{ firstName: 'david', lastName: 'mbochi', email: 'david@gmail.com' }
{ firstName: 'david', lastName: 'mbochi', email: 'david@gmail.com' }
{ username: 'johndoe', password: '@john123' }