<h2 id="h960097c6e4">Genericsの型引数が複数あるパターン</h2><p>以下のようにカンマ区切りで記述する。</p><pre><code>const foo = &lt;T, K, U&gt;( foo: T, bar: K, baz: U) =&gt; {
  return {};
}

</code></pre><p>また、以下のように型引数それぞれに初期値やextendsの制約を付け加えることも出来る。</p><pre><code>const foo = &lt;T extends string, K extends number, U = boolean&gt;( foo: T, bar: K, baz: U) =&gt; {
  return {};
}

</code></pre><p><br></p><h2 id="he82c9231f4">Lookup Types</h2><p>以下のようにT[K]の構文で記述する。</p><pre><code>const foo = &lt;T extends string, K extends number, U = boolean&gt;( foo: T, bar: K, baz: U) =&gt; {
  return {};
}

type Obj = {
  a: number
  b: boolean
}

type Foo = Obj["a"]

</code></pre><p><br></p><h2 id="h3cc4fad3cd">GenericsとLookup Typesが合わさったパターン</h2><p>第一引数のTは第二引数で用いることができる。 extendsとkeyofを用いて、オブジェクトTのkeyをKに制約している。 それにより、Lookup Typesのobj[key]でエラーが出なくなる。</p><pre><code>const getProperty = &lt;T, K extends keyof T&gt;( obj: T, key: K) =&gt; {
  return obj[key];
}

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
}

const hoge = getProperty(obj, "bar")
// const hoge: number

</code></pre><p>また、setPropertyまた、の例として以下のように記述する。 第三引数にvalue: T[K]とすることで、valueはnumber型となる。</p><pre><code>const getProperty = &lt;T, K extends keyof T&gt;( obj: T, key: K) =&gt; {
  return obj[key];
}

const setProperty = &lt;T, K extends keyof T&gt;( obj: T, key: K, value: T[K]) =&gt; {
  obj[key] = value;
}

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
}

const hoge = getProperty(obj, "bar")

setProperty(obj, "bar", 100);

</code></pre><p><br></p><h2 id="h3bba5ef41e">JavaScriptで用いられるGenerics</h2><h3 id="h92445e4abd">map関数</h3><p>map関数の場合、以下のように型推論が上手く動いている。 map自体がGenericsになっていて、暗黙的な型解決でうまく推論してくれている。</p>

Genericsの型引数が複数あるパターン

<h2 id="h2561bc8329">関数Genericsの構文</h2><p>以下のように記述する。</p><pre><code>function foo&lt;T&gt;(arg: T) {
  return { value: arg };
}

</code></pre><h3 id="h9dc9a084bb"><br>関数Genericsの使い方</h3><p>以下のように記述する。</p><pre><code>function foo&lt;T&gt;(arg: T) {
  return { value: arg };
}

const foo1 = foo&lt;number[]&gt;([1, 2]);

</code></pre><h3 id="h1ecbfa920b"><br>アロー関数での記述方法</h3><p>以下のように引数の()の前にGenericsを記述する。</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {
  return { value: arg };
}

const foo1 = foo&lt;number[]&gt;([1, 2]);

</code></pre><p><br></p><h2 id="hd30381c18b">暗黙的な型解決について</h2><p>関数のGenericsは暗黙的に型が解決される仕組みがある。 以下のように&lt;string&gt;のようにしなくても引数の型を推論して、暗黙的に型を決定してくれる。</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {
  return { value: arg };
}

const foo1 = foo("");
// value: string;
const foo2 = foo(1);
// value: number;
const foo3 = foo(false);
// value: number;

</code></pre><p>このおかげで関数でGenericsを使用したとしても、使う側が毎回型指定をしなくて良くなるので、 非常に便利な機能。<br></p><h2 id="h6ab4807e50">どういう時に型引数を使うのか</h2><h3 id="h61f97fc967">Nullableかもしれない場合</h3><p>Nullableかもしれない場合に以下のように型引数にnullを入れて対応する。 ※Nullable：Nullになりうる値</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {
  return { value: arg };
}

const foo1 = foo&lt;string | null&gt;("");
// value: string | null;

</code></pre><p>Nullableに限らずUnion Types等で後から引数に何が入ってくるかわからない場合に、 型引数を使用することが多い。<br></p><h2 id="h2af70d7f4b">関数Genericsのextendsによる型制約</h2><p>関数Genericsの型引数に制約を加えたい時にextendsによる型制約を用いる。</p><pre><code>const foo = &lt;T extends string&gt;(arg: T) =&gt; {
  return { value: arg };
}

const foo1 = foo&lt;string&gt;("");
const foo2 = foo(1); // 型 'number' の引数を型 'string' のパラメーターに割り当てることはできません。

</code></pre><p>関数Genericsのextendsによる型制約は重要なもので、しっかりと理解しておく。<br></p><h2 id="h0cf9139d7d">なぜ関数Genericsのextendsによる型制約は重要なのか</h2><p>argはある程度型を特定させるために必要で、もしextendsによる型制約が無かったら、 argが中でどのような型になっているかが分からなくなってしまう。</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {

  // argが中でどのような型になっているかが分からない

  return { value: arg };
}

</code></pre><p>そのため、型制約がないとunknownとして扱われてしまい、メソッド等を呼び出せなくなってしまう。</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {

  arg.
  // メソッドにアクセス出来ない

  return { value: arg };
}

</code></pre><p>型制約があると</p><pre><code>const foo = &lt;T extends string&gt;(arg: T) =&gt; {

  arg.toUpperCase()
  // メソッドにアクセス出来る

  return { value: arg };
}

</code></pre><p><br></p><h2 id="hf33b8535b8">関数Genericsのextendsによる型の絞り込み</h2><p>Union Typesでstringまたはnumber等の場合、以下のように上手く扱えなくなるケースが出てくる。</p><pre><code>const foo = &lt;T extends string | number&gt;(arg: T) =&gt; {

  arg.toUpperCase
  // プロパティ 'toUpperCase' は型 'string | number' に存在しません。
  // プロパティ 'toUpperCase' は型 'number' に存在しません。

  return { value: arg };
}

</code></pre><p>そういった時に型の絞り込みを行い対応する。</p><pre><code>const foo = &lt;T extends string | number&gt;(arg: T) =&gt; {
if(typeof arg === "string") {
  return { value: arg.toUpperCase() };
}

  return { value: arg.toFixed() };
}

</code></pre><p>型引数がUnion Typesの場合でも型の絞り込みを使うことによって、 関数内でうまく扱える。<br>ネストされたオブジェクトになっているなど、複雑なUnion Typesの場合でも ユーザー定義のType Guardを使うことによって型解決できる。</p>

関数のGenerics

<h2 id="h27ec96f9e3">Genericsとは？</h2><p>型の決定を遅延できるもの。<br>基本的には以下のように記述する。</p><pre><code>type Foo&lt;T&gt; = {
&nbsp;value: T;
};

const foo: Foo&lt;number&gt; = {
&nbsp;value: 0,
};</code></pre><p><br></p><h3 id="h6c27291808">Genericsで使用されるTやKなどの由来</h3><p>Genericsで使用されるTやKなどの由来は以下の通り。</p><ul><li>T：Type</li><li>K：Key</li><li>U：Unknown</li><li>E：Element</li></ul><p>以上の4つが慣例的によく使われるので覚えておくと良い。<br></p><h2 id="h17840b730e">Genericsの良さ</h2><p>後から使いまわしたりする際に、型を自由に定義することができる。</p><pre><code>type Foo&lt;T&gt; = {
&nbsp;value: T;
};

const foo1: Foo&lt;number&gt; = {
&nbsp;value: 0,
};
const foo2: Foo&lt;string&gt; = {
&nbsp;value: "",
};
const foo3: Foo&lt;number[]&gt; = {
&nbsp;value: [1, 2, 3],
};</code></pre><p>Genericsじゃなかったらvalueを定義し直さなければならなくなる。<br></p><h2 id="h4f4123221b">Genericsのユースケース</h2><p>以下の例のように後からJapaneseやAmericanの型が決定させたい場合に使われる。</p><pre><code>type User&lt;T&gt; = {
&nbsp;name: string;
&nbsp;state: T;
};

type Japanese = User&lt;"東京都" | "大阪府"&gt;
type American = User&lt;"CA" | "NY"&gt;

const user1: Japanese = {
&nbsp;name: "田中",
&nbsp;state: "東京都",
};

const user2: American = {
&nbsp;name: "taylor",
&nbsp;state:"CA",
};</code></pre><p><br></p><h2 id="h0c099aa8ff">Genericsの初期値</h2><p>&lt;T = string&gt;とすることで、初期値がstringとなる。<br>そのため、foo1でFoo&lt;string&gt;としなくても、初期値はstringだと暗黙的に分かっているので問題ない。</p><pre><code>type Foo&lt;T = string&gt; = {
&nbsp;value: T;
};

const foo1: Foo = {
&nbsp;value: "",
};
const foo2: Foo&lt;number&gt; = {
&nbsp;value: 111,
}</code></pre><p><br></p><h2 id="h70f6b5f46f">Genericsのextendsによる型制約</h2><p>Genericsの型引数に制約を加えたい時にextendsによる型制約を用いる。<br>以下のコードだと、extendsでstringを指定しているので、stringに互換性がないnumberはエラーとなる。</p><pre><code>type Foo&lt;T extends string&gt; = {
&nbsp;value: T;
};

const foo1: Foo&lt;string&gt; = {
&nbsp;value: "",
};
const foo2: Foo&lt;"abc"&gt; = {
&nbsp;value: "abc",
};
const foo3: Foo&lt;number&gt; = { // 型 'number' は制約 'string' を満たしていません。
&nbsp;value: 123,
};</code></pre><p><br></p><h2 id="h51cf99d43e">Genericsの初期値とextendsによる型制約の組み合わせ</h2><p>シンプルに = string と繋げて記述すればOK。</p><pre><code>type Foo&lt;T extends string = string&gt; = {
&nbsp;value: T;
};

const foo1: Foo = {
&nbsp;value: "",
};
const foo2: Foo&lt;"abc"&gt; = {
&nbsp;value: "abc",
};</code></pre>

Genericsの基礎

<h2 id="h064ebc1ee6">ユーザー定義のType Guardがなぜ必要か？</h2><p>以下のように、valueがanyだった場合、if文で絞り込んでもanyとなってしまい、<br>Type Guardが機能しなくなってしまう。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const foo = (value: any) =&gt; {
&nbsp;if(value.lang === "ja") {
&nbsp;&nbsp;return value;
&nbsp;&nbsp;// value: any
&nbsp;}
&nbsp;return value;
&nbsp;// value: any
};</code></pre><p>この時に生きてくるのがユーザー定義のType Guard。<br></p><h2 id="h1b859035b2">ユーザー定義のType Guardの構文</h2><p>関数の返り値がtrueの場合、is〇〇で指定した型が適用される。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const foo = (value: any) =&gt; {
&nbsp;if(isUserA(value)) {
&nbsp;&nbsp;return value;
&nbsp;&nbsp;// value: UserA
&nbsp;}
&nbsp;return value;
&nbsp;// value: any
};</code></pre><p>注意点として最後にreturnで返しているvalueの型がanyとなっている。<br>そもそもvalueはanyとしているので、事前にisUserAで絞り込んでも最終的にanyの可能性が消える訳ではないため、UserBではなくanyとなる。<br>もし、UserBも絞り込む場合は以下のようにUserBも追加する。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const isUserB = (user: UserA | UserB): user is UserB =&gt; {
&nbsp;return user.lang == "en"
}

const foo = (value: any) =&gt; {
&nbsp;if(isUserA(value)) {
&nbsp;&nbsp;return value;
&nbsp;&nbsp;// value: UserA
&nbsp;}
&nbsp;if(isUserB(value)) {
&nbsp;&nbsp;return value;
&nbsp;&nbsp;// value: UserB
&nbsp;}
&nbsp;return value;
&nbsp;// value: any
};</code></pre><p><br></p><h2 id="h936a7e2242">ユーザー定義のType Guardがよく使われる事例</h2><h3 id="hf50506bb3d">非同期処理</h3><p>自分の監視の範囲外からデータを取得する場合にレスポンスに型を付与することが難しい。<br>今は色々と技術はあるが、非同期処理で得たデータは型が付いていないことが多い。<br>そのため、ユーザー定義のType Guardを使うことによって解決していく。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const isUserB = (user: UserA | UserB): user is UserB =&gt; {
&nbsp;return user.lang == "en"
}

const foo = async () =&gt; {
&nbsp;const res = await fetch("");
&nbsp;const json = await res.json();
&nbsp;if(isUserA(json)) {
&nbsp;&nbsp;return json.lang
&nbsp;&nbsp;// lang: "ja"
&nbsp;}
};</code></pre><p>外部のAPIを叩いた時のレスポンスに型をつけたい場合は上記のように使用する。<br></p><h3 id="h2981cb15be">filter関数</h3><p>現状、JavaScriptのfilter関数を使っても型まで絞り込むことが出来ない。<br>それを型付きで絞り込むためにユーザー定義のType Guardを用いる。<br><br>通常、以下のようにfilter関数で"ja"のユーザーを絞り込めるが、ここでは型まで絞り込めない。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const isUserB = (user: UserA | UserB): user is UserB =&gt; {
&nbsp;return user.lang == "en"
}

const users: (UserA | UserB)[] = [
&nbsp;{ name: "たなか", lang: "ja" },
&nbsp;{ name: "やまだ", lang: "ja" },
&nbsp;{ name: "ジョニー", lang: "en" },
];

const japanese = users.filter((user) =&gt; user.lang === "ja");
// japanese: (UserA | UserB)[]</code></pre><p>そこで、isUserAの(user.....)の箇所と、filter()内が同様の構文になっていることに着目し、<br>以下のように記述することで、型を絞り込むことができる。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const isUserB = (user: UserA | UserB): user is UserB =&gt; {
&nbsp;return user.lang == "en"
}

const users: (UserA | UserB)[] = [
&nbsp;{ name: "たなか", lang: "ja" },
&nbsp;{ name: "やまだ", lang: "ja" },
&nbsp;{ name: "ジョニー", lang: "en" },
];

const japanese = users.filter(isUserA);
// japanese: UserA[]

const notJapanese = users.filter(isUserB);
// notJapanese: UserB[]</code></pre>

ユーザー定義のType Guard

<h2 id="h493b5cce24">Type Guard（型ガード）とは</h2><p>型の絞り込み。<br>型が複数考えられる場合にType Guardで型を特定していくこと。<br></p><h2 id="hb2cb5d0aa3">tyepofを使ったType Guard</h2><p>以下のように、typeof用いることで型の絞り込みが出来る。</p><pre><code>export const foo = (value: string | number | boolean) =&gt; {
  if(typeof value === "string") {
    return value;
    // value: string
  }
  if(typeof value === "number") {
    return value;
    // value: number
  }
  return value;
  // value: boolean
};</code></pre><p><br></p><h2 id="he5f1e1b8dd">JavaScriptや演算子を使ったType Guard</h2><h3 id="h635129e393">JavaScriptを使ったType Guard</h3><p>Array.isArray()のようなJavaScriptのメソッドを用いて、型の絞り込みが出来る。</p><pre><code>export const foo = (value: string | string[]) =&gt; {
  if(Array.isArray(value)) {
    return value;
    // value: string[]
  }
  return value;
  // value: string
};</code></pre><p><br></p><h3 id="h018862eb41">演算子を使ったType Guard</h3><p>例えば以下のように論理否定演算子を用いて、valueがfalsyだった場合にif文の中を返すことで、<br>undefinedの可能性を消去できる。</p><pre><code>export const foo = (value?: string) =&gt; {
  if(!value) {
    return value;
    // value: string | undefined
  }
  return value;
  // value: string
};</code></pre><p>こちらは頻出で、React等を使っていて上からpropsが渡ってきた時にpropsの値がオプショナルだった場合に可能性を消去する。そして、下のreturn文でコンポーネントを記述する。のような場面で出てくる。<br><br>ちなみに、if文内はvalue: string | undefinedとなっているが、<br>空文字に!を付けるとtruthyとなる=条件分岐に入りstringの可能性が残る。ということ。<br>実際は以下のように、nullやただのreturnにする。</p><pre><code>export const foo = (value?: string) =&gt; {
  if(!value) {
    return null;
  }
  return value;
};</code></pre><p>or</p><pre><code>export const foo = (value?: string) =&gt; {
  if(!value) {
    return;
  }
  return value;
};</code></pre><p><br></p><h2 id="hf49cdaacd3">in演算子を使ったType Guard</h2><p>以下のように"nickname" in valueとすることで、valueにnicknameがあるかどうかで、<br>型の絞り込みが出来る。</p><pre><code>type UserA = { name: string };
type UserB = { name: string; nickname: string };

export const foo = (value: UserA | UserB) =&gt; {
  if("nickname" in value) {
    return value;
    // value: UserB
  }
  return value;
  // value: UserA
};</code></pre><p><br></p><h2 id="h09a21d397e">タグ付きUnion Types(Discriminated Union,Taggrd Union)を使ったType Guard</h2><p>以下のようにUserAもUserBも同じようなプロパティを持っている時に、<br>タグ付きUnion Typesを用いて型の絞り込みが出来る。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

export const foo = (value: UserA | UserB) =&gt; {
  if(value.lang === "ja") {
    return value;
    // value: UserA
  }
  return value;
  // value: UserB
};</code></pre><p>実際にはAdminと一般ユーザーを分けたりするようなtype,kind,id等をよく見るが、特に決まりはなくいろんなプロパティがTagとして使われる。<br></p><h2 id="h8d3a214b81">switch文を使ったType Guard</h2><p>以下のように、switch文を用いて型の絞り込みが出来る。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };
type UserC = { name: string; lang: "fr" };

export const foo = (value: UserA | UserB | UserC) =&gt; {
  switch (value.lang) {
    case "ja": {
      return value;
    }
    case "en": {
      return value;
    }
    case "fr": {
      return value;
    }
    default: {
      throw Error("lang is not defined!");
    }
  }
};</code></pre>

Type Guard（型ガード）の色々な例

<h2 id="hfabd3b157d">Index Signature</h2><p>オブジェクトのプロパティを動的に追加したい時に使用する。<br>「key」の部分はkeyでは無い文言でも問題ないが、慣習的に「key」がよく使用される。</p><pre><code>export type User = {
  name: string;
  [key: string]: string;
};

const user: User = {
  name: "テスト",
  account: "test",
}</code></pre><h2 id="h62956985f7">Index Signatureの欠点</h2><h3 id="h4bc8198a36">他の型のプロパティがある場合に不都合が起こる。</h3><p>Index Signatureでstring型を指定しているので、number型が入るとエラーとなる。</p><pre><code>export type User = {
  name: string;
  age: number;
  [key: string]: string;
};

const user: User = {
  name: "テスト",
  age: 25,
  account: "test",
}</code></pre><p>以下のようにUnion Typesで指定することで回避することが可能。</p><pre><code>export type User = {
  name: string;
  age: number;
  [key: string]: string | number;
};

const user: User = {
  name: "テスト",
  age: 25,
  account: "test",
}</code></pre><p>ただし、他のプロパティと型が違う場合には色々な型を付与しなければならないのは、Index Signatureの欠点。</p><h3 id="hbe67c495a3">存在しないプロパティに対してundefinedを付与して考慮しなければいけない。</h3><p>以下のように、undefinedを付与することで対処は出来る。</p><pre><code>export type User = {
  name: string;
  age: number;
  [key: string]: string | number | undefined;
};

const user: User = {
  name: "テスト",
  age: 25,
  account: "test",
}</code></pre><p>ただし、存在するプロパティに対してもundefinedが付与されてしまうため、使い勝手が悪くなってしまう。<br>そのため、typeof等を使用して絞り込まないとメソッドにもアクセス出来ない。<br>Index Signatureは便利ではあるが、型がもろくなってしまうので多用するべきではない。</p><h2 id="h08c35e25fe">Mapped Types</h2><p>以下の2点に大きく分類できる。</p><ul><li>オブジェクトのプロパティ名を限定する場面</li><li>ジェネリクスと組み合わせて便利な型を作り出す場面</li></ul><p>以下の[K in …]の「K」の箇所は何でも良いが、慣習的にKeyの意でKやPropertiesの意でPとすることが多い。</p><pre><code>export type User = {
  name: string;
} &amp; PersonalData;

type PersonalData = {
  // height: number;
  // weight: number;
  [K in "height" | "weight"]: number;
}

const user: User = {
  name: "テスト",
  height: 178,
  weight: 65,
}</code></pre><h2 id="h86dc0b4385">Mapped Typesのメリット</h2><h3 id="h4013aef312">別の型から参照することが出来る</h3><p>以下のようにkeyofや更にkeyof tepeofで変数から直接プロパティ名を指定することも出来る。</p><pre><code>export type User = {
  name: string;
} &amp; PersonalData;

const foo = {
  height: 200,
  weight: 100,
}

type PersonalData = {
  // height: number;
  // weight: number;
  [K in keyof typeof foo]: number;
}

const user: User = {
  name: "テスト",
  height: 178,
  weight: 65,
}</code></pre><h3 id="ha593f9aa7d">一括で色々な指定をすることが出来る</h3><p>以下のようにMapped Typesの後に「?」を付けることでオプショナルにすることが出来るため、****「****weight」が無くても必須ではないのでエラーとならなくなる。</p><pre><code>export type User = {
  name: string;
} &amp; PersonalData;

type PersonalData = {
  // height: number;
  // weight: number;
  [K in "height" | "weight"]?: number;
}

const user: User = {
  name: "テスト",
  height: 178,
}</code></pre><p>ちなみに、このオプショナルの書き方はIndex Signatureでは出来ないため注意。<br>以下のようにオブジェクトのような感じでPersonalData[K]とすることで、PersonalDataのnumber等を取り出すことができる。</p><pre><code>type PersonalData = {
  height: number;
  weight: number;
  realName: string;
}
type optionalPersonalData = {
  [K in keyof PersonalData]?: PersonalData[K]
  // height: number;
  // weight: number;
}</code></pre><p>また、以下のように「-?」とすることで、反対にプロパティを必須にすることが出来る。</p><pre><code>type PersonalData = {
  height?: number;
  weight?: number;
  realName?: string;
}
type RiquiredPersonalData = {
  [K in keyof PersonalData]-?: PersonalData[K]
  // height: number;
  // weight: number;
}</code></pre><p><br></p>

Index SignatureとMapped Types

<h2 id="h0a0d3d337e">ダウンキャストやアップキャストとは</h2><p>型を変える行為のこと。<br></p><h2 id="h92130c8aee">何故、型を変える必要があるのか</h2><p>まず、以下のコードのように最初に定義したcolorはString Literal Typesとなるが、theme内のcolorはstringとなる。</p><pre><code>export const color = "red";
// const color: "red"

const theme = {
  color: "red",
	// (property) color: string
}

theme.color = "blue";</code></pre><h3 id="ha94276c0fa"><br>何故、このような挙動になるのか</h3><p>TypeScriptがJavaScriptの仕様に基づいて作られているから。<br>JavaScriptではconstで宣言したものは後から変更ができない。<br>しかし、オブジェクト内のプロパティに関してはconstでオブジェクトを定義していたとしても、変更出来る仕様になっている。<br>そのため、オブジェクト内のcolorが仮にstringではなく”red”で推論されたとして、後から変更できてしまうと不都合が起こる。<br>そうならないように、最初からTypeScriptではオブジェクト内のプロパティに対してはLiteral Typesで宣言されることがないようになっている。<br>このように、TypeScriptはJavaScriptの互換性を重視しているため、型推論の結果がプログラマの意図しないものになることが多々ある。<br>今回の例で、オブジェクト内の”red”は必ず”red”なので、stringではなくString Literal Typesとして最初から推論されてほしい場合にプログラマで挙動を変えることができる。それが「ダウンキャスト」と「アップキャスト」。<br></p><h3 id="h830ec69cef">ダウンキャスト</h3><p>型推論で導かれた型が抽象的すぎる場合に、プログラマー側でより型を詳しくすること。<br>抽象度の高い方をより詳しい型にしていくこと。<br></p><h3 id="h5f8bd646a4">asを使ったダウンキャスト</h3><p>as 〇〇とすることで、設定することができる。</p><pre><code>const theme = {
  color: "red" as "red",
}</code></pre><p>ただし、以下のようにそもそも互換性が無いものに関してはエラーとなるので注意。</p><pre><code>const theme = {
  color: "red" as number,
}</code></pre><h3 id="hdd1327b869"><br>const assertion</h3><p>自分が定義した値を性とする書き方。<br>設定されている値をそのまま使用したい場合はas constとすることで同様の結果が得られる。</p><pre><code>const theme = {
  color: "red" as const,
}</code></pre><h3 id="hf9506d3444"><br>オブジェクトに対してas const</h3><p>オブジェクトの各プロパティにas constを付与したい場合は、以下のように最後にas constを記述することで、各プロパティにas constを付与した場合と同じ挙動となる。</p><pre><code>const theme = {
  color: "red",
	backgroundColor: "blue",
} as const;</code></pre><p>ちなみに、readonlyも付与され読み取り専用(書き換えることが出来ない)となる。</p><h3 id="h46c533b058"><br>const assertionを実践で使う例</h3><p>何かしらの定数ファイルを作成するときによく使われる。<br>後で書き換えられると困るものに関しては、予めconst assertionを用いて読み取り専用としておくと良い。</p><pre><code>export const PATH = {
  INDEX: '/',
  LOGIN: '/login',
  REGISTER: '/register',
  PROFILE: '/profile',
} as const;</code></pre><h3 id="had66ee47f5"><br>アップキャスト</h3><p>型の抽象度を上げること。<br>ただし、TypeScript開発においてはバグを生みやすくなるため、基本的にはアップキャストはするべきではない。</p><h3 id="h58fbe266e4"><br>アップキャストを使用する場面</h3><p>外部パッケージ等で型の定義が分からない場合など、型を自分の力だけでは解決出来ないとき。<br>「<strong>as any</strong>」を用いて、型の抽象度を上げる。</p>

ダウンキャストやアップキャストとは

<h2 id="h694cc1a001">typeofとkeyof</h2><p>型クエリーと呼ばれるもの。</p><h3 id="h645a990167">型クエリーとは</h3><p>指定したものから型をキャプチャするためのもの。<br>自分で宣言した変数や、外部パッケージからインポートしてきた関数など、<br>何か指定したものから型をコピーして使いたい時に使われるものが型クエリー。<br>型クエリーの種類として、typeofとkeyofがある。</p><h2 id="h325c1cc3ae">typeof</h2><p>型アノテーションしたものだけではなく、型推論で導かれた型定義もキャプチャすることができる。<br>ちなみに、型アノテーションの方が優先される。</p><pre><code>export const foo: string;

type Foo = typeof foo;
// type Foo = string

export const foo = "123";

type Foo = typeof foo;
// type Foo = "123"

export const foo: string = "123";

type Foo = typeof foo;
// type Foo = string</code></pre><h3 id="ha7a09f368a">typeofの注意点</h3><p>typeofは型定義以外のものに対して使う。</p><h2 id="h7cabbfe2e5">typeofのユースケース</h2><h3 id="h31a66de0b3">オブジェクト作成時</h3><p>ある変数の方と全く同じだが、別の変数を定義したい時に便利。</p><pre><code>export const obj1 = {
  foo: "foo",
  bar: "bar",
};

const obj2: typeof obj1 = {
  foo: "aaaaa",
  bar: "bbbbb",
};</code></pre><h3 id="h0ae513fa2d">型の絞り込み</h3><p>型の絞り込みをしたい時によく使われる。</p><pre><code>export function double (x: number | string) {
  if (typeof x === "string") {
    return Number(x) * 2;
  }
  return x * 2;
}</code></pre><h2 id="he790d5aec3">keyof</h2><p>keyofはオブジェクトのプロパティ名をLyteral Typesとして一覧で取得できるもの。</p><pre><code>export type Obj = {
  foo: string;
  bar: number;
}</code></pre><p>上記をLyteral Types、かつUnion Typesとして取得するために使うのがkeyof。</p><pre><code>export type Obj = {
  foo: string;
  bar: number;
}

type key = keyof Obj;

const key: key = "bar";</code></pre><h3 id="hd541bc260d">keyofの注意点</h3><p>keyofは型定義に対して使う型クエリー。</p><h2 id="h16cb225453">keyofのユースケース</h2><p>keyofのユースケースは多々あるため、例として以下の1つを挙げる。</p><h3 id="hac1afeb01f">オブジェクトのプロパティ名を引数とした関数作成時</h3><p>オブジェクトのプロパティ名を引数とした関数を作成したい時に使用出来る。</p><h2 id="h70f57605a2">keyofとtypeofの組み合わせについて</h2><p>keyofとtypeofは組み合わせて使うこともよくある。</p><pre><code>export const Obj = {
  foo: "foo",
  bar: "bar",
}

// type Obj = typeof Obj;
// type Key = keyof Obj;

type key = keyof typeof Obj;
// typeof keyof Obj;では、エラーとなるので注意

// const key: Key = "bar";</code></pre><p>組み合わせの際には、keyof typeof 〇〇;の順番で記述する。<br>※typeof keyof Obj;では、エラーとなるので注意。</p>

typeofとkeyofについて

<h1 id="hdbbf65afa1">Type Aliasの書き方</h1><pre><code>type Foo = {
&nbsp;a: number;
};

const foo: Foo = {
&nbsp;a: 1,
};</code></pre><p><br></p><h1 id="h70e7754842">Interfaceの書き方</h1><pre><code>interface Foo {
&nbsp;a: number;
}

const foo: Foo = {
&nbsp;a: 1,
};</code></pre><p><br></p><h1 id="h4ada2e1a7d">InterfaceとType Aliasの違い</h1><h2 id="hfe8b86c937">①宣言できる型の違い</h2><p><br>Interfaceは宣言できるものが辞書型としてのオブジェクト。<br>あくまで辞書型としてのオブジェクトに対して型宣言するもの。<br><br>Type Aliasは上記に限らず、オブジェクト以外のものに対しても型宣言できる。<br></p><h2 id="h55bd029321">②open-endedに準拠しているかどうかの違い</h2><p>Type Aliasはopen-endedに準拠していないので、同じ名前の宣言があるとエラーが出る。<br>※open-endedとは同じ名前で宣言があった時に自動的にマージされる性質のこと。<br></p><h2 id="h6887ec8597">③継承（型の拡張）方法の違い</h2><h3 id="h1f5bdf5370">Interface</h3><p>Interfaceは以下のように<code>extens</code>を用いる</p><pre><code>interface Foo {
&nbsp;a: number;
}
interface Bar extends Foo {
&nbsp;b: number;
}

const foo: Bar = {
&nbsp;a: 1,
&nbsp;b: 2,
};</code></pre><p><br></p><h3 id="h46eed8856e">Type Alias</h3><p>Type Aliasは以下のように<code>Intersection Types</code>を用いる。</p><pre><code>type Foo = {
&nbsp;a: number;
}
type Bar =&nbsp;Foo &amp; {
&nbsp;b: number;
}

const foo: Bar = {
&nbsp;a: 1,
&nbsp;b: 2,
};</code></pre><p><br></p><h2 id="h9c7c203658">④プロパティのオーバーライドの挙動の違い</h2><h3 id="h1f5bdf5370">Interface</h3><p>例としてプロパティをnumberからstringへオーバーライドした際には、<br>宣言の時点で、型の互換性が無いというエラーが出るため、予期せぬ値を事前に防ぐことが出来る。<br></p><h3 id="h46eed8856e">Type Alias</h3><p>例としてプロパティをnumberからstringへオーバーライドした際には、<br>string かつ numberは成り立たないのでneverとなる。<br></p><h2 id="haeeb5ef389">⑤Mapped Typesが使用できるかどうかの違い</h2><h3 id="h1f5bdf5370">Interface</h3><p>使用できない。<br></p><h3 id="h46eed8856e">Type Alias</h3><p>使用できる。<br></p><h3 id="h758c78c3dc">Mapped Typesとは</h3><p>他の型をもとに新しい方を作成するための方法</p><pre><code>type Animals = "dog" | "cat";

type foo = {
&nbsp;dog: number;
&nbsp;cat: number;
}</code></pre><p>のようにAnimalsが増えれば増えるほど手動で増やしていくことは大変なので、<br>以下のようにMapped Typesを用いると自動的に作成することが出来る。</p><pre><code>type Animals = "dog" | "cat";

type foo = {
&nbsp;[key in Animals]: number;
}

// 以下の結果となる
// type foo = {
//&nbsp;&nbsp;dog: number;
//&nbsp;&nbsp;cat: number;
// }</code></pre><p><br></p><h1 id="h4e8c1d28ac">InterfaceとType Aliasどちらを使用するべきか</h1><p>結論としては、どちらでも良いがType Aliasに統一した方がおすすめ。<br><br>TypeScriptの公式にも「ほとんどの場合、個人の好みに応じて選ぶことができます」と記述されている。<br>また、公式としてはInterfaceを使用してType Aliasでないと出来ないことがあればType Aliasを使用するよう記述もされているが、<br>InterfaceとType Aliasのメリット・デメリットで考えるとType Aliasの方がメリットが多い部分がある。<br><a href="https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases" target="_blank" rel="noopener noreferrer">TypeScript Everyday Types</a><br></p><h2 id="h08c5323c23">Type Aliasの方がメリットが多い部分</h2><p>- プリミティブ型や配列を使用できる<br>- open-endedに準拠していないので、同じ名前の宣言があるとエラーを出してくれる<br>- オーバーライドに関してはInterfaceの方が優秀ではあるが、そういった自体がそこまで多くなく、どの道、コンパイルエラーは出してくれるのであまり変わらない<br>- Mapped Typesを使用できる<br><br>Type Aliasに統一した方が一貫性があり、簡潔で記述も短くスッキリしている。</p>

InterfaceとType Aliasの違い

<h1 id="h044a9119d9">Intersection Types（交差型）</h1><p>複数の型を1つにまとめることが出来るもの。<br></p><h2 id="h46eed8856e">Type Alias</h2><p>型に名前を付けることが出来るもの。<br>型が長くなって見づらくなってしまう時にType Aliasとして定義しておくことで<br>後ほどのコードの見通しが良くなる。</p><pre><code>type Foo = {
&nbsp;a:number;
&nbsp;b:string;
}

const Test: Foo =&nbsp;{
&nbsp;a: 1,
&nbsp;b: "test",
}</code></pre><p><br></p><h2 id="h986da65298">Intersection Types</h2><p>Intersection Types（交差型）は以下のように「&amp;」でType Aliasを繋げることで<br>複数の型をまとめることが出来る。</p><pre><code>type Foo = {
&nbsp;a:number;
&nbsp;b:string;
}
type Bar = {
&nbsp;c:boolean;
}
type FooBer = Foo &amp; Bar;

const Test: FooBer =&nbsp;{
&nbsp;a: 1,
&nbsp;b: "",
&nbsp;c: true
}</code></pre><p><br></p><h1 id="hcbbffe7c4b">Union Types（共用体型・合併型）</h1><p>複数の型があった場合にどれか1つが成立すればOK。<br>「どちらか一方の型になる」という訳では無いので注意。<br>※もしそうであれば全ての型があった場合にエラーとなってしまうため。<br><br>Union Types（共用体型・合併型）は以下のように「|」でType Aliasを繋げることで<br>複数の型をまとめることが出来る。</p><pre><code>type Foo = {
&nbsp;a:number;
&nbsp;b:string;
}
type Bar = {
&nbsp;c:boolean;
}
type FooBer = Foo | Bar;

const Test: FooBer =&nbsp;{
&nbsp;a: 1,
&nbsp;b: "",
&nbsp;c: true
}</code></pre><p><br></p><h2 id="hadd89b2ce4">Union Typesの絞り込み</h2><p>以下のような場合に、例えばaをstringとして扱いたいとなった場合に、補完でnumberの方の補完も出てしまう等の<br>不都合が出てきてしまう。</p><pre><code>type Foo = {
&nbsp;a:number;
&nbsp;b:string;
}
type Bar = {
&nbsp;a:string;
&nbsp;b:boolean;
}
type FooBer = Foo | Bar;

const Test: FooBer =&nbsp;{
&nbsp;a: 1,
&nbsp;b: "",
&nbsp;c: true
}</code></pre><p>それを解決するために、以下のように「in演算子」を用いて解決することができる。</p><pre><code>type Foo = {
&nbsp;a:number;
&nbsp;b:string;
}
type Bar = {
&nbsp;a:string;
&nbsp;b:boolean;
}
type FooBer = Foo | Bar;

const test: FooBer =&nbsp;{
&nbsp;a: 1,
&nbsp;b: "",
&nbsp;c: true
}

if("b" in test) {
&nbsp;test.a.〇〇〇
} else {
&nbsp;test.c.〇〇〇
}</code></pre><p>testのbはstringなので、Fooの型だと推測ができる。<br></p>