フレンドになりたい人

もともと公開my blog .
正直であるために、私はそれほど速く最新のJavaScript提案に決して飛び越しません.それが少なくともステージ3でほとんどでないならば、私は光沢があります.しかし、新しい機能がtypescriptで実装されるならば、私はそれが良いことになるということを知っています.
それは、typescriptのオプションの連鎖の場合と全く同じです.それはJavaScriptに着陸します、そして、それはすでにtypescriptベータで利用できます.

タイプスクリプトの設定
まず最初に、新しいプロジェクトを作成し、TypeScriptベータをインストールします.

mkdir optional_chaining_ts && cd $_

npm init -y

npm i typescript@beta

次に、typescriptの設定ファイルを生成します.

node_modules/typescript/bin/tsc --init

一度実行したら、新しいJavaScriptファイルを作成し、希望する名前を付けます.jsそして、行動のオプション連鎖を見ましょう.

問題:マップ関数と未定義
これからは、我々はOptionalRise連鎖の中で働きます.js次の配列を持っているとします

const arr = [
  { code: "a" },
  { code: "b" },
  { code: "c" },
  { name: "Caty" },
  { name: "Siri" }
];

コードプロパティを持つオブジェクトだけを含む新しい配列を生成するには、ループをループします.マップ機能はあなたの友人です、そして、我々はすることができます:

const arr = [
  { code: "a" },
  { code: "b" },
  { code: "c" },
  { name: "Caty" },
  { name: "Siri" }
];

const withCode = arr.map(function(element) {
  if (element.code) return element;
});

唯一の問題は、マップがコードプロパティを見つけることができなかったすべての要素に対して未定義であることです.以下に結果の配列を示します:

// withCode now is
[ { code: 'a' },
  { code: 'b' },
  { code: 'c' },
  undefined,
  undefined ]

JavaScriptのこの時点で、空のインデックス、または最悪の場合、既存のオブジェクトにアクセスできません.

const notThere = withCode[3].code;

実行時にのみプログラムがスローされますJavaScript test suite )

TypeError: Cannot read property 'code' of undefined

問題はネストされたオブジェクトのプロパティへのアクセスが一般的です.別の例を考えてみましょう.

const people = { mary: { name: "Mary" } };

const caty = people.caty.name;

// TypeError: Cannot read property 'name' of undefined

どのようなエラーのこれらの種類から私たちのコードを保護するために行うことができますか?タイプスクリプトが助けることができるかどうか見ましょう.

解決策:タイプスクリプトと任意連鎖
我々のコードをチェックするために、タイプスクリプトを得ましょう.オプションの一時連鎖の名前を変更する.JSへのJSその後、コンパイルします.

node_modules/typescript/bin/tsc

次のエラーが表示されます.

optional-chaining.ts:13:18 - error TS2532: Object is possibly 'undefined'.

13 const notThere = withCode[3].code;
                    ~~~~~~~~~~~

良いキャッチtypescript!どうやって知ったの?TypeScriptは、要素を返します(要素. code)要素を返しますプロパティが“コード”を持たないオブジェクトを除外できます.そして、それは未定義の要素につながります.
この時点で2つのオプションがあります.私たちは{ name :"empty "のような空のオブジェクトをマップ関数からのフォールバックとして返すことができます.しかし、それはパフォーマンスに悪いかもしれません.よりよく、キーにアクセスする前にオブジェクトが存在するかどうかを確認できます.

const notThere = withCode[3] && withCode[3].code;

どのようなひどいことを行うには?何回、あなたはそのようなコードを見ましたか?我々は今までの選択がなかった.
オプションの連鎖で、コードをクリーンアップし、チェックを減らすことができます.

const notThere = withCode[3]?.code;

これに続いて、このコードを持っていなければなりません(私はそこに印刷用のコンソールログを追加しました).

const arr = [
  { code: "a" },
  { code: "b" },
  { code: "c" },
  { name: "Caty" },
  { name: "Siri" }
];

const withCode = arr.map(function(element) {
  if (element.code) return element;
});

const notThere = withCode[3]?.code;

console.log(notThere);

あなたは一日を呼び出すことができますし、今家に帰るが、もしあなたがnitty grittyに興味を持って読んでください.

TypesScriptの任意の連鎖:どのようにコンパイルするか?
保存し、ファイルを閉じてコンパイル/実行します.

node_modules/typescript/bin/tsc

node optional-chaining.js

そして、コンソールで「未定義」を見るべきです.まだ空の値ですが、少なくともコードは実行時にスローされません.方法によって、我々は「未定義」で終わりましたか?
typescriptは新しい構文をとります:

const notThere = withCode[3]?.code;

をコンパイルします( ecmascript 2009にコンパイルしていると仮定します).

"use strict";

var _a;
// omit
var notThere = (_a = withCode[3]) === null || _a === void 0 ? void 0 : _a.code;

console.log(notThere);

特にこれらのコード行に注目してください.

var _a;
var notThere = (_a = withCode[3]) === null || _a === void 0 ? void 0 : _a.code;

我々は彼らを平易な英語に分解できる.左記の部分(前○○前)は次のように機能します.
変数をコードA [ 3 ]に割り当てる.さあ、aがnullに等しいかどうかを調べます.そうでなければ、論理ORの右側を評価してください.
表現の右端には集中しないでください.
それは、2で詰まっている三元演算子ですvoid operators . 式void 0は未定義プリミティブを生成します.次のようなコードを読むことができます.
が指定されていない場合は、undefinedを返します.
言い換えると、オプションの連鎖は常に、我々がアクセスしようとしている値が存在しない場合は未定義で、オブジェクトのプロパティアクセスはスローされません.

ラッピング
JavaScriptは速いペースで動くので、新しい特徴と革新を言語に転送します.オプションの連鎖は、JavaScriptの中で最も一般的なパターンの一つを簡素化することを目的としています.
オプションの連鎖では、以下のような状況でTypeErrorを避けることができます.

const people = { mary: { name: "Mary" } };

const caty = people.caty.name;

// TypeError: Cannot read property 'name' of undefined

オプションのコードが同じコードになります.

const people = { mary: { name: "Mary" } };

const caty = people.caty?.name;

// Instead of 
// const caty = people.caty && people.caty.name;

読書と滞在のおかげでチューニング.

資源
新しいタイプに?もっと学ぶTypeScript Tutorial For Beginners: The Missing Guide .
オプション連鎖についてhere .