JavaScript を捨てて TypeScript を学ぶ必要があるのはなぜでしょうか? TypeScript と JavaScript

あなたは JavaScript に慣れていませんが、JavaScript がどれほど好きでも、TypeScript を試してみる必要があります。もしかしたらあなたには引っ越しする理由がないかもしれませんが、TypeScript を少し味わってみたい旅に連れて行きましょう。 TypeScript に移行すべき理由は 13 以上挙げることができますが、今のところは、開発において TypeScript が JavaScript よりもはるかに優れている理由を 5 つのポイントで説明し、TypeScript に移行するよう説得してみます。次のプロジェクトに TypeScript を選択する理由。

厳密に型指定された JavaScript

TypeScript は、厳密に型指定された単なる JavaScript にすぎません。私が JavaScript が嫌いな理由の 1 つは (はい、嫌いです)、この言語には非常に柔軟性があり、ルールや規制がなく、どんな駄文を書いてもかまいませんし、エラーも発生しないことです (例外はあります)。たとえば、変数を作成し、それに値として数値 (たとえば 6) を与えた場合、後で同じ変数に何らかの関数を割り当てることができ、さらにその変数を呼び出すこともできます。これは私には少し面白いように思えます。とにかく、何が起こるかを見てみましょう。 TypeScript が関係しています。

typescript では、変数を定義するときに、変数が数値、配列、文​​字列、またはその他のものを格納するのと同じように、その型を記述する必要があります。一度これを実行すると、そこに他のものを保存することはできなくなり、TypeScript では続行できなくなります。TypeScript はこれに関して厳密です。

let age: number;
age = 25;

変数に型を指定せずに値を代入しても、与えられた値から自動的に型を見つけて記憶してくれるのは賢すぎます。

let age = 10;

age = "Donald Trump"
~~~
// Type '"Donald Trump"' is not assignable to type 'number'.(2322)

C/C のような言語をご存じの場合、そこでは型が int age として定義されています。同様に、TypeScript では、let age:number; のように、コロン記号に続く変数名の後に型を定義します。このようにして、JavaScript の構文を変更せずに TypeScript を詰め込むだけです。最初にお伝えしたのは、TypeScript は型だけを備えた単なる JavaScript ではありません。 typescript の構文には焦点を当てません。この記事の範囲外です。

JS であれば、年齢を自分の名前、配列、さらには関数に割り当てて何でもできますが、TS では、一度数値として生成されると、数値のままになります。 、他には何もありません。これを実行すると、すぐにエラーが発生しますが、JS では、関数を割り当てずに age を呼び出したり、.length プロパティにアクセスしたりするなど、不正なことをしていない限り、許容されます。関数。

最初は、JS から TS に切り替える価値がないと思われるかもしれませんが、一度完全に理解すると、この機能のためだけに JS でコーディングする必要はなくなります。

エラーが必要だからです。

私がエラーが必要だと言っているのは、エラーのあるコードを書いてほしいという意味ではありません。しかし、書いたコードにはエラーがなくてはなりません。そのために、開発環境があなたに提供するのが仕事です。エラー。そして、JS では、それができないだけであり、それが人々に好まれる理由の 1 つであり、同時に嫌われる理由でもあります。エラーというときは、構文エラーを除くすべてのことを意味します。 JS では、間違った内容を書いてもエラーは発生しませんが、何か問題が発生するとエラーが発生します。したがって、テスト時にコードの一部が実行されない場合は、本番環境で多少の問題が発生することを覚悟してください。 :)
例を見てみましょう

私は 2 つの数値を乗算するコードを書いています。これを JS と TS の両方で実行します。JS がいかに信頼性が低く、さまざまな点でアプリケーションを破壊する可能性があることがわかります。

let age: number;
age = 25;

乗算は文字通りどのような方法でも呼び出すことができ、制限はなく、常に予期しない結果が得られます。これが JS の最悪の点です。戻り値をどこかで使用する必要があるとします。それがどれほどの不整合と予期しない結果を引き起こすかアプリケーション内で。

しかし、TypeScript のおかげで、それは非常に厳密であり、関数が を期待している場合、数値を渡す必要があり、両方とも数値である必要があると規定されている場合、ルールに従わない場合は続行できません。 2 つの引数を渡す必要があり、両方とも数値でなければなりません。同じコードを TypeScript で見てみましょう。 TS 構文を知らなくても心配する必要はありません。TS 構文は JS に似ていますが、戻り値の型が左中括弧と引数の型とその名前の前に来る点が異なります。

let age = 10;

age = "Donald Trump"
~~~
// Type '"Donald Trump"' is not assignable to type 'number'.(2322)

ここ TS では、予期しない結果は決してありません。すべてのエラーを削除した場合にのみ先に進むことができます。それが私が TS

TS は、作成したコード内のエラーを通知するだけでなく、エラーが発生する可能性のある場所も通知します。この簡単な例を見てみましょう。

function multiply (num1, num2 ) {
    return num1 * num2;
}

console.log(multiply(3, 4));
// returns 12

console.log(multiply(3));
// return NaN

console.log(multiply(3, null));
// returns 0

console.log(multiply());
// returns NaN

ご覧のとおり、ソーシャル プロパティはオプションです。これは、ソーシャルが未定義の場合があることを意味します。TS はそれを知っており、それを処理するまで続行できません。

function multiply (num1:number, num2:number) :number{
    return num1 * num2;
}

console.log(multiply(3, 4));
// returns 12

console.log(multiply(3));
//          ~~~~~~~~~~~
// Expected 2 arguments, but got 1.(2554)
// input.tsx(1, 33): An argument for 'num2' was not provided.

console.log(multiply(3, null));
//                      ~~~~
// Argument of type 'null' is not assignable to parameter of type 'number'.


console.log(multiply());
//          ~~~~~~~~~~~
// Expected 2 arguments, but got 0.(2554)
// input.tsx(1, 20): An argument for 'num1' was not provided.

したがって、これは JS によって黙って無視され、場合によってはエラーが発生します。これが、TS がより信頼できると考えられるもう 1 つの理由です。

自動テストと文書化。

JS で書かれたライブラリの関数を使用していると仮定します。どのパラメータを渡さなければならないかをどうやって知るのでしょうか?ドキュメントにアクセスして、どのパラメータが必要か、どれがオプションであるかを確認してから、関数を呼び出します。しかし TS では、それを文書化する必要はなく、すべてが型自体によって説明されます。さらに、関数を正しい方法で使用し、ランダムなパラメーターを渡さないことも保証されます。

たとえば、上記の 2 番目のセクションを参照してください。

もう 1 つのケースとして、ネストされたプロパティを持つ JS オブジェクトを提供するライブラリを使用していると仮定します。そのため、プロパティの正確な名前と、どのプロパティが未定義であるかを確認するのは、非常に重要です。痛み。オブジェクトにどのようなものが含まれているかを確認するには、ドキュメントを詳しく調べるか、場合によってはオブジェクトのコンソールログを記録する必要があります。それは本当に私が嫌いなことであり、何らかの方法でオブジェクト自体が、それに含まれるプロパティ、および一部のプロパティが未定義であるかどうか、またはプロパティの値が文字列、数値、配列などであるかどうかを通知する方法を望みます。さて、その願いは叶いました。TypeScript にもう一度感謝します。コードが TS で書かれている場合、正確な動作が得られます。例で見てみましょう。

let age: number;
age = 25;

ここで、ユーザーがどのようなプロパティを持つかを確認します。コンソールにログを記録したり、 を追加するときに関数定義に移動したりする必要はありません。ユーザーの後には、そのプロパティのリストが自動的に表示され、どのプロパティが未定義であるかも示されます。下の画像をご覧ください。

また、すべての可能性をチェックしてコードを自動的にテストし、いずれかの可能性が失敗したかどうかを通知します。すごいですね、そうです、そうです。この機能により、開発時に膨大な数のバグが防止されます。関数のテストを作成したり、異なる値で手動でテストしたりする必要はありません。TS が代わりにテストを実行し、何かを見逃しているかどうかを教えてくれます。後で問題が発生する可能性があります。

以下のコードでは、2 つの引数を受け取り、未定義でない場合は各パラメーターを配列に追加して文字列の配列を返す関数を作成しました。最初の引数は必須ですが、2 番目の引数はオプションです。

let age = 10;

age = "Donald Trump"
~~~
// Type '"Donald Trump"' is not assignable to type 'number'.(2322)

上記のコードは、私が間違いを犯す非常に一般的なシナリオです。 Array.push は更新された配列を返しませんが、配列の新しい長さを返します。したがって、上記のコードが JS で記述されている場合、エラーは発生せず、コードが実行されるだけで期待どおりの結果が得られます。デバッグして間違いを見つける必要があります。また、関数を渡すと関数は 2 を返します。 2番目の引数も。しかし、ここ TS では、TypeScript がケースを自動的に実行し、その特定のケースでは関数が文字列の配列を返さないことが明確にわかります。

別のエラーがあります。つまり、2 番目のパラメータを渡さないと、依然として何も (未定義) が返されません。これは、文字列の配列を返さなければならないため、関数の動作にも違反します。したがって、ここで関数にいくつかの変更を加えたところ、TS は緑色のフラグを出しました。これは、関数が予期しない結果を与えることは決してないことを意味します。以下を参照してください。

let age: number;
age = 25;

常に JavaScript の数歩先を行く

Typescript は常に Javascript よりも数歩先を行っています。 JavaScript で新機能が発表され、それが次の ECMA リリースでリリースされる予定である場合、TS は正式リリースよりも前にそれをリリースします。TS は以前のバージョンにコンパイルできるため、ブラウザーでの互換性を心配することなく使用できます。 JavaScript (ES5 など) の。 TypeScript には、JavaScript にはない機能がたくさんあります。

したがって、TypeScript は JavaScript、ECMA5、ECMA6、ECMA7、ECMAnext のスーパーセットであり、JavaScript には存在すらしない機能もいくつかあると言えます。

結論

はい、遅かれ早かれ、TypeScript を受け入れなければなりません。そこから逃げることはできません。 JavaScript で記述されているすべての npm パッケージは、その型も提供する必要があるか、typescript をサポートする別のパッケージが推奨されます。現在、大規模なライブラリ、パッケージ、フレームワークのほとんどは TypeScript で書かれています。

当初、パッケージは TypeScript をサポートする JavaScript にも使用されていましたが、現在では形勢が逆転し、パッケージは TypeScript に組み込まれ、JavaScript もサポートされるようになりました。誰もが JavaScript に対する TypeScript の威力と必要性を認識しており、それを受け入れています。

Angular を学ぶことは決してできません。ループバック 4 の場合と同じように、TS コードのみを記述する必要があるからです。NestJS の主な言語は TypeScriptpt で、JavaScript のサポートも提供します。以下はNestJs

の言葉です

私たちは TypeScript が大好きですが、何よりも Node.js が大好きです。そのため、Nest は TypeScript と純粋な JavaScript の両方と互換性があります。 Nest は最新の言語機能を活用しているため、バニラ JavaScript で使用するには Babel コンパイラが必要です。

私が説明した理由にまだ満足できず、反対の質問がある場合は、いつでもご連絡ください。信じてください。試してみる価値はあります。後悔はしないでしょう。

以上がJavaScript を捨てて TypeScript を学ぶ必要があるのはなぜでしょうか? TypeScript と JavaScriptの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。