TypeScript3.7のベータ版を試してみました。

Table of Contents

はじめに

TypeScript3.7のベータ版がリリースされたので試してみました。

基本的に以下の記事から、気になる機能を自分が書いたコードで試してみただけです。
詳しい説明は本家のページをご覧下さい。

プロジェクト準備

動作確認用のプロジェクトを準備します。
適当なディレクトリを作成してその中に移動し、以下コマンドを実行します。

npm init -y
npm i typescript@beta ts-node
npx tsc --init

main.tsに1行書いてnpx ts-node main.tsで実行できることを確認します。

Optional Chaining

なんといっても一番注目すべき機能はこれでしょう！
これで不要な三項演算子や&&チェーンの日々から解放されます。

以下のようなHumanクラスとそのインスタンスtaro,jiro,hanakoを作成します。
hanakoはjiroが好き、jiroはtaroが好き、taroは誰も好きではありません。

interface Human {
  id: number;
  name: string;
  favorite?: Human;
}

const taro: Human = {
  id: 1,
  name: "taro"
};

const jiro: Human = {
  id: 2,
  name: "jiro",
  favorite: taro
};

const hanako: Human = {
  id: 3,
  name: "hanako",
  favorite: jiro
};

以下の要件を満たすコードを書いてみます。

  • hanakoとjiroが好きな人の好きな人の名前を取得したい
  • いない場合はundefined

Optional Chainingなし (TypeScript3.6以前)

こんな感じに書いていました..。つらい。

// hanakoが好きな人の好きな人の名前を取得
console.log(hanako.favorite && hanako.favorite.favorite && hanako.favorite.favorite.name)
// -> taro

// jiroが好きな人の好きな人の名前を取得
console.log(jiro.favorite && jiro.favorite.favorite && jiro.favorite.favorite.name)
// -> undefined

Optional Chainingあり (TypeScript3.7以降)

必要最低限の記述です！

// hanakoが好きな人の好きな人の名前を取得
console.log(hanako.favorite?.favorite?.name)
// -> taro

// jiroが好きな人の好きな人の名前を取得
console.log(jiro.favorite?.favorite?.name)
// -> undefined

しかも、VSCodeだと?が自動補完されます。これも凄い！

array?.[0]やhandler?.()みたいにArrayやFunctionにも使えます。
?.が間に挟まると存在する場合だけ後続の処理に続く..という理解で概ねOKだと思います。

VSCodeが3.7の構文を解釈しない

VSCodeが使用するTypeScriptのバージョンがワークスペースのバージョンになっているか確認してください。
デフォルトではグローバルにインストールされたバージョンが使用されます。

フッタに表示されるバージョンを見てください。

クリックすると変更できます。

Nullish Coalescing

&&の代わりに??を使うことでFalsyな値が正しく判定されます。
0や空文字の場合を考える心配がなくなります。

Nullish Coalescingなし (TypeScript3.6以前)

console.log(undefined || "値がないんじゃあああ!!!")
// -> 値がないんじゃあああ!!!
console.log(null || "値がないんじゃあああ!!!")
// -> 値がないんじゃあああ!!!
console.log({} || "値がないんじゃあああ!!!")
// -> {}
console.log([] || "値がないんじゃあああ!!!")
// -> []
console.log(0 || "値がないんじゃあああ!!!")
// -> 値がないんじゃあああ!!!
console.log("" || "値がないんじゃあああ!!!")
// -> 値がないんじゃあああ!!!

Nullish Coalescingあり (TypeScript3.7以降)

console.log(undefined ?? "値がないんじゃあああ!!!")
// -> 値がないんじゃあああ!!!
console.log(null ?? "値がないんじゃあああ!!!")
// -> 値がないんじゃあああ!!!
console.log({} ?? "値がないんじゃあああ!!!")
// -> {}
console.log([] ?? "値がないんじゃあああ!!!")
// -> []
console.log(0 ?? "値がないんじゃあああ!!!")
// -> 0
console.log("" ?? "値がないんじゃあああ!!!")
// ->

{}と[]はどちらもTrue判定されるので要注意。PythonだとFalseになる。

Nullish CoalescingはOptional Chainingとの相性が抜群ですね😄

// jiroが好きな人のID

console.log(jiro.favorite?.id || "該当なし")
// -> 該当なし
console.log(jiro.favorite?.id ?? "該当なし")
// -> 0

総括

TypeScript3.7のベータ版の機能として、Nullish CoalescingとOptional Chainingを実際に試してみました。

この2機能を使うために、プロダクトのTypeScriptを3.7ベータにupgradeした方がよいレベルの素晴らしさです。
事実、コメント欄にも『これはTypeScript4.0でしょ！』という意見が出ていました😘

その他にもRecursive Type AliasesやUncalled Function Checksも気になっています。
安定版リリースは11月を予定しているようです。楽しみですね！👍