Laravel のスターターキットでTypescriptの選択肢を選んでいるのに構築されたソースはTypescript対応になっておらずJavascriptでの構成でした。そこでスターターキットのソースに対してTypescriptを設定する手順を調べてみました。
まずはTypescriptを始めるのに必要なものをインストールします。そしてTypescript設定のための tsconfig.json ファイルを生成します。
ちなみに、Laravel のスターターキットをインストールした時点でバージョン等が利用を想定したものでない状態が起きているようで --legacy-peer-deps オプションを指定してインストールしたので、引き続きそのオプションを指定してインストールしています。スターターキット時点の問題はおそらくないだろうと想定しているというのもありますが動作させたいのが目的なので解決してないです。
npm install typescript vue-tsc @vue/tsconfig @types/node --save-dev --legacy-peer-deps
npx tsc --initapp.jsをapp.tsに変更
イニシャライズで一番最初に読み込まれるファイルをTypescriptにします。下記のようなエラーが出力されたので一つ一つ対応していきました。
相対インポート パスでは、’–moduleResolution’ が ‘node16’ または ‘nodenext’ である場合、ECMAScript インポートに明示的なファイル拡張子が必要です。インポート パスに拡張機能を追加することを検討してください。
ziggy というライブラリをimportで呼び出す箇所で拡張子が求めらるようです。vite.config.ts でエイリアスを設定し、 tsconfig.json でそのエイリアスに対する型定義の場所を指定し、そのエイリアスに変更することでエラーを解消しました。tsconfig.json で compilerOptions.types 、compilerOptions.paths 、include の各値を設定しました。
プロパティ ‘env’ は型 ‘ImportMeta’ に存在しません。
/// <reference types="vite/client" />とだけ入力した vite-env.d.ts を作成しTypescriptが型定義を参照する場所に配置してエラーを解消しました。
パラメーター ‘name’ の型は暗黙的に ‘any’ になります。
明示的に型を指定してエラーを解消しました。
実装した差分をgitHubにあげているので参考にしてください。
resources/js/Pages/Welcome.vueをTypescriptに対応
<script setup> を <script setup lang="ts"> とすることでTypescript対応になります。ziggy というライブラリの route() メソッドが型定義がないためにエラーが出ます。Ziggyのドキュメントを参照しエラーが出ないようにする方法を設定してエラーが出ないようにしました。
inertiaで利用する $page 変数も同じ方法でエラーが出ないようにしました。
//resources/js/types/index.d.ts
import { route as routeFn } from "ziggy-js";
declare module "vue" {
interface ComponentCustomProperties {
route: typeof routeFn;
$page: Page;
}
}実装した差分をgitHubにあげているので参考にしてください。
resources/js/Pages/Auth/Login.vueをTypescriptに対応
ziggy というライブラリの route() メソッドが型定義がないためにエラーが出ます。今回は <script> タグ内で利用していてエラーが発生しました。前回は <template> タグ内でした。こちらもZiggyのドキュメントを参照して対応出来ました。
//resources/js/types/index.d.ts
declare global {
var route: typeof routeFn;
}モジュール ‘～.vue’ の宣言ファイルが見つかりませんでした。’/～.vue’ は暗黙的に ‘any’ 型になります。
vueファイルをインポートする箇所においてエラーが発生しました。「shims.d.ts」というファイルを作成してVueファイルをTypeScriptとして認識させるためのファイルを作成することでエラーが解消しました。
Login.vueが参照しているファイルもTypeScript対応しエラー箇所を対応しました。
//resources/js/types/shims.d.ts
declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}実装した差分をgitHubにあげているので参考にしてください。
ブログ一覧を実装しTypescriptに対応
Laravel でデータベース操作の基本であるCRUD(Create（作成）」「Read（読み取り）」「Update（更新）」「Delete（削除）)を実装するの記事で作成したソースを使ってブログ一覧を表示します。
関係するファイルをに対して<script setup> を <script setup lang="ts"> とし、Post モデルの形
型定義してresources/js/Pages/Posts/index.ts に配置しました。型定義を置くファイルは *.d.ts というわけでもなさそうで *.ts で良いみたいです。また、ファイルをどこに置くのかもルール決めをプロジェクトごとで必要のようですが、とりあえず近くに配置してみました。
実装した差分をgitHubにあげているので参考にしてください。
shadcn-vueのpaginationを実装しTypescriptに対応
shadcn-vueのpaginationをインストールして実装してみました。Laravelのpaginationメソッドが返すデータの型定義としてpagination型を resources/js/types/index.ts に定義してみました。どんなリソースでも利用するだろうということで全体の型定義の場所に配置しています。
[@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type
shadcn-vueのpaginationがreka-uiを使って実装されており、そちらの型定義が見つからないというエラーのようです。ページを表示しようとしたときにviteがエラーを出力してしまいます。vscodeではエラーになっておらずちゃんと型定義にジャンプするので型定義はないわけじゃないので困りました。あれこれ試した結果、tsconfig.jsonにて compilerOptions.paths に reka-ui の場所を指定することでエラーがでなくなりました。
実装した差分をgitHubにあげているので参考にしてください。
ブログの新規登録・編集・表示を実装しTypescriptに対応
ブログ一覧に引き続き、新規登録・編集・表示の機能を実装しTypescriptに対応してみます。
今まで対応してきた手順により修正箇所は多くなかったです。
実装した差分は新規登録、新編集・表示にそれぞれあげているので参考にしてください。
最後に
初回におまじないのような設定をすませてしまえば以降はストレスなくTypescriptが使えるように感じました。shadcn-vueは package.json でTypescriptを使う設定をすればTypescriptで実装されたコンポーネントがインストールされるようです。他のライブラリをインストールしたときに型定義が見つからないというようなエラーが出たら tsconfig.json でライブラリのインストール場所を明示すれば正しく型定義を見つくけてくれることが分かりました。Javascriptで作成したソースもそのまま動作します。vueファイルをに対して<script setup> を <script setup lang="ts"> とすることでTypescriptで書く準備が整うので徐々にTypescript対応でソースをリファクタリングすることが出来ることが分かりました。
