Nuxt x TypeScript で拡張関数の設定

TypeScriptで拡張関数を記述できることを知ったのでNuxtに組み込んでみた kakkoyakakko2.hatenablog.com

1度でも読み込まれれば良いので、  今回はPluginとして読み込ませるようにした

拡張ファイルを記述する 今回は1つだけだけど、複数増えるときはファイルを分けたほうがいいかも。

// ./plugins/extenstions.ts

export {}

declare global {
  interface Number {
    separatePrice: () => string
  }
}

Number.prototype.price = function(): string {
  return `¥${this}`
}

プラグインを読み込ませる

// ./nuxt.config.js

plugins: [ "~plugins/extenstions" ]

使うときは値を変数に代入後に使用できる

// ./page/index.vue

mounted() {
  const num = 100
  console.log(num.price()) // ¥100
},

自分で作ったカスタムクラスの場合は、それぞれのファイルで記述すればいいけど  プリミティブラッパーオブジェクト やDate , Array , Map とかのクラスはこっちで一元管理したほうが良さそう。

複数プロジェクトで使い回せるようにするにはnpm として管理だけど...それはのちのち...