Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

typescript学習日記

TypeScript学習日記 その0013 readonly修飾子を解除する

参考にさせていただいたページ How to Change readonly Properties to be Writable in TypeScript? - Designcise Change a readonly property to mutable in TypeScript | bobbyhadz Improved control over mapped type modifiers: TypeScript: Documentatio…

ReactのeventHandler関数の型を定義する

参考にさせていただいたページ ElementやEventに型をつけよう 型定義と関数定義を別々にやる たぶんこんな感じ import { FocusEventHandler, ChangeEventHandler, CompositionEventHandler } from 'react'; type HandleBlur = FocusEventHandler<HTMLInputElement>; type Handl</htmlinputelement>…

TypeScript学習日記 その0012 とてもやさしいMapped Types入門

参考にさせていただいたページ とても参考になる入門と初級の記事です。 TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita はじめに 以下のページを読んで、Mapped Typesが理解できる人はこの記事を読む必要は全くありません。 TypeScriptの型入門 - …

TypeScript学習日記 その0011 とてもやさしいinfer入門

参考にさせていただいたページ TypeScript 2.8 の Conditional Types について - Qiita TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita この記事について inferまじで何もわからない。という私のような人が少しとっかかりをつかむ超入門記事です。 …

TypeScript学習日記 その0010 便利な型Tipsメモ

はじめに ほんとに便利な型Tipsを公開してくださっている記事がいくつかあり、あとで見つからなくなったらつらいのでメモしておきます。 リンク TypeScriptで自作している便利型Tips 辞書を作る関数に TypeScript で執拗に型をつける - Object.create(null) …

TypeScript学習日記 その0009 readonlyな文字列の配列をキーとしてオブジェクトを作成する関数

参考にさせていただいたページ TypeScriptの型入門 - Qiita 辞書を作る関数に TypeScript で執拗に型をつける - Object.create(null) makeObj.tsに関数を定義する 以下のような関数を定義します。 type MyKeys<T extends string> = readonly T[] export default function makeO</t>…

TypeScript学習日記 その0008 引数の型が決まっていない関数を定義する(関数実行時に引数の型が決まる関数を定義する)

参考にさせていただいたページ TypeScriptの型入門 - Qiita はじめに 関数を定義する段階では引数の型は決めずに、実行時に渡す引数の型によって決まってほしいときがあると思います。 そのようなときに便利な方法です。 関数の定義の仕方 ジェネリクスを使…

TypeScript学習日記 その0007 構造的部分型について学習する

参考にさせていただいたページ TypeScriptの型入門 - Qiita TypeScript の構造的部分型とプリミティブ型について - 30歳からのプログラミング はじめに きっかけとなったのはこちら「TypeScriptの型入門 - Qiita」の入門記事であり、キーが多い方が少ない方…

TypeScript学習日記 その0006 オブジェクトの型を複数定義して|で合わせたり&で合わせたりしてみる(union型とintersection型)

オブジェクトの型を定義する 以下のように定義しました。 type MyObjA = { a1: string; a2: string } type MyObjB = { b1: string; b2: string } type MyObjC = { c1: string; c2: string } type MyObjUnion = MyObjA | MyObjB | MyObjC type MyObjAnd = MyO…

TypeScript学習日記 その0005 TypeScriptのバージョンを確認する(tscのバージョンを確認する)

参考にさせていただいたページ typescriptのバージョンを確認する | mebee 確認方法 以下のコマンドで確認できると思います。 npx tsc -v

TypeScript 学習日記 その0004 関数の型を定義する

参考にさせていただいたページ 関数の型 - TypeScript Deep Dive 日本語版 はじめに いくつか方法がありますが、少し書いてみます。 後日もう少し充実させていこうと思います。 例として、以下のような「引数が2つあってオブジェクトを返す関数」の型を定義…

TypeScript 学習日記 その0003 文字列が入っている配列を元にStringLiteralTypesの型を定義する

参考にさせていただいたページ Template Literal Typesについて TypeScript: Documentation - Template Literal Types 配列を元にStringLiteralTypesの型を定義する方法について TypeScript array to string literal type - Stack Overflow はじめに 以下の…

TypeScript 学習日記 その0002 キーが未確定なobjectにデータを追加する方法について考える

参考にさせていただいたページ keyof typeofの使い方 [TypeScript] - Qiita TypeScriptの型入門 - Qiita Index signature(インデックス型) - TypeScript Deep Dive 日本語版 はじめに 注意して使用しましょう。 「キーが未確定なobjectを先に作って後から…

TypeScript 学習日記 その0001 objectのキーを元にStringLiteralTypesの型を定義する

参考にさせていただいたページ TypeScript 2.1のkeyofとかMapped typesがアツい - Qiita 今日のバージョン TypeScript 4.2.3 文字列の型について 以下のようにすると、変数keyの型はstringになります。 const key: string = 'keyNameA' 以下のようにすると、…