今朝、公式メルマガ＆TwitterでStrapi4.3.0リリースの発表があり、TypeScriptサポートとなりました🎉
TS対応については先日書いていますが改めてリリース版を動かしてみます。
セットアップ
下記コマンドでプロジェクト作成を行います。前回と違うのは@latestの部分。
npx create-strapi-app@latest strapi4.3 --quickstart --typescript
インストールするとpackage.jsonに最新の4.3.0が指定してあります。
"dependencies": {
"@strapi/strapi": "4.3.0",
"@strapi/plugin-users-permissions": "4.3.0",
"@strapi/plugin-i18n": "4.3.0",
"better-sqlite3": "7.4.6"
},
ちなみにドキュメントには旧バージョンのJS→TSへは推奨しません旨の記載がありますが、Strapi本体のバージョンはマイグレーションガイドがあって少し謎です。
🚧 JavaScript to TypeScript migration
Migrating existing Strapi applications written in JavaScript is not currently recommended. In the meantime, feel free to ask for help on the forum (opens new window)or the community Discord (opens new window).
TypeScriptでプラグイン作成
例によってプラグインを作成します。
コマンドは
yarn strapi generate
yarn run v1.22.19
$ strapi generate
? Strapi Generators plugin - Generate a basic plugin
? Plugin name strapi-plugin-hello
言語はTypeScriptかJavaScriptの好きな方を選べるようです。
生成されたファイルはいずれも*.ts/*.tsxでした。
いつも通り開発用の起動コマンドを実行すると見たことないエラーが出ました。yarn buildでも同様のエラーになります。
yarn strapi develop --watch-admin
yarn run v1.22.19
$ strapi develop --watch-admin
error TS18003: No inputs were found in config file '/Users/yasuda/Projects/oss/strapi4.3/tsconfig.json'. Specified 'include' paths were '["./","src/**/*.json"]' and 'exclude' paths were '["node_modules/","build/","dist/",".cache/",".tmp/","src/admin/","**/*.test.ts","src/plugins/**"]'.
Found 1 error(s).
error Command failed with exit code 1.
まず、前回の教訓を活かしてプラグインを先に一度ビルドします。
cd src/plugins/strapi-plugin-hello
npm run build
するとなぜかmy-controller.jsでstrapi変数の参照エラーが出ますがとりあえずコメントアウトしてビルドを通します
→成功するとプラグインの直下に./distが生成されます。
そしてプロジェクト直下に戻り、さっきのtsconfig.jsonのエラーを修正します。どうやらincludeの./ とexcludeの各パスが重複してるのがまずいようです。
試行錯誤で色々いじったところ、includeを下記のように設定すると通りました。
"include": [
"./src",
"./config",
".env",
"package.json",
"src/**/*.json"
],
プラグインを有効化
お馴染み、config/plugins.tsを作成して下記のようにプラグインを有効にします。
export default {
'strapi-plugin-hello': {
enabled: true,
resolve: './src/plugins/strapi-plugin-hello'
},
}
プラグインの動作確認
React側のtsxファイルを修正するとホットリロードで変更が反映されましたが、server側のtsファイルは
The server is restarting
と出るものの、変更されません。
こちらはプラグイン毎にdevelopコマンドを実行する必要があるようです。
cd src/plugins/strapi-plugin-hello
npm run develop
これでserver側もファイルを修正して（比較的）すぐに反映されるようになりました。
まとめ
あまりちゃんとドキュメントやIssueを読んでないせいかbeta版よりエラーが出た気がしますが、一つ一つはそんなに難しくないので今後に期待、って感じでしょうか。
プロジェクト側をTSにするのはリスク（不具合）が多そうですがプラグイン開発にTS採用するのは全然ありかなと思います。
