ホームページ > ウェブフロントエンド > jsチュートリアル > JSの強力な型言語からの借入技術

JSの強力な型言語からの借入技術

Christopher Nolan
リリース: 2025-02-21 08:38:12
オリジナル
564 人が閲覧しました

Borrowing Techniques from Strongly Typed Languages in JS

この記事では、JavaScriptコードで強く型付け言語を使用する方法について説明します。これらの手法は、コードエラーを減らすだけでなく、コードの量を減らします。この記事ではJavaScriptを例にとっていますが、これらのヒントはほとんどの弱いタイプの言語にも適用されます。

キーポイント:

    JavaScriptに強く入力された言語を適用するヒントは、バグを減らし、コードのボリュームを減らすことができます。
  • 「一貫したタイプルール」(すべての値に1つのタイプのみが1つしかないことを指定)をJavaScriptに適用して、コードの品質と読みやすさを向上させます。
  • タイプのチェックとタイプ変換は、モジュールの端で実行して、暗黙の型キャストによって引き起こされるバグを防ぎ、コードを簡素化する必要があります。
  • JavaScriptでの「null」と「未定義」の使用は、特にオブジェクトや配列などの参照タイプを扱う場合は、慎重に検討する必要があります。
  • TypeScriptは、早期エラー検出やより明確なコードドキュメントなどの利点を備えたJavaScriptでより強力なタイプされたセマンティクスを実施するための推奨ツールです。
javaScriptタイプシステム

最初に、JavaScriptデータ型システムがどのように機能するかをすばやく確認しましょう。 JavaScriptは、その値を2つのカテゴリに分割します:

文字列、数字、ブールンなど、

    プリミティブタイプ
  • 。元のタイプを変数に割り当てると、新しい値が常に作成されます。これは、割り当てられた値のコピーです。 オブジェクトやアレイなど、
  • 参照タイプ
  • 。割り当てリファレンスタイプは常に同じリファレンスをコピーします。これを明確にするには、次のコード例を見てみましょう。
  • Aを変更すると、変数Bも同じ配列を参照するために変更されます。これがすべての参照タイプの動作です。 JavaScriptはどのタイプも強制しません。つまり、どの変数もいつでもデータ型を保存できます。この記事の残りの部分では、このアプローチの欠点と、より良いJavaScriptコードを作成するためにタイプを強制するために簡単なトリックを適用する方法について説明します。
var a = [];
var b = a;

a.push('Hello');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

一貫したタイプのルール

を紹介します 一貫性のあるタイプルールは理論的に単純です。すべての値には1つのタイプのみが必要です。強く入力された言語は、コンパイラレベルでこのルールを実施しますが、自由にタイプを組み合わせて一致させることはできません。弱いタイプは私たちに多くの自由を与えます。一般的な例は、数字を文字列に連結することです。 Cのような言語のように退屈なタイプの変換を実行する必要はありません心配しないでください、私はあなたにすべての便利さをあきらめるように言いません。一貫したタイプのルールでは、変数と関数がどのように動作するかに注意を払う必要があるため、コードが改善されます。 変数のタイプ

最初に、ルールが変数にどのように適用されるかを見てみましょう。それは非常に簡単です。変数には常に1つのタイプのみが必要です。

var a = [];
var b = a;

a.push('Hello');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

上記の例は問題を示しています。このルールでは、この例の最後のコード行がエラーをスローするふりをする必要があります。これは、変数テキストを最初に定義するときに文字列タイプの値を指定し、今では数字を割り当てているからです。一貫したタイプのルールは、この方法で変数のタイプを変更することを許可しないことを意味します。変数が一貫している場合、コードを推測する方が簡単です。特に、変数のソースを無視するのが簡単な長い機能で特に役立ちます。このルールに従わないコードベースで作業するとき、変数が宣言されているのを見て、それが同じタイプにとどまると想定していたので、私は誤って多くのエラーを引き起こしました - それに直面してみましょう、それは理にかなっていますか?通常、同じ変数に異なるタイプを割り当てる理由はありません。

関数パラメーターのタイプ

ここにも同じルールが適用されます。関数のパラメーターも一貫している必要があります。エラーの例:

var text = 'Hello types';

// 错误!不要这样做!
text = 1;
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ここでの問題は何ですか?一般に、タイプチェックに基づいた分岐ロジックは良い習慣ではないと考えられています。これにはいくつかの例外がありますが、通常、より良い選択肢は多型を使用することです。関数パラメーターにも1つのタイプしかないことを確認するようにしてください。さまざまなタイプを考慮するのを忘れた場合、問題の可能性を減らし、すべての異なるタイプのケースを処理するためにコードを記述する必要がないため、コードをより簡単にします。合計関数を書くより良い方法は次のとおりです。

function sum(a, b) {
  if (typeof a === 'string') {
    a = 1;
  }

  return a + b;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
次に、関数の代わりに呼び出しコードのタイプチェックを処理します。上記からわかるように、この機能は今でははるかに簡単になっています。他の場所にタイプチェックを移動する必要がある場合でも、コードでそれらを実行するほど、うまく機能します。この記事の後半で、タイプチェックとタイプの使用について説明します。これには、誤って使用した場合にタイプチェックが簡単にカスケードできる方法が含まれます。

関数の戻り値の入力

これは他の2つに関連しています。関数は常に同じタイプの値を返す必要があります。ここでは、Angularjsの例を挙げることができます。 AngularJSは、Angular.lowercaseと呼ばれるテキストを小文字に変換する関数を提供します。標準関数、String.Prototype.TolowerCaseもあります。私たちは彼らの行動を比較して、ルールのこの部分をよりよく理解することができます:

function sum(a, b) {
  return a + b;
}
ログイン後にコピー
ログイン後にコピー
変数Aには、予想されるものが含まれます:「Helloタイプ」。しかし、Bには何が含まれますか?空の文字列になりますか?関数は例外を投げますか?それとも、それはただのヌルですか?この場合、Bの値はヌルです。結果が何であるかをすぐに推測することは困難であることに注意してください。最初から3つの結果が得られる可能性があります。角度関数の場合、非弦の値の場合、常に入力を返します。それでは、組み込み関数がどのように振る舞うかを見てみましょう:

var a = [];
var b = a;

a.push('Hello');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

最初の呼び出しの結果は同じですが、2番目の呼び出しは例外をスローします。組み込み関数は、一貫したタイプのルールに従い、誤ったパラメータータイプを許可しません。返品値は常に文字列です。それで、組み込み機能の方が良いと言えますが、これを行う方法を正確に疑問に思うかもしれません。そのような機能の典型的なユースケースを考えてみましょう。コードのある時点で使用して、文字列を小文字に変換します。 JavaScriptコードで頻繁に発生するように、入力が常に文字列であるかどうかを100%決定することはできません。私たちは良いプログラマーであり、私たちのコードが間違っていないと仮定するので、それは大丈夫です。これらのルールに準拠していないAngularJS関数を使用するとどうなりますか?非弦の値は問題なくそれを通過します。いくつかの関数を渡すことができ、xmlhttprequestコールを介して送信することもあります。これで、間違った値がサーバーにあり、最終的にデータベースに移動します。あなたは私が意味することを見ることができますよね?ルールに準拠する組み込み関数を使用すると、その時点ですぐにエラーが見つかります。関数を書くときはいつでも、返されるタイプが一貫していることを確認してください。悪い例を以下に示します:

var text = 'Hello types';

// 错误!不要这样做!
text = 1;
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
同様に、変数やパラメーターと同様に、そのような関数がある場合、その動作について仮定することはできません。値を返すタイプを確認する場合は、使用する必要があります。ある時点でそれを忘れるかもしれません、そして、別のエラーが私たちの手に現れます。私たちはそれをさまざまな方法で書き換えることができます、ここにこの問題の解決策があります:

function sum(a, b) {
  if (typeof a === 'string') {
    a = 1;
  }

  return a + b;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
今回は、すべてのパスが文字列を返すことを確認します。機能の結果を推測する方が簡単になりました。

nullと未定義は特別なものです

これまでのところ、実際には元のジャンルについてのみ議論しました。オブジェクトと配列に関しては同じルールに従う必要がありますが、2つの特別なケースに注意する必要があります。参照タイプを処理する場合、値がないことを示す必要がある場合があります。良い例はdocument.getElementByIDです。一致する要素が見つからない場合、nullを返します。これが、nullが任意のオブジェクトまたは配列とタイプを共有すると考える理由ですが、それらのオブジェクトまたは配列のみです。数などの元の値を返す可能性のある関数からnullを返すことを避ける必要があります。未定義は、参照される「価値のない」と見なすこともできます。ほとんどの目的では、nullと等しいと見なすことができますが、他のオブジェクト指向言語でのセマンティクスのため、nullは望ましいです。

配列とnull

アレイを使用する場合、通常、空の配列はnullよりも優れていると考える必要があります。配列は参照タイプですが、それらと一緒にnullを使用できますが、通常、空の配列を返す方が理にかなっています。次の例を見てみましょう:

var a = [];
var b = a;

a.push('Hello');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

これはおそらくアレイの最も一般的な使用の1つです。関数から配列を取得し、それを反復して他の操作を実行します。プロジェクトがないときにgetListofitemsがnullを返した場合、上記のコードはどうなりますか? nullに長さ(またはその他の属性)がないため、エラーが発生します。このような配列、またはforeachまたはlist.mapのような配列を使用することを検討する場合、値がない場合に空の配列を返すことは通常、良い考えであることがわかります。

タイプチェックとタイプ変換

タイプチェックとタイプ変換の詳細については、詳細に詳しく説明します。タイプチェックをする必要がありますか?タイプ変換はいつ行う必要がありますか?

タイプ変換

タイプ変換の最初の目標は、あなたの価値が正しいタイプであることを確認することです。値は、文字列などではなく数字でなければなりません。 2番目の目標は、値を1回だけ変換する必要があることです。タイプ変換を実行するのに最適な場所はソースにあります。たとえば、サーバーからデータを取得した場合、受信したデータを処理する関数で必要なタイプ変換を行う必要があります。 DOMからのデータの解析は、エラーが発生し始める非常に一般的な場所です。数字を含むテキストボックスがあり、それを読みたいとします。または、一部のHTML要素の属性である可能性があり、ユーザー入力である必要さえありません。

var text = 'Hello types';

// 错误!不要这样做!
text = 1;
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

通常、DOMから取得できる値は文字列であるため、読み取るときに変換することが重要です。ある程度、モジュールの「エッジ」と考えることができます。データは、その関数を読み取ることでJavaScriptモジュールに移動するため、データを正しい形式に変換する必要があります。モジュールの端でタイプ変換を行うことにより、内部で処理する必要がないことを確認します。これにより、エラーを引き起こす暗黙の型キャストの可能性が大幅に減少します。また、エッジからモジュールを入力するために間違った値を許可しないため、コードを少なくすることができます。

function sum(a, b) {
  if (typeof a === 'string') {
    a = 1;
  }

  return a + b;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

typeofおよびtype check

型分岐ロジックに基づくのではなく、検証にTypeofのみを使用する必要があります。これにはいくつかの例外がありますが、それは良い経験則です。 2つの例を見てみましょう:

function sum(a, b) {
  return a + b;
}
ログイン後にコピー
ログイン後にコピー

これは、検証にTypeofを使用する例です。関数に渡されたパラメーターが正しいタイプであることを確認します。ただし、次の例は、分岐ロジックがタイプに基づいているものを示しています。

var a = [];
var b = a;

a.push('Hello');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

これをしないでください。時々そうする必要があるかもしれませんが、これは多くの場合、デザインの不十分な兆候です。このロジックを頻繁に実行していることに気付いた場合は、おそらくコードの早い段階で値を正しいタイプに変換する必要があります。コードで多くのタイプを使用することになった場合、これはあなたが比較する値を変換する必要があるかもしれないことを意味するかもしれません。タイプチェックはしばしば広がりますが、これは通常、設計が不十分なタイプの兆候です。前述のように、カスケードのタイプを避けることができるため、モジュールエッジでタイプ変換を試みる必要があります。できるだけ早く変換する場合、後で呼び出す関数は、タイプチェックやタイプ変換を行う必要はありません。これはオブジェクトにも適用されます。多くのチェックにinstanceofを使用している場合、またはオブジェクト上のプロパティをチェックしている場合、おそらく別の方法でデータを構築する必要があります。 TypeOFと同じルールもInstanceOFにも適用されます。それは悪いデザインサインかもしれないので、それを避けるようにしてください。ただし、避けられない状況は1つあります

var text = 'Hello types';

// 错误!不要这样做!
text = 1;
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
コードが例外型固有のタイプを処理する必要がある場合、JavaScript Catchは他の言語のようにタイプごとに区別を許可しないため、通常、IntanceOFが適切な選択です。他のほとんどの場合、インスタンスを避けるようにしてください。

結論

私たちが発見したように、弱いタイプのJavaScriptは私たちに大きな自由をもたらしますが、私たちも注意しなければなりません。そうでなければ、意味のないジャンルの混乱になります。コードが一貫したタイプのルールに従うことを確認することにより、多くのトラブルを回避できます。タイプを知っていれば、コードを推測する方が簡単です。エラーを防ぐために、コードに多くのタイプチェックを構築する必要はありません。これは、強くタイプされた言語を使用していない場合は難しいようですが、コードをデバッグまたは維持する必要がある場合に大いに支払います。このトピックの詳細については、TypeScriptをチェックすることをお勧めします。それはJavaScriptのような言語ですが、言語により強いタイプのセマンティクスを追加します。また、ミキシングやマッチングタイプなどの愚かなことをしようとすると、エラーを吐き出すコンパイラもあります。

JavaScript(FAQ)

の強力な型言語に関するFAQ 強く型付けされた言語とタイプの弱い言語の違いは何ですか?

強く入力された言語とは、変数が特定のデータ型にバインドされる言語を指します。例には、JavaとCが含まれます。一方、JavaScriptのような弱く型付けされた言語により、変数はあらゆる種類のデータを保持し、必要に応じて変換を自動的に入力できます。不適切に処理された場合、この柔軟性は予期しない結果につながる可能性があります。

JavaScriptで強力なタイピングを実施する方法は?

JavaScript自体は弱い型型言語ですが、JavaScriptの静的に型付けされたスーパーセットであるTypeScriptを使用して強力なタイプを強制することができます。 TypeScriptは静的タイプをJavaScriptに追加し、コンパイル時間でタイプチェックを可能にします。これにより、開発プロセスの早い段階でエラーを検出するのに役立ちます。 「Strict Pattern」は、JavaScriptの別の方法であり、言語を不安定なアクションのためにエラーを投げることにより、強くタイプされた言語のように振る舞います。

強くタイプされた言語を使用することの利点は何ですか?

強く入力された言語には、いくつかの利点があります。彼らは、ランタイムではなくコンパイル時にエラーをキャッチするのに役立ちます。これにより、多くのデバッグ時間を節約できます。また、変数のデータ型が使用方法を明確に示しているため、コードをより自己文書的にします。さらに、予期しないタイプの変換を防ぐため、コードをより予測可能で推測しやすくすることができます。

JavaScriptを強く型付け言語として使用できますか?

JavaScriptはデフォルトでは強く型付けされた言語ではありませんが、TypeScriptやFlowなどのツールを使用して強力な型と型付けされた言語を強制することができます。これらのツールはJavaScriptに静​​的タイプを追加し、コンパイル時にタイプチェックを可能にします。これにより、開発プロセスの早い段階でエラーを検出するのに役立ちます。ただし、これらのツールはJavaScriptの根本的な性質を変更しないことに注意することが重要です。

タイプスクリプトとは何ですか?それはJavaScriptとどのように関連していますか?

TypeScriptは、Microsoftが開発したJavaScript statically Typed Supersetです。静的タイプをJavaScriptに追加し、コンパイル時間でタイプチェックを可能にします。これにより、開発プロセスの早い段階でエラーを検出するのに役立ちます。タイプスクリプトコードはJavaScriptに変換されます。つまり、JavaScriptが実行されるどこでも実行できます。 JavaScriptと完全に互換性があり、JavaScriptのすべての機能を使用できます。

強くタイプされた言語を使用することの欠点は何ですか?

強く入力された言語には多くの利点がありますが、いくつかの欠点もあります。それらはより冗長になる可能性があり、弱いタイプの言語と同じタスクを完了するためにより多くのコードが必要です。また、開発プロセスが遅くなる可能性があるコンピレーションステップも必要です。さらに、それらは柔軟性が低く、動的データの処理など、特定のタスクで使用するのがより困難です。

javascriptで「厳格モード」はどのように機能しますか?

「Strict Pattern」は、JavaScriptの機能であり、言語を強く型付けされた言語のように振る舞います。値を読み取り専用のプロパティに割り当てる、変数を宣言する前に変数を使用するなど、安全でないアクションのエラーをスローします。これにより、開発プロセスの早い段階でエラーを検出するのに役立ちます。 「Strictモード」を有効にするには、「Strictを使用する」という行を追加します。

JavaScriptのタイプ強制とは何ですか?

タイプ強制はJavaScriptの機能であり、言語は必要に応じてあるデータ型を自動的に別のデータ型に変換します。たとえば、番号と文字列を追加しようとすると、JavaScriptは追加を実行する前に数字を文字列に変換します。これは便利ですが、不適切に処理された場合、予期しない結果につながる可能性があります。

JavaScriptのタイプ強制を避ける方法は?

JavaScriptのタイプ強制を回避する1つの方法は、「Strict Mode」を使用することです。これにより、安全でないアクションのエラーがスローされます。別の方法は、前者がタイプ強制を実行しないため、「==」演算子の代わりに「==」演算子の代わりに「===」演算子を使用することです。さらに、TypeScriptやFlowなどのツールを使用してJavaScriptに静​​的タイプを追加できます。これにより、コンパイル時にタイプ関連のエラーがキャッチされます。

JavaScriptで強く入力された言語の未来は何ですか?

JavaScriptで強く入力された言語の使用は、将来的にはエラーをキャッチするなど、コードをより予測可能にするなど、多くの利点を提供するため、将来的に増加する可能性があります。 TypeScriptやFlowなどのツールはより一般的になりつつあり、JavaScriptをよりタイプセーフにするための新しいツールと機能が開発されています。ただし、JavaScriptの柔軟性とダイナミティは、多くの開発者にとって引き続き最初の選択肢となります。

以上がJSの強力な型言語からの借入技術の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート