typescript

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- typescript [2022/01/14 02:59] – 作成 nullpon
+++ typescript [2025/09/14 13:21] (現在) – nullpon
@@ 行 2: / 行 2: @@
 # TypeScript
-## Type Gaurd
+- [TypeScript: JavaScript With Syntax For Types.(typescriptlang.org)](https://www.typescriptlang.org/)
+- [TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜(typescriptbook.jp)](https://typescriptbook.jp/)
+## Getting Started
 ```
+npm install --save-dev typescript
+```
+Node.JSアプリケーションを作成する場合は以下も入れる
+```
+npm install --save-dev @types/node
+```
+tsconfigの作成
+```
+npx tsc --init
+```
+## Type Guard
+Hoge型を定義
+```javascript
 interface Hoge {
   id: number
@@ 行 10: / 行 35: @@
   wang: string
 }
+```
+Hoge型かどうかチェックする関数を定義（Type Guard）
+```javascript
 function isHoge(arg:unknown): arg is Hoge {
   if (arg === null || arg === undefined) return false;
@@ 行 20: / 行 49: @@
     typeof hoge.wang === 'string'
 }
+```
+API経由で取得したJSONの値をHoge型として扱えるようにする
+```javascript
 const res = await fetch('https://api.example.com/hoge/1')
 const json = res.json();
-console.log(json.nyan) // jsonはany型なので、これはエラーになる
+// jsonはany型なので型チェックが働かない
+console.log(json.nyan)
+// jsonがHoge型と確認されたのでOK
 if (isHoge(json)) {
-  console.log(json.nyan);  // jsonがHoge型と確認されたのでOK
+  console.log(json.nyan);
+}
+// 雑にキャストするのはあまり安全ではない
+const hoge = json as Hoge;
+console.log(hoge.nyan)
+```
+API経由で取得したJSONがHogeの配列の場合
+```javascript
+const res = await fetch('https://api.example.com/hoge/1')
+const json = res.json();
+if (Array.isArray(json)) {
+  const hoges = json.filter<Hoge>((item): item is Hoge => isHoge(item));
 }

typescript.1642129181.txt.gz · 最終更新: 2022/01/14 02:59 by nullpon