Ruby on Rails: TypeScriptで`@rails/ujs`利用するための最低限の型定義MEMO

個人のWebサービスでj.sファイルを全て.tsファイルに変更するときに@rails/ujsの型定義が提供されておらず、ちょっとハマったのでメモ📝

@rails/ujsとは

@rails/ujsは、ActionView内の管理されているnpm packageです。

github.com

Railsのガイドで記載されているdata-confirmやdisable_withといった便利機能はこのpackageを利用して実現されており、

railsguides.jp

以下のコードをapplication.jsとかに書くと使うことが出来ます。

import Rails from "@rails/ujs";
Rails.start();

.tsファイルで@rails/ujsを利用する。

以下を単純に.jsファイルを.tsファイルに書き換えると、

import Rails from "@rails/ujs";
Rails.start();

型定義ファイルが提供されてないので以下のようなエラーが発生します。

app/javascript/packs/rails.ts:1:19 - error TS7016: Could not find a declaration file for module '@rails/ujs'. 'node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/rails__ujs` if it exists or add a new declaration (.d.ts) file containing `declare module '@rails/ujs';`

1 import Rails from "@rails/ujs";

以下のようなrails-ujs.d.ts的なファイルを配置してあげれば最低限の利用に関しては型チェックを成功させることができます。

const Rails: {
  start(): void;
};

declare module "@rails/ujs" {
  export default Rails;
}

以下のようなcsrfTokenを取得するといったmoduleをimportとかしたい場合には

import { csrfToken } from "@rails/ujs";

型定義を追加してあげれば大丈夫です。

const Rails: {
  start(): void;
};

declare module "@rails/ujs" {
  export default Rails;
  export function csrfToken(): string;
}

参考

stackoverflow.com