【TypeScript】サブタイプ（SubType）について

副業先の開発で教えていただいたTypeScriptのサブタイプ（SubType）について。

サブタイプという概念が個人的には衝撃だったので、興味本意でTwitterでアンケートをとってみたど予想通り「コンパイルエラー」が1番多く、全体の63％だった。

はじめに結論から。

正解は「{ x: 1, y: 1 }」である。（自分ももちろん「コンパイルエラー」だと思っていた…）

ということでサブタイプについてサクッとまとめる。

TypeScriptのサブタイプ（SubType）

サブタイプ（SubType）とスーパー（SuperType）

以下のような時、「typeBはtype Aのサブタイプ」と言う。

type A = { x: number }

type B = A & { y: number }

この場合はA :> Bという風に書くらしい。

サブタイプ（SubType）とはある基本型(SuperType)に対して派生した型のこと。

特徴としては

スーパタイプ（SuperType）が期待される場合にサブタイプ（SubType）を使える（＝コンパイルエラーが起こらない）こと

である。

サンプルコード

サンプルコードは以下のとおり。

type A = { x: number }
type B = A & { y: number }

const f1 = (arg:A) => console.log(arg)
const param1: B = { x: 100, y: 200 }
f1(param1)

スーパータイプであるtype Aの引数をとってそのまま出力するf1にサブタイプであるtype Bのパラメータを渡してあげると出力は

{ x:100, y:200 }

となる。

コンパイルエラーにならず、サブタイプであるtype Bのパラメータが出力される。

ただし、type Aに存在しないパラメーターへのアクセスはできない。

const f1 = (arg:A) => console.log(arg.y)

もちろん逆はパラメーターが足りないので、コンパイルエラーになる。

type A = { x: number }
type B = A & { y: number }

const f2 = (arg: B) => console.log(arg)
const param2: A = { x: 100 }
f2(param2) // Argument of type 'A' is not assignable to parameter of type 'B'. Property 'y' is missing in type 'A' but required in type '{ y: number; }'.

ちなみに関数実行時に引数に直接サブタイプと同じ型のオブジェクトを渡すとコンパイルエラーになる。

type A = { x: number }
type B = A & { y: number }

const f1 = (arg:A) => console.log(arg)
// const param1: B = { x: 100, y: 200 }
f1({ x:100, y:200 }) // Argument of type '{ x: number; y: number; }' is not assignable to parameter of type 'A'. Object literal may only specify known properties, and 'y' does not exist in type 'A'.

これはf1に{ x:100, y:200 }という内容のオブジェクトが渡された（＝type Bではないオブジェクト）と認識されず、サブタイプと判定されないからである。

また、typeを使わない場合でもサブタイプという概念は適用されるので例を挙げてみる。

const f = (arg:{ x: number }):void => console.log(arg);
const param = { x: 1, y: 1 };
f(param);

これもコンパイルエラーにならず、コンソールには{ x: 1, y: 1 }が出力される。

変数paramは{ x: number, y: number }型のオブジェクトとして定義されるため、f1の引数（{ x: number }型のオブジェクト）のサブタイプと判定される。

最後に

まとめ。

2021年4月から仕事でTypeScriptを使い始めたけど見事に全く知らなかったサブタイプのことを知ることができてよかった。

こういう新しい気づきや勉強になることがたくさんあるから副業は良い。

参考記事

武骨日記

【よし!徹底的にやる!】TypeScriptのsubtype vs supertypeの違い | 武骨日記 【よし!徹底的にやる!】TypeScriptのsubtype vs supertypeの違い

たみブログ

TypeScript サブタイプについて | たみブログ A <: b>