タイプスクリプトは、靜的タイプ、より良いツール、および早期エラー検出を追加することにより、JavaScriptを強(qiáng)化し、開発中にバグをキャッチしやすくします。 1.數(shù)字を期待する関數(shù)がコンパイル時に文字列を拒否する場合に示されているように、タイプチェックを通じてランタイムエラーを解決します。 2。文字列、數(shù)字、ブールのような基本的なタイプは、學(xué)習(xí)が簡単で、しばしば自動的に推測されます。 3.インターフェイスはオブジェクトの形狀を定義し、関數(shù)引數(shù)とAPI応答の正しい構(gòu)造を確保します。 4。関數(shù)の署名は、関數(shù)タイプのサポートを含むパラメーターと戻り値のタイプの安全性を提供します。 5。ユニオンとリテラルのタイプは、特定のオプションに値を制限し、予測可能性を向上させます。 6.ジェネリックは、異なるデータ型にわたって再利用可能なタイプセーフ関數(shù)を有効にします。タイプスクリプトを採用するには、それをインストールし、.jsファイルの名前を.tsに変更し、inclementlyを段階的に追加し、控えめに使用して、時間の経過とともに厳密なモードを有効にすることから始めます。オートコンプリート、リファクタリング、インラインエラーなどの強(qiáng)力なツールサポートに加えて、@Typesを介した広範(fàn)なライブラリの互換性により、TypeScriptはコードの品質(zhì)と開発者エクスペリエンスを向上させます。あらゆる過度の注釈を使いすぎ、厳格なモードを無視し、タイプのインターフェイスを混亂させるような落とし穴を避けてください。これは、ユニオンまたは高度なロジックのオブジェクトとタイプの使用インターフェイスを使用します。最終的に、TypeScriptはJavaScriptに取って代わりませんが、それを強(qiáng)化するため、開発者は小さく徐々に導(dǎo)入されたタイプを開始することでアプリケーションを自信を持ってスケーリングできるようにし、実際のJavaScript開発に不可欠になります。

あなたがJavaScriptの開発者である場合、TypeScriptは最初は別の複雑な層のように見えるかもしれません。しかし、最初の學(xué)習(xí)曲線を通過すると、開発ワークフローにできる最も実用的なアップグレードの1つであることに気付くでしょう。 TypeScriptは、基本的に、SuperPowers（靜的タイプ、より良いツール、および早期エラー検出）を備えたJavaScriptです。

JavaScript開発者がTypeScriptをスムーズに理解し、採用するのに役立つ実用的なガイドを次に示します。

タイプスクリプトが解決するもの（JavaScriptがそうではない）

JavaScriptは動的で柔軟ですが、その柔軟性は、早期にキャッチするのが難しいランタイムエラーにつながる可能性があります。例えば：

関數(shù)add（a、b）{
  ABを返します。
}

追加（5、 "Hello"）; //「5hello」を返します - おそらくあなたが望んでいたものではありません

大きなコードベースでは、これらの種類のバグはテストをすり抜けて、生産の問題を引き起こす可能性があります。

タイプスクリプトは、コンパイル時にこれらの問題をキャッチするためにタイプの注釈を追加します。

関數(shù)add（a：number、b：number）：number {
  ABを返します。
}

追加（5、 "Hello"）; //?エラー：タイプ「文字列」の引數(shù)は「番號」に割り當(dāng)てられません

これは、機(jī)能の仕組みを変えることはありません - JavaScriptとして実行されますが、開発中にすぐにフィードバックが得られます。

すべてのJavaScript開発者が知っておくべき重要な機(jī)能

1.基本タイプは簡単に學(xué)習(xí)できます

開始するために複雑なタイプの理論を習(xí)得する必要はありません。 TypeScriptの基本タイプは、JavaScript Primitivesに直接マッピングされます。

• string
• number
• boolean
• null 、 undefined
• object 、 array 、 function

例：

 let username：string = "Alice";
年齢：番號= 30;
Isactiveとしましょう：boolean = true;
letタグ：string [] = ["ts"、 "js"、 "dev"];

さらに良い：タイプスクリプトは、多くの場合、自動的にタイプを推測することがよくあります：

 let username = "alice"; // TypeScriptはこれが文字列であることを知っています

したがって、常に注釈を付ける必要はありません。

2。オブジェクト形狀のインターフェイス

JavaScriptでは、オブジェクトはどこにでもあります - 関數(shù)引數(shù)、API応答、構(gòu)成オプション。 TypeScriptを使用すると、 interfaceまたはtypeを使用して構(gòu)造を定義できます。

インターフェイスユーザー{
  ID：番號;
  名前：文字列;
  電子メール？：文字列; //オプションのプロパティ
  Readonlyの役割：文字列; //作成後に変更できません
}

function printuser（user：user）{
  console.log（user.name、user.role）;
}

これで、オブジェクトがidまたはnameが欠落している場合、タイプスクリプトが警告します。

3。タイプの安全性のある関數(shù)署名

関數(shù)パラメーターと戻り値を入力できます。

関數(shù)乗算（a：number、b：number）：number {
  a * bを返します。
}

関數(shù)タイプを定義することもできます。

 type mathop =（a：number、b：number）=> number;

const divide：mathop =（a、b）=> a / b;

これは、変數(shù)にコールバックを渡すか、機(jī)能を保存するときに役立ちます。

4。組合と文字通りのタイプとの協(xié)力

値はいくつかのタイプの1つになる場合があります。

関數(shù)renderloading（state： "loading" | "success" | "error"）{
  //これらの3つの文字列のみが許可されています
}

または混合データを処理する：

応答としましょう：文字列|番號;
Response = "success";
応答= 200; // わかりました

typeofチェックを使用して、組合を安全に処理します。

 if（typeof response === "string"）{
  console.log（response.touppercase（））;
}

5。ジェネリック：再利用可能なタイプロジック

ジェネリックでは、タイプの安全性を維持しながら、あらゆるタイプで動作する関數(shù)とコンポーネントを書くことができます。

関數(shù)ID <T>（arg：t）：t {
  argを返します。
}

let output = Identity <String>（ "Hello"）; // tは文字列です
let output2 = ID（42）; // typeScriptはtを數(shù)字として導(dǎo)きます

これは、ユーティリティ機(jī)能、API、およびReactコンポーネントに特に役立ちます。

今日からTypeScriptの使用を開始する方法

アプリ全體を書き換える必要はありません。タイプスクリプトを段階的に採用する方法は次のとおりです。

• ステップ1： typeprictriptをインストールします

  NPMインストール-Dタイプスクリプト
  NPX TSC  -  INIT＃TSCONFIG.JSONを作成します

• ステップ2： .jsファイルを.ts （またはReactの.tsx ）に名前を変更します

• ステップ3：理にかなっている場所にタイプの追加を開始します

• ステップ4：複雑なレガシーコードにany的に使用します（ただし、交換することを目指しています）

• ステップ5：時間の経過とともにtsconfig.jsonで厳格モードを有効にします

ヒント： // @ts-ignore控えめに使用します - それはeslint-disableのようなものですが、タイプ用です。

ツーリングと開発者のエクスペリエンス

タイプスクリプトの最大の勝利の1つはツールです。

• IDEはオブジェクトの形狀を知っているため、AutoCompleteはより適切に機(jī)能します
• リファクタリングはより安全です - プロパティの名前を変更し、タイプスクリプトの更新はすべての參照を更新します
• 入力するときのインラインエラー（VSコード、WebStormなど）
• ファイル全體で定義にジャンプします

オブジェクトに含まれるものを確認(rèn)するために、コンソールログの時間が少なくなります。

また、最も人気のあるライブラリ（React、Express、Node.jsなど）には、組み込みまたは@typesサポートがあります。

 npmインストール @タイプ/ノード
npmインストール @タイプ/React

したがって、サードパーティコードの完全なIntelliSenseを取得します。

一般的な落とし穴とそれらを避ける方法

• anyを使用する：それは目的を打ち負(fù)かします。タイプがわからない場合は、代わりにunknown使用し、実行時に検証します。

• タイプアノテーションが多すぎる：可能な場合はタイプスクリプトを推測させてください。これにより、コードがきれいになります。

• strictモードを無視する： strict: true最終的にtsconfig.jsonでtrue。 NULL/未定義のエラーをキャッチし、より良いプラクティスを?qū)g施します。

• 紛らわしいinterface vs type ：それらは似ていますが、：

  • interfaceを拡張できます（ extends ）
  • type組合と高度なタイプをサポートします
  • オブジェクトにinterfaceを使用し、他の人にはtype

最終的な考え

TypeScriptは、JavaScriptを「柔軟性の低い」にすることではありません。アプリが成長するにつれて自信を拡大することです。 JavaScript - 同じ構(gòu)文、同じランタイム - がセーフティネットを使用しています。

バグが発生する前にバグをキャッチし、コードをより速く理解し、より効果的にコラボレーションします。

そして、最高の部分？あなたは小さく始めることができます。 1つのファイルを変換します。 1つの関數(shù)にタイプを追加します。メリットをご覧ください。その後、続けます。

TypeScriptはJavaScriptを置き換えません - それを強(qiáng)化します。そして、JavaScript開発者の実世界のアプリを構(gòu)築するために、それはすぐに不可欠になりつつあります。

基本的に、小さなスクリプトを超えてJavaScriptを書いている場合、タイプスクリプトは投資に値します。

以上がJavaScript開発者向けのTypeScriptの包括的なガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。