TypeScript は厳密に型指定されています - 部分的に完全な静的型

この投稿シリーズの前の部分では、安全な null 可能性について説明しました。

ここで、TypeScript のデフォルト動作の 3 番目と最後の問題、動的型付けの残存 を説明し、解決します。

以下について説明します:

• 動的型付けの残骸
• 実際の等価性チェック
• 条件内で暗黙的な変換はありません
• 条件の省略表記
• 文字列と数字を混ぜることはできません

動的型付けの名残

TypeScript は、入力が非常に動的である JavaScript とは対照的に、「静的な型チェッカー」であると考えられています。

ただし、この投稿シリーズの前の部分では、TypeScript が JavaScript のスーパーセットとして構築されていることも説明しました。

問題は、JavaScript 動的型付けシステムの一部が TypeScript に残っているということです。したがって、これらの残りの動作を抑制して完全な静的型付けを実現する方法について説明します。

実際の等価性チェック

• ESLint: eqeqeq
• バイオーム:疑わしい.noDoubleEquals (推奨)

問題の最良の例は、等価性チェックです。 JavaScript では、== は正確には等価性チェック ではなく、等価性チェックです:

1 == "1"; // true

型が異なっていても、JavaScript が値を比較できるように、いくつかの変換ルールが機能します。ルールの詳細は覚えるのが難しく、非常に奇妙な場合があり、すべての動的言語 (たとえば PHP など) でまったく同じではないため、多くのエラーが発生する可能性があります。

これらの等価性チェックは、JavaScript のような動的に型付けされた言語でのみ意味を持ちます。 TypeScript で作業すると決めた瞬間から、実際の等価性チェック (型と値) のみを使用する必要があります。

1 === "1"; // false

eqeqeq lint ルールによりこれが強制されます。

Java、C#、Rust などの言語を使用している人は、この問題に特に注意する必要があります。JavaScript や TypeScript の == は、これらの言語の == と同じ意味を持ちません。 JavaScript と TypeScript では、同じ動作を実現するには 3 番目の = が必要です。

条件内の暗黙的な変換はありません

• ESLint: @typescript-eslint/strict-boolean-expressions
• バイオーム: ルールがありません

今の状況は安全だと思いますか?残念ながら、変換は暗黙的に行われる可能性があるため、そうではありません:

let tax: number | undefined = 0;

if (tax) {
  console.log("Process payment");
}
if (!tax) {
  throw new Error();
}

上記の例は次と同等です:

let tax: number | undefined = 0;

if (tax == true) {
  console.log("Process payment");
}
if (tax == false) {
  throw new Error();
}

ご覧のとおり、暗黙的な == があったため、変換は依然として発生します。0 は true と同等ではなく、false と同等です。したがって、税金が有効な値であるにもかかわらず、エラーが発生します。

strict-boolean-expressions lint ルールは、このような暗黙の条件を禁止し、実際のチェックを強制します。

let tax: number | undefined = 0;

if (tax !== undefined) {
  console.log("Process payment");
}
if (tax === undefined) {
  throw new Error();
}

JavaScript でのクイック条件に慣れている人にとって、これは従うのが最も面倒なルールの 1 つかもしれませんが、大局的に言えば、これは Java、C#、Rust などの他の言語で物事を行う通常の方法にすぎません。

設定部分で示したように、すべてのエラーを回避するには、allowNumber サブオプションとallowString サブオプションを無効にすることが重要です。

許可される唯一の例外は、オブジェクトと配列です。これらのケースは、文字列や数値とは異なり、偽の値を持たないため安全です。したがって、次のようにしても問題ありません:

let movie: Movie | undefined;
if (movie) {}
if (!movie) {}

注: switch ステートメントは内部で === を使用しているため、すでに安全です。

条件の省略表記

• ESLint: @typescript-eslint/prefer-nullish-coalescing (スタイルタイプチェック済み)
• バイオーム: ルールがありません

strict-boolean-expressions lint ルールは、条件チェックがタイプ セーフであるように注意しますが、if 以外の条件構文もあります。

const movieRating = userRating || 5;

// Which is a shorter version of:
const movieRating = userRating == true ? userRating : 5;

ユーザーが 0 と評価した場合、0 は false と同等であるため、評価は 0 ではなく 5 になります。

最新の JavaScript を使用すると回避できます:

const movieRating = userRating ?? 5;

// Which is a shorter version of:
const movieRating = userRating !== undefined && userRating !== null
  ? userRating
  : 5;

これは、prefer-nullish-coalescing lint ルールによって強制できます。

注意してください?? || どこでも使用すべきではありません: ||ブール値を操作する場合にも、これは有効です。

文字列と数字が混在しない

• ESLint:
  • テンプレートを優先
  • @typescript-eslint/restrict-plus-operands (推奨型チェック済み)
  • @typescript-eslint/restrict-template-expressions (推奨型チェック済み)
• バイオーム:
  • style.useTemplate (推奨)
  • 他のルールがありません

JavaScript では、+ 演算子は数値の数学的加算と文字列の連結の両方に使用できます。エラーの原因となります。

"There is " + 3 + 1 + "Matrix movies"; // 31
"There is " + (3 + 1) + "Matrix movies"; // 4

+ 演算子は数学的な加算のために予約されている必要があります。または、少なくとも、restrict-plus-operands lint ルールが強制する同じ型のデータでのみ使用する必要があります。

Template strings from modern JavaScript should be used for string concatenation, which the prefer-template lint rule enforces:

const movie = `Everything everywhere all at once`;
`${movie} is the best movie!`;

Conversely, only strings should be used in template strings, which the restrict-template-expressions lint rule enforces.

If mixing types is what is actually wanted, conversions should be explicit:

const total = 3;
`There is ${total.toFixed()} Matrix movies`;

Note that template strings can be nested:

const total = 3;
`There is ${total.toFixed()} Matrix movie${total > 1 ? "s" : ""}`;

Conclusion

This is the end of this posts series. You can follow my account (button on top right of this page) to know when other posts about TypeScript or other topics like Angular are published.

You want to contact me? Instructions are available in the summary.

以上がTypeScript は厳密に型指定されています - 部分的に完全な静的型の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。