7つの便利なTypeScriptの新機能

1. オプションの連鎖

v3.7から利用可能

これは、ネストされたデータにアクセスしようとするときに問題となる点であり、データがネストされるほど、コードが煩雑になります。

次の例では、アドレスにアクセスするには、data.customer.address をトラバースする必要があり、データまたは顧客は未定義である可能性があるため、この例では && 演算子または同様の手法を使用して各定義レベルをトラバースするのが一般的です。

これで、.? 演算子を使用してデータに選択的にアクセスできるようになりました。この方法では、まだ定義されていない親オブジェクトがある場合、実行時にクラッシュするのではなく、チェーン内の任意の場所で undefined が返されます。

// v3.7 より前 if (data && data.customer && data.customer.address) {
   const {アドレス} = data.customer
   const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
}

// バージョン3.7

// データアクセス
定数アドレス = データ?.顧客?.アドレス
const fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}`

// 配列 customers?.[0]?.['address'] にも適用されます

// メソッドが定義されているかどうかを確認し、customer.approve?.() を呼び出します。

2. NULL値の結合

v3.7から利用可能

null 合体演算子は || の代替であり、左側が null または未定義の場合に右側の式を返します。これは || とどう違うのでしょうか? || は基本的に JavaScript のブール OR 演算子であり、短絡を利用して最初の false でない値を返そうとします。有効な入力として必要な場合に数値 0 または空の文字列が false とみなされるため、予期しない結果が生じる可能性があります。例を使って説明してみましょう。

// 以前は passPhrase = data.inputString || 'Unknown' // は "" (空の文字列) を受け入れませんでした
passCode = data.number || '-1111' // 0 は受け入れられません 
rememberMe = data.rememberFlag || true // 常に true になります!!!


// これで passPhrase = data.inputString ?? 'Unknown' // inputString が未定義の場合にのみ Unknown になります
passCode = data.number ?? '-1111' // 0 を渡すことができます rememberMe = data.rememberFlag ?? true // false は有効な値です

こうすることで、未定義の値と false の値を明確に区別できます。

3. 再帰型エイリアス

v3.7から利用可能

現実世界の多くのデータ型は再帰的です。たとえば、階層型データを処理しようとすると、同じ種類のデータのパターンが繰り返されていることがわかります。 jsON は良い例です。これは本質的にハッシュ マップであり、ハッシュ マップ自体に別のマップまたはマップの配列を含めることができます。

v3.6 より前では、単純な jsON 型を定義する必要がある場合は、次のようにする必要がありました。

インターフェースJSONObject { [x: 文字列]: JSONValue; }
インターフェース JSONArray は Array<JSONValue> を拡張します { }
タイプ JSONValue = 文字列 | 数値 | ブール値 | JSONObject | JSONArray

1 行目と 2 行目の型を 3 行目のようにインライン化しようとすると、次のエラーが発生する可能性があります: 型エイリアス JSONValue が循環的に自身を参照しています。

この問題は v3.7 で効果的に解決されており、次のように簡単にコーディングできます。

型 JSONValue = 文字列 | 数値 | ブール値 | { [x: 文字列]: JSONValue } | 配列<JSONValue>

4. アサーション署名

v3.7から利用可能

TypeScript には、JavaScript の typeof 演算子および instanceOf 演算子とうまく連携する型ガードがあることを知っておく必要があります。これは、関数の引数に前提条件を追加して、特定の型に制限する場合に便利です。

与えられた入力が日付であることを確認するための型ガードを追加し、そこから年を抽出して、上記のすべてを使用するコードを記述してみましょう。

関数 isDate(input: unknown) : 入力が Date であることを確認します { 
  if (日付のインスタンスを入力) 
    戻る; 
  それ以外 
    throw new Error('入力は日付でなければなりません!'); 
} 

関数 getYear(入力: 不明): 数値 { 
  isDate(入力); 
  return input.getFullYear() // TypeScriptsは入力がDateであることを認識します 
} 


console.log(getYear(新しい日付('2019-01-01'))); 
コンソールにログ出力します。

上記のコードは問題ないように見えますが、TypeScript は依然として、getFullYear が不明な型では使用できないというエラーを出力します。

TypeScript 3.7 以降では、asserts という新しいキーワードが追加され、コンパイラーがアサーションから正しい型を認識できるようになりました。アサーション関数の場合は、戻り値の型の代わりに、asserts <param> as <type> を追加する必要があります。

この方法では、アサーションが成功した場合、TypeScript はパラメーターが以前に定義された型であると想定します。変更されたコードは次のとおりです。

関数 isDate(input: unknown) : 入力が Date であることを確認します { 
  if (日付のインスタンスを入力) 
    戻る; 
  それ以外 
    throw new Error('入力は日付でなければなりません!'); 
} 

関数 getYear(入力: 不明): 数値 { 
  isDate(入力); 
  return input.getFullYear() // TypeScriptsは入力がDateであることを認識します 
} 


console.log(getYear(新しい日付('2019-01-01'))); 
コンソールにログ出力します。

5. Promisesにより良いフィードバックを提供する

3.6 以降の改善点

次に示すように、コード内で Promise を直接使用し、await または then の使用を忘れることはよくある間違いです。

インターフェース顧客{
    名前: 文字列
    電話番号: 文字列
}

関数 getCustomerData(id: string): Promise<Customer> を宣言します。
関数 payCustomer(customer: Customer): void を宣言します。

非同期関数f(){
    定数顧客 = getCustomerData('c1')
    支払う顧客(顧客)
}

以前の TypeScript では Promise について何も認識できず、次のように Promise とは関係のないエラー メッセージが表示されていました。

v3.6 以降、コンパイラは実行すべき Promise を提案できるほど賢くなりました。最新のコンパイラが同じエラーをどのように処理するかに注意してください。

あまり詳しく説明せずに、いくつかの機能について簡単に説明しましょう。

6. Unicode識別子

v3.6以降で利用可能

const hello = "世界"

上記のコードは以前のバージョンの TypeScript ではコンパイルされない可能性がありますが、より広範な Unicode セットから識別子を定義できるようになりました。

7. 増分コンパイル

v3.4以降で利用可能

大規模なプロジェクトで TypeScript を使用している場合、そのプロジェクト内のファイルに加えた変更にコンパイラが応答するまでに長い時間がかかることがあります。変更されたファイルを増分的にコンパイルする tsc (TypeScript コンパイラ) コマンドラインに追加できる新しい --incremental フラグが追加されました。

TypeScript は、コードベース内のローカル キャッシュ ディレクトリに最後のコンパイル以降のプロジェクトに関する情報を保存することでこれを実現します。 React コードベースでは、ビルド パイプラインで増分コンパイルを活用するために、必ず Webpack または Parcel を正しく構成してください。

以上が、TypeScript の 7 つの便利な新機能の詳細です。TypeScript の新機能の詳細については、123WORDPRESS.COM の他の関連記事もご覧ください。