関数の静的プロパティの型付け

この記事は以下のような理由によりアーカイブされました。
  • 内容が古くメンテナンスされていない
  • 執筆者の以前の考えである
関連

(2020-05-03)関数ページにまとめたのでアーカイブしました。

こんな感じで静的プロパティに値を定義しているような値を想定します。

function foo() {
  /* ... */
}
foo.hoge = '...';
foo.fuga = () => {
  /* ... */
};

依存パッケージの型付け

上のfoofooパッケージで提供されていて、型ファイルが提供されていない時はこのように定義できます。

declare module 'foo' {
  function foo(): any;
  namespace foo {
    export let hoge: string;
    export let fuga: () => any;
  }

  export = foo;
}

これをどこかプロジェクトにfoo/index.d.tsとして作成します。そのモジュールを読み込むと型が効いているはずです。

import foo from 'foo';

foo();
foo.hoge = 'ads';
foo.fuga();

ソースコードの中で

同じようにコードの中で定義すればいいです。
functionで定義するものはそのまま値を入れることで型が付きます。

function foo() {}
foo.hoge = 'string';
// `foo.hoge` は `string`
foo.hoge = 123;
// `foo.hoge` は `string | number`

厳密にしたいならnamespaceを使います。

function foo() {}
namespace hoge {
  export let paths: string;
}
foo.hoge = 'string';
// `foo.hoge = 123` は型エラー

しかし、この方法は関数の中で定義する関数には効きません。
やっぱり、変数に置いて変数の型を設定してあげるといいです。

const foo: {(): void; hoge: string} = function() {};
foo.hoge = 'string';

const createFn = () => {
  const fn: {(): void; hoge: string} = function() {};
  fn.hoge = 'string';

  return fn;
};

JavaScript で飯食べたい歴約 5 年、 純( nju33 ) によるノートサイトです。

このサイトではドリンク代や奨学金返済の為、広告などを貼らせて頂いてますがご了承ください。

Change Log