TypeScriptで出てきたRecordってなに

ChatGPTにコードを書いてもらっていると知らない書き方と出会うことができ、勉強になる。 ChatGPTに書いてもらうことは悪いことばかりじゃないと最近は思うようにしている。 ちょっと前までは反骨心から使ってなかったけど、そう思うようになってからはどんどん活用している。 ただChatGPTを使って学習したことを活用する機会はChatGPTに奪われているけど。 Recordってなに そんなChatGPTが提案してきたコードにRecordという型があったので、どういう型なのか調べてみた。 Record<Keys, Type>はプロパティのキーがKeysであり、プロパティの値がTypeであるオブジェクトの型を作るユーティリティ型です。 とのこと。 例えば、キーがstringで値がnumberのインデックス型を定義するには、 type StringNumber = Record<string, number>; const value: StringNumber = { a: 1, b: 2, c: 3 }; キーがfirstName、middleName、familyNameで、値が文字列になるオブジェクトの型を定義するには、 type Person = Record<"firstName" | "middleName" | "lastName", string>; const person: Person = { firstName: "Robert", middleName: "Cecil", lastName: "Martin", }; こんな感じで使用することができる。 ただ、2つ目の例のようにKeyが確定している型に関しては interface Person { firstName: string; middleName: string; lastName: string; } と何が違うのか。 結果的には同じ構造 上記だと同様の型定義になる。 ただinterface のほうが拡張性が高く、Recordのほうが簡潔に書けるけど、具体的なプロパティ名や構造を明示しにくいとのこと。 じゃあ、Recordはいつ使うのか。 Recordの使い道 Record は多くのキーが同じ型を持つ場合、簡潔に型を定義する時 type WeeklySchedule = Record<"Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday", string>; 動的なキーの集合に対して一律の型を定義したい時 type ApiResponse<T> = Record<string, T>; こんな感じで動的なキーの型付けや簡潔なオブジェクト型定義が必要なときに使えるらしい。

投稿日 · 2024-10-28 · 更新日 · 2024-11-09 · 1 分 · nove-b

TypeScriptで一回unknwonに変換するのはどういう意味があるのか

as unknown as ? as soon asは「できるだけ早く」で、中学生の時、喉が擦り切れるほどむやみに連呼していた記憶がある。 おかげさまで、この意味を30歳超えても忘れていない。 だが、as unknown asは知らなかった。 そもそもunknownってなに? unknownは型が分からないときに使用するらしい。 つまりそれってanyではと思うし、間違っていない。 その両方ともどのような値も代入することができる。 const any1: any = null; const any2: any = undefined; const any3: any = true; const any4: any = 0.8; const any5: any = "Comment allez-vous"; const any6: any = { x: 0, y: 1, name: "origin", }; const unknown1: unknown = null; const unknown2: unknown = undefined; const unknown3: unknown = true; const unknown4: unknown = 0....

投稿日 · 2024-10-27 · 更新日 · 2024-11-09 · 1 分 · nove-b

TypeScriptで定義済みの型からプロパティを取り出し新しい型を作る方法

過去に定義した型から新しい型を生成する TypeScriptで型を定義したのち、その中の一部を使いたくなる時がある。 例えば、Personという型を定義した時、 export interface Person { age: number sex: 'man' | 'woman' bloodType: 'A' | 'B' | 'O' | 'AB' } bloodTypeという型を使用したいという時がある。 そういう時は、 export type BloodType = Person['bloodType'] 上記のように書くことで型を取り出すことができる。 最初から最小で作るの吉? export interface Age { age: number; } export type Sex = 'man' | 'woman'; export type BloodType = 'A' | 'B' | 'O' | 'AB'; export interface Person { age: Age; sex: Sex; bloodType: BloodType; } そもそも上記のように最小で作っておいた方がいい? ただ使わないものも多いので、取り出す方が労力が少なく済みそうな気がする。

投稿日 · 2023-10-18 · 更新日 · 2024-06-07 · 1 分 · nove-b

TypeScriptのIndex Signatureでプロパティに制限をかけたかったので、今更ながらよくよく調べてみた

Index Signatureを使用することでプロパティの型を指定することができる。 例えば、 interface BodyType { [key: number]: { min: number, max: number } } const body:BodyType = { String: { min: 0, max: 230 }, 1: { min:0, max:300 } } console.log(body.String.min)} ] 上記のようにnumber型という風に明示的に宣言することで、Stringという文字列をkeyに指定したことでエラーを吐かせることが可能である。 type '{ hello: { min: number; max: number; }; 1: { min: number; max: number; }; }' is not assignable to type 'BodyType'. Object literal may only specify known properties, and 'hello' does not exist in type 'BodyType'....

投稿日 · 2023-09-26 · 更新日 · 2024-06-07 · 1 分 · nove-b

React NativeにTypeScriptを導入する

TypeScript 関係をインストールする。 npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript 上記コマンドでTypeScriptの依存パッケージをインストールする。 完了するとPackage.jsonが "devDependencies": { "@babel/core": "^7.20.0" }, から "devDependencies": { "@babel/core": "^7.20.0", "@tsconfig/react-native": "^3.0.2", "@types/jest": "^29.5.4", "@types/react": "^18.2.21", "@types/react-test-renderer": "^18.0.1", "typescript": "^5.2.2" }, に更新される。 tsconfig.jsonを作成する Appのルートにtsconfig.jsonを作成し、 { "extends": "@tsconfig/react-native/tsconfig.json" } を記述する。 Tsxファイルの作成と動作確認 最後にJavascriptファイルを*.tsxに変換する。 You should leave the ./index.js entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build. と公式に書かれていたが、そもそもindex.jsを見つけることができなかったからドキュメントが古い? App.tsxに型のない関数を書くとtsエラーが出たので、うまく機能していると思われる。...

投稿日 · 2023-09-15 · 更新日 · 2024-06-07 · 1 分 · nove-b