TypeScript の Import Type 機能

TypeScript は、主に Web アプリケーションの開発に使用されるプログラミング言語であり、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 ファイルで定義されているカスタム タイプです。 すべてのカスタム タイプは export キーワードを使用して、ファイル外の別のモジュールがそれらにアクセスできることを示します。

Employee タイプは、firstName、lastName、email の 3つのプロパティを定義します。 logEmployee() メソッドはタイプ Employee パラメータを受け入れ、従業員の詳細をコンソールに記録します。

Account タイプは、username と password の 2つのプロパティを定義します。 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 type アプローチを使用して、型宣言と注釈に使用できる宣言をインポートしました。

import アプローチを使用して値要素をインポートしました。 これは、2つの方法で使用する必要がある既定の規則です。

値要素で 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' }