TypeScript

Storybookにアイコンでのロケール変更機能を追加する

React + Next.js で、多言語対応したアプリケーションを開発している。 日本語から、英語などのラテン文字で記述する言語に切り替えた場合、文字が長くなり、レイアウトが崩れることがあるため、各言語でのレイアウトを簡潔に確認したい。 アプリケーション…

npm installで使える国旗アイコンセット

Node.js のアプリケーション内で、国旗の画像を使うことになった。 画像を用意するのが面倒だったので、 npm install して使える国旗のアイコンセットがないか調べたのでメモ。 候補 flag-icons country-flag-icons flagpack Iconify パッケージ選定 その他 …

ESLintでスクリプトファイル名のフォーマットを指定する

Next.js + TypeScriptのプロジェクトで、TypeScriptファイル名はローワーキャメルケースにするようコーディング規約を定めていた。 ただ、Javaのように言語側でフォーマットが決まっていないからか、個人の癖が出やすく、アッパーキャメルケース、スネークケ…

拡張子がtsxのファイル内で、型パラメータを持ったアロー関数を宣言する

小ネタ。 TypeScriptでは、アロー関数でジェネリック関数を定義できる。 const generic = <T>(value: T) => ... 拡張子が .ts のファイル内では問題ないが、 .tsx のファイル内でこの記法を用いると、 <T> がタグの開始とみなされ、以下のコンパイルエラーが発生す</t></t>…

JavaScriptで文字列を繰り返したり、配列を特定の値で埋める

JestやStorybookで、テストや表示用に長い文字列や配列を用意するがある。 リテラルで書いていた同僚に、コードレビューで「こんなやり方ができるよ」と教えたら感心されたのでメモ。 文字列 文字列の繰り返し 左埋め・右埋め 配列 配列を特定の値で埋める e…

StorybookのDecoratorの引数を、TypeScriptで型定義する

Storybookのストーリーファイルをtsxで記述しているが、TypeScriptをstrictモードにしているため、Decoratorを定義する際、引数に型を付けないとエラーになる。 // パラメーター 'Story' の型は暗黙的に 'any' になります。 const decorator = Story => ( <div style={{ maxWidth: '400px' }}> <Story /> </div>…

exportしているモジュールのJSDocやTSDocを必須にする

TypeScriptでの開発時、exportしているモジュールに対してはTSDocを書くようコーディング規約を定めたが、ヒアドキュメントを書く習慣のないメンバーが多く、書き漏れが頻発した。 都度コードレビューで指摘するのも面倒なので、ESLintで何とかならないかと…

TypeScriptのinterfaceやtypeで、関数やオブジェクトの型を定義する

TypeScriptのinterfaceやtypeで、関数やオブジェクトの型を定義する際、どんな書き方をすればいいかちょこちょこ迷うのでメモ。 関数 オブジェクト Union型をキーとしたオブジェクト 振り返り 関数 numberを引数に取り、stringを返す関数の場合、以下のよう…

JavaScriptのタグ付きテンプレートで、JavaのString#formatのような関数を作る

Jestでパラメーター化テストする時の it.each のような、バッククォートで囲った中で ${value} を使う書き方について調べてみたところ、タグ付きテンプレートというらしい。 また、それを使ってJavaの String#format のような関数を作れたのでメモ。 タグ付…

Next.js + TypeScript + AWS AmplifyのプロジェクトでJest実行時に「SyntaxError: Unexpected token 'export'」が発生する

Next.js と AWS Amplify を使ったプロジェクトで、TypeScriptのファイルに対してJestのテストを書いたら、 SyntaxError: Unexpected token 'export' エラーが発生。 このエラー自体はよくあるやつだが、設定を大きくいじらず解決する方法を調べるのに結構時…

Next.jsプロジェクトでTypeScriptのimportの並び順を指定する

JavaやKotlinを長く書いてきて、importの並び順、ソートはフォーマッターにお任せだった。 Next.jsをTypeScriptで書いているプロジェクトでも、Javaと同様、importの順序を統一したいと思い、設定したのでメモ。 環境 ESLintプラグインの導入 .eslintrc の記…

typescript-generatorにプリミティブ型を必須プロパティ(non null)にするオプションが追加されていた

以前書いた記事の段階では、 typescript-generator で requiredAnnotations を指定すると、プリミティブ型のフィールド/GetterについてもOptional Properties(null設定可能)扱いとなっていた。 2021年3月の更新で、プリミティブ型をまとめて必須(非null)にで…

typescript-generatorプラグインでJavadocからTSDocを生成する

以前調査したtypescript-generator、その後もパラメーター調整しながら使用しているが、困ったのがヒアドキュメント。 Java側ではJavadocでクラスやプロパティの説明を書いているが、生成したTypeScriptのインターフェース定義ファイルにはデフォルトだと出…

TypeScriptの、はてなふたつの演算子や、はてなドットの演算子は、JavaScriptの新しい構文だった

TypeScript 3.7以降で使える ?? 演算子。 || 演算子より厳密に undefined や null を判定してくれるので多用していたが、こいつの名前は何だろうと思って調べてみたところ、Nullish Coalescing Operator、日本語だとNull結合演算子というらしい。 ついでに、…

JavaクラスからTypeScriptのインターフェース定義を生成するtypescript-generator Maven/Gradleプラグインを試してみた

フロントエンドをTypeScriptで記述することとなり、リクエストやレスポンスで受け渡すデータもTypeScriptで型定義したいという要望がでてきた。 バックエンドはSpring Bootを使ったJavaアプリケーションで、ダブルメンテになると面倒。 JavaのクラスからType…