TypeScript
props を受け取る子コンポーネントは React.memo した上で props で渡される関数やオブジェクトが useCallback, useMemo でメモ化されてないと親コンポーネントの再描画時に再描画される。 依存関係がないコンポーネントはラッパーコンポーネントを作り chil…
React v18 では暗黙的に props に含まれていた `children` は、使用するなら明示的に props の型を定義する必要がある。`React.VFC` は `React.FC` と同じになったので非推奨になった。
前回までのあらすじ。Vite で React (TypeScript) のプロジェクトを作ってパスエイリアスの設定をいい感じにしました 今回はいつもの ESLint と Prettier を導入します。結論から言えば VIte だからという事は特になく、`create-react-app` で作成したプロジ…
`vite-tsconfig-paths` プラグインを使うのが簡単でオススメ！ `tsconfig.json` にパスエイリアスの設定を書いて、`vite.config.ts` にはプラグインを読み込ませるだけにできるのでパスエイリアスの設定が一元化できます。
`npm create vite@latest ` コマンドを実行すれば CLI で React + TypeScript なプロジェクトがサクッと作れてすごく凄い!!
JEST で引数を取る関数のエラーの発生をテストする場合は expect 内で関数が実行されるように、テストする関数を無記名関数などでラップする必要がある
毎回 ESLint と Prettier の設定書いて、パスエイリアスの設定して、なんやかんや設定して…とメンドーなので create-react-app --template typescript ベースでゆるゆるな自分用ボイラーテンプレート作りました。 ボイラーテンプレート やったこと ESLint は…
ハンズオンとかチュートリアルでよく出てくる欄ラムな文字列を作る処理をちゃんとみてみようと思った export const getRandomString = (n: number): string => { const S = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; return Array…
例えば次ようなサインアップフォームのフィールドの値を引数に取るバリデーションを行う関数あるとして、この関数の型を別途定義したい interface SignUp { username: string; email: string; password: string; } const validation = ({ username, email, p…
Material UI の <TextField /> コンポーネントは出力時にいい感じに div で囲ってくれるからか、直接 readonly 属性を渡しても設定されなかった。 @mui/material@5.2.7 NG: <TextField /> に readonly 属性を渡しても readonly な状態にはならない disabled は効くけど readonly は効か</textfield></textfield>…
Material ui の Modal のサンプルを TypeScript にコピペしたら JSX でインラインスタイルの指定に CSS のオブジェクトを渡している箇所で形エラーになってしまった const style = { // インラインスタイルに使う CSS }; const MyComponent = () => { return <div style={style} /></div>…
eslint-plugin-unused-imports と eslint-plugin-import プラグインを使うといい感じにできる
結論 tsconfig-paths を使って ts-node, ts-node-dev に -r tsconfig-paths/register オプションを渡してあげれば OK
Moment.js くんが卒業してからフロントエンドでの日付操作には day.js か date-fns を使っていました。 今回年・月・日が別々の select ボックスで日付を選択する UI があり 2月31日のような存在しない日付が選べてしまうので、存在しない日付を判定しようと…
npx create-react-app --template typescript で作成した TypeScript の React アプリでビルド時に初めて出会うエラーになってしまったのでメモ "react": "^17.0.2", "react-dom": "^17.0.2", "typescript": "^4.1.2", build 時に Could not find a required…
day.js の isBetween プラグインを使う IsBetween IsBetween adds .isBetween() API to returns a boolean indicating if a date is between two other dates. cf. IsBetween · Day.js npm i datjs で既にインストールされているので、別途プラグインを impo…
環境: "typescript": "^4.4.4" {[key in Union]: value type} で定義できる // この配列の値がキーになるオブジェクトの型を作りたい const luminas = ['OzoraAkari', 'HikamiSumire', 'ShinjoHinaki'] as const; type LuminasValues = typeof luminas[numbe…
TypeScript で addEventListener のコールバック関数で Event.target, Event.currentTarget を使おうとしたら結構めんどかったのでメモ Event.target と Event.currentTarget の違い これはそもそも JavaScript の違いですが、Event.target はイベントが発生…
例えばフォーム送信で取り扱う name 属性は決まっているから name 属性が Union型が用意されていて、何かしらのイベントから event.target.name のような引数を渡された時に、フォームで取り扱う name 属性かどうかの型判定をしたいような場合。 type FieldN…
テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました！！！！ CDN から読み込まれている j…
JS と CSS を HTML テンプレートで読み込んでという化石な環境で開発をしています。 前回は SCSS だけ webpack でビルドする環境を作りました。 今回は Vanilla JS でブラウザ対応を考えながら書くのは流石に DX が最悪なので最低限のトランスパイルできる環…
TypeScript React の FC, VFC という型は過渡期で将来的に変更になる可能性があるからコンポーネントの返す型は JSX.Element にした方が良いという記事を読んで新しいプロジェクトでは JSX.Element を使うようにしたのですが、そこでハマったことのメモ null…
react-hook-form というライブラリを使ってフォームを作っていたのですが、input や textarea が Atom レベルのコンポーネントになっており、ライブラリの都合で ref を渡す必要があったので forwardRef の型を頑張ったメモ。 "react": "17.0.2" "typescript…
const soleil = ['星宮いちご', '霧矢あおい', '紫吹蘭'] みたいな配列から '星宮いちご' | '霧矢あおい' | '紫吹蘭' という配列の値の Union 型が作りたい。 typeof list[number] で配列の値の Union 型が作れる！ const soleil = ['星宮いちご', '霧矢あお…
create-react-app した React アプリでは何もしなくても SVG ファイルを import { ReactComponent as MySVGImage } from './svg/my-image.svg'; で読み込みコンポーネントとして扱うことができました。 Next.js でも同じことができると思ったのですが、creat…
React hooks では custom hooks を多用するのですが、custom hook で返す関数がデフォルト引数を取る時の型をいい感じに書きたかったのメモ。 デフォルト引数を取る関数を返す Custom Hook こんな Hooks の型をいい感じに書きたい export const useCount = (…
バックエンドの API がまだできてないプロジェクトで Next のフロントを作成することになり開発中の API との通信に噂の MSW を使ってみることにしました。 Next.js 特有の問題でちょいハマりしたので導入完了したところまでのメモ。 MSW (Mock Service Work…
Svelte 公式の TypeScript 化したプロジェクトで、.svelte テンプレート内で自作の TypeScript ファイルをインポートしたらコンパイルエラーになってしまいました。 Svelte の TypeScript 化 公式のテンプレート README に書かれているスクリプトを実行した…
LP作って〜って言われたので、ほな Svelte でやってみよっかな〜と思い Svelte に入門しました。 Svelte はデフォルトでは CSS in JS でスコープのあるスタイルが書けるのですが、共通して使いまわしているコンポーネントのスタイルを親コンポーネントで指定…
TypeScript な React のフォームを作成していて new FormData() で取得したフォーム内容のデータの型を送信する形式の interface から作成したかったのメモ type Entries = { [K in keyof T]: [K, T[K]]; }[keyof T][]; で Object.entries() したときの型が…
