【Nuxt3】typesディレクトリに型定義したtsファイルを置く

2023年12月17日

プロジェクト内で何度も同じオブジェクトを定義するのは面倒です。

/types
  └ entities.ts       →  /

レシピオブジェクトを多用するときはここで定義。

export interface RecipeEntity {
    //料理名
    name:string;
    //材料名
    items:{
        name:string;
        amount:""|number;
        unit:string;        
    }[],
    //調理方法
    howToCook:string,
}

エイリアスディレクトリを使用してimportする。

import { RecipeEntity } from "@@/types/entities";

「@@」はエイリアスディレクトリと言って、プロジェクト内の特定のルートを示してくれる

.nuxt/tsconfig.jsonの中のcompilerOptions.pathsプロパティに定義されている。

コンポーネントの階層が違うと毎回異なる相対パスを書かないといけないが、この記法ならどのディレクトリでも大丈夫。

/ Generated by nuxi
{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    ....
    "paths": {

      "@/*": [
        "../*"
      ],
      "~~": [
        ".."
      ],
      "~~/*": [
        "../*"
      ],
      "@@": [
        ".."
      ],
      "@@/*": [
        "../*"
}}

もしエラーがでるときは、こちらも確認してください。

ちなみにyarnを使っているときは.nuxtディレクトリが出ないので、nmp run buildで起動してください。

よかったらシェアしてね！