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; } そもそも上記のように最小で作っておいた方がいい？ ただ使わないものも多いので、取り出す方が労力が少なく済みそうな気がする。

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'....

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エラーが出たので、うまく機能していると思われる。...

Vite（読み方はヴィート）とは？ 次世代フロントエンドツール 最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。 瞬時にスタートするサーバ 超高速な HMR 豊富な機能 最適化されたビルド ユニバーサルなプラグイン 完全に型定義がされている API これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。 React & TypeScrpt の環境構築 $ npm create vite@latest MyApp -- --template react-ts というコマンドを叩くだけで、 Need to install the following packages: create-vite@4.2.0 Ok to proceed? (y) y √ Package name: ... MyApp Scaffolding project in C:\Project\MyApp... Done. Now run: cd MyApp npm install npm run dev 環境が構築される。 この時点でもうReactの開発環境が構築されている。 Tailwindを導入する reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 上記コマンドでTailwindのインストールと設定ファイルを作成する。...