TypeScriptの便利機能の紹介(その1)

プログラミング

こんにちは！kossyです！


さて、今回はTypeScriptの便利機能をブログに残してみたいと思います。

もくじ

  • Intersection Types
  • Type Guard
  • タグ付きUnion
  • 型アサーション
  • NonNullAssertionOperator

InterSection Types

交差型ともいい、二つの型の積集合を取る。
ちなみに、合併型はUnion型ともいい、二つの型の和集合を取る。

コード例

type Sales = {
  retail: string;
};

type Developer = {
  dev: string;
};

type SalesDeveloper = Sales & Developer // 合併(Union型なら & の 代わりに | を用いる)

const superman: SalesDeveloper = {
  retail: 'super',
  dev: 'VPoE'
};

以下のように必須のプロパティを全て用意しない場合、VSCodeで怒られる。

const superman: SalesDeveloper = {
  retail: 'super'
};

f:id:kossy-web-engineer:20200901234850p:plain

Type Guard

JavaScriptに元々存在する、データ型を返す演算子を使って、型を絞り込むことができる

  • typeof
  • in
  • instanceof

コード例

typeof

arg = 1;

toFixed(arg: string | number) {
  if (typeof arg === 'number') {
    arg.toFixed();
  }
};




in

type Sales = { retails: string, name: string };

type Developer = { dev: string, name: string };

type SalesDeveloper = Sales | Developer;

function showProfile(salesDeveloper: SalesDeveloper) {
  if ('dev' in salesDeveloper) { // devというプロパティがあれば
    console.log(salesDeveloper.dev);
  }
}



instanceof

class Sales {
  name: string;
  retail: string;
};

class Developer {
  name: string;
  dev: string;
};

type SalesOrDeveloper = Sales | Developer;

function isSales(salesOrDeveloper: SalesOrDeveloper): boolean {
  if (salesOrDeveloper instanceof Sales) { // 引数のsalesOrDeveloperがSalesクラスのインスタンスだった場合
     return !!salesOrDeveloper.retail;
  } else {
    return !!salesOrDeveloper.dev;
  }
};

タグ付きUnion(Tagged Union Types・タグ付き共用体・discriminated Union)

switch文で分岐するといった使い方ができる

class Sales {
  kind: 'sales' = 'sales';  // タグ
  name: string;
  retail: string;
};

class Developer {
  kind: 'developer' = 'developer';　// タグ
  name: string;
  dev: string;
};

type SalesDeveloper = Sales | Developer;

function showYourWork(salesDeveloper: SalesDeveloper): string {
  switch (salesDeveloper.kind) {
  case 'sales':
    return salesDeveloper.retail;
  case 'developer':
    return salesDeveloper.dev;
  }
};

型アサーション

手動で型を上書きする方法
as構文か<>構文(山括弧とかangle bracketsともいう)で記述する。

class Sales {
  kind: 'sales' = 'sales';
  name: string;
  retail: string;
};

class Developer {
  kind: 'developer' = 'developer';
  name: string;
  dev: string;
};

type SalesDeveloper = Sales | Developer;

const sales: SalesDeveloper = { kind: 'sales', name: 'john' } as Sales;

const sales: SalesDeveloper = <Sales>{ kind: 'sales', name: 'john' };



<>構文だとtslintで怒られる、、、

Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
<> 構文を使用した型アサーションは禁止されています。 代わりに「as」構文を使用してください。

NonNullAssertionOperator

!を使って string | null のようになっている型を持つ変数等に対して、
「この変数はnullではない」と明示的に示す方法

const input = document.getElementById('input')!;

tslintだと!は使うなって怒られる、、、
Forbidden non null assertion (no-non-null-assertion)


続きます。