Udemyのオススメ講座はこちら 詳細を見てみる

【TypeScript】サブタイプ(SubType)について

  • URLをコピーしました!

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

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

はじめに結論から。

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

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

目次

TypeScriptのサブタイプ(SubType)

サブタイプ(SubType)とスーパー(SuperType)

以下のような時、「typeBtype 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 }型のオブジェクト)のサブタイプと判定される。

最後に

まとめ。

  • サブタイプ(SubType)とはある基本型(SuperType)に対して派生した型
  • スーパタイプ(SuperType)が期待される場合にサブタイプ(SubType)を使える(=コンパイルエラーが起こらない)こと

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

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

参考記事

Udemyのオススメ講座はこちら↓

TypeScript+Next.js+Laravelハンズオンはこちら↓

デスク周りのオススメアイテムはこちら↓

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

ブログを開設するなら「SWELL」が絶対オススメ!

この記事を書いた人

大学院(機械工学)→重工業→エンジニア→プロダクトマネージャー(PdM)兼エンジニア

神戸で「つながる勉強会」を運営↓
https://tsunagaru-kobe.connpass.com/

神戸グルメのインスタアカウントを運用しています。

目次