TypeScriptはフロントエンドとバックエンドでどのように使われているか
普段、開発時にTypeScriptを使用しているものの、どのように解析・実行されているのか今ひとつ理解できていなかったため、今回整理してみることにしました。 1. フロントエンドとバックエンドでのTypeScriptの使われ方 TypeSc...
TypeScript
ようこそ
Hoshico Notes
日々の開発で学んだことや技術的な備忘録を綴っています。
#typescript 👇
Nest.jsでGoogle認証(OAuth2.0)を使う【フロントエンド編】
こちらは 前回の記事 のフロント側の実装になります。 ポイントとしては、 ①Googleログイン後にid_tokenとrefresh_tokenを取得する ②id_tokenが有効期限(1時間)を過ぎていた場合はrefresh_tokenを...
TypeScriptNext.js
Nest.jsでGoogle認証(OAuth2.0)を使う
フロントエンドがNext.jsでバックエンドがNest.jsのアプリケーションにおいて、Google認証を入れたいときのバックエンド側の実装をまとめてみました。 ※ フロントエンドの実装に関しては後日掲載します。 調べた中でいろんな実装方法...
Node.jsNest.jsTypeScript
Next.js App Router用のスニペットを作る
最近はNext.jsにおいてPages RouterではなくApp Routerを使う様になってきましたので 今回は以前作ったNext.js用のスニペットをApp Router仕様に変更していきたいと思います。 ちなみにですがスニペットに関...
Next.jsReactTypeScript
Mapのkey()とvalues()について
久々の更新になります！ さて、今回はMapについて少し掘り下げていきます。 Mapの値取得 Mapの値取得の前にオブジェクトのついての少し触れておきます。 objectでは値の取得を行いたい場合 const fruits = { En: "...
JavaScriptTypeScript
ReactでのonChangeの型について
前回に引き続き、今回はReactのonchangeの型に付け方についてもまとめていこうと思います。 (1) changeEventの基本 changeEventの主な使用ケースとしてはinput要素(inputタグ)やselect要素(se...
TypeScriptNext.jsReact
ReactでのonClickの型について
今回はReactでのonClickの型の付け方についてまとめておこうと思い記事にしてみました。 先に結論ですが、onClickの型は引数でeventをとる場合と取らない場合で型の指定の仕方が変わります。 (1) 引数にeventを取る場合 ...
TypeScriptReact
Next.jsでローカルファイルを選択する
今回はNext.jsでファイルのファイルを選択選択し、選択されたファイル名を表示させる実装についての記事になります。 まずは今回の実装の要件をまとめておきたいと思います。 ①画像ファイル(jpeg/jpg/png)を選択、登録できるようにし...
TypeScriptNext.jsReact
React Hook Formを親子コンポーネントで使用する
今回は繰り返し使用するようなコンポーネントの中でReact Hook Formを使用する際のポイントをまとめていきます。 ※ MUIはv5 / react-hook-form v7 になります (1)イメージ図 下の画像のように(親)コンポ...
TypeScriptReactNext.js
パターンで考えるInfer
TypeScriptのinferについてしっかり理解できるように使用パターンから考えてみました。 ※ 今回はTypeScriptのi nferTypes1.ts を参考にしています。 (1) T extends ( infer U )? U...
TypeScript
TypeScriptの型引数にextendsを使用する
TypeScriptのextendsについての学習のメモ。 ※extendsの継承については今回は触れません。 このextendsを使用すれば、型引数に制約をかける事が可能になります。 ではでは順を追って説明していきます。 ・型引数を持つ型...
TypeScript
JSのindexOfとfindIndexとfindの特徴とTSでの型をほんのりと覚えられるようになるコツ
今更ながらfindIndexというものを最近知ったので、indexOfとfindと一緒にまとめておこうと思います。 ・3つのポイント ３つとも配列に対して、「何かを探す」という操作をするのだが この3つのポイントを知っておけば少しは違いがわ...
TypeScriptJavaScript
TypeScriptの as const を理解する
型アサーション自体は使用することを推奨されていないが、こちらのas constに関しては使用することでより安全に使用できるとのこと。 ・as const とは？ typeof を使用して配列やオブジェクトから型を生成する際に、すべての要素、...
TypeScript
React Hook FormをMUIで使用してみた。
React Hook FormをMUIで使用した時のメモ。 今回はMUIの「TextField」と「CheckBox」に関して考えていきます。 ・型を用意 まずはInputの型を定義 // TextFieldでtitleをCheckBoxで...
ReactTypeScript
Reactのpropsの渡し方と型の付け方
最近Reactのコードを書いていて親から子へのpropsの渡し方って色々あるなと思いまとめてみました。 多分他にも色んな渡し方があると思うので随時更新していきます。 前提として親コンポーネント(App.tsx)から子コンポーネント(Home...
TypeScriptReact
インデックスシグネチャとMappedTypesについて
今回はTypeScriptのインデックスシグネチャとMappedTypesについての投稿になります。 ・インデックスシグネチャとは？ 「どんなプロパティ名(※ 指定された任意の型を持つ)が来てもOK」にできる特殊な記法になります。 具体的に...
TypeScript