【TypeScript】別ファイルのtypeを使用する方法ご紹介。

今回の記事は別ファイルのtypeを使用する方法に関してご紹介する記事です。初心者にもわかりやすいように記載するので是非参考にしてみて下さい。

typeを別ファイルから使用

ファイル構成によりますが、ディレクトリは下記のような構成を仮定します。

----
  |-src
     |
     |---type
     |    |
     |    |---type.ts　←typeを参照する元ファイル
     |
     |---src
          |
          |---index.tsx ←typeを参照して使用するファイル

まずは、TypeScriptの環境構築を行ってください。完了すれば上記のようなファイル構成を作ります。ちなみに拡張子「.ts」と「.tsx」はどちらを使用しても良いのですが、基本的に「index」ファイルは「.tsx」でそれ以外は「.ts」でファイルをまとめておきたいのでそうしているだけです。

私はReactベースのTypeScript環境で通常業務を行っているためそちらの環境構築の方法がわからない方はこちらから参照してください。

ではまず参照する元ファイルで下記のような記述を行ってみてください。

export type SampleType = {
     id: number;
     value: string;
};

ポイントはtypeを作成するだけではなく、exportすることが必要です。

ではこのファイルのtypeを参照して使用してみます。

import { SampleType } from './type'

const param:SampleType = {
    id:1
    value:'sample'
}

onstSampleNode: React.VFC = () => {
  return (
    <div>{param.id}{param.value}</div>
  );
};

一番上の「import」の文で別ファイルからtypeを取得しています。ここで取得すればOKです。

では今回の記事は以上です。他にも多数のTypeScript関連の記事を記載しているので是非参考にしてみてください。