logo

TypeScriptチュートリアル：TypeScriptの基礎について知る

メイン プログラミングとフレームワーク TypeScriptチュートリアル：TypeScriptの基礎について知る



TypeScriptは、強く型付けされたJavaScriptのスーパーセットです。このTypeScriptチュートリアルでは、詳細を理解し、基本を理解します。

TypeScriptは、強く型付けされたスーパーセットです。 プレーンJavaScriptにコンパイルされます。この言語は、アプリケーション規模のJavaScript開発に使用できます。また、任意のブラウザ、任意のホスト、および任意のオペレーティングシステムで実行できます。このTypeScriptチュートリアルでは、TypeScriptの詳細を理解し、次の順序で基本を理解します。

TypeScriptの紹介

TypeScriptは、プレーンJavaScriptにコンパイルされるJavaScriptの型付きスーパーセットです。 TypeScriptは純粋なオブジェクト指向であり、クラス、インターフェイス、および次のような静的に型指定されたプログラミング言語を備えています。 C＃ または 。 JavaScriptファイルでコンパイルして生成するにはコンパイラが必要です。基本的に、TypeScriptはJavaScriptのES6バージョンであり、いくつかの追加機能があります。





TypeScriptコードは次のファイルに書き込まれます .ts拡張子 次に、コンパイラを使用してJavaScriptにコンパイルします。ファイルは任意のコードエディタで書き込むことができ、コンパイラをプラットフォームにインストールする必要があります。インストール後、コマンド tsc .ts TypeScriptコードをプレーンなJavaScriptファイルにコンパイルします。

構文： 



var message：string = 'Edurekaへようこそ！' console.log（メッセージ）

コンパイル時に、次のJavaScriptコードが生成されます。

// typescriptで生成1.8.10var message = 'Welcome to Edureka！' console.log（メッセージ）

TypeScriptの機能

機能-typescriptチュートリアル-edureka

  • クロスプラットフォーム： TypeScriptコンパイラは、Windows、MacOS、Linuxなどの任意のオペレーティングシステムにインストールできます。



  • オブジェクト指向言語 ：TypeScriptは次のような機能を提供します クラス 、インターフェイス、およびモジュール。したがって、クライアント側およびサーバー側の開発用のオブジェクト指向コードを記述できます。

  • 静的型チェック ：TypeScriptは静的型付けを使用し、コンパイル時の型チェックに役立ちます。したがって、スクリプトを実行せずにコードを記述しているときにエラーを見つけることができます。

  • オプションの静的入力 ：TypeScriptでは、JavaScriptの動的型付けを使用している場合に備えて、オプションの静的型付けも可能です。

  • DOM操作 ：TypeScriptを使用して、要素を追加または削除するためのDOMを操作できます。

    Javaクラスパスウィンドウを設定する7

  • ES6の機能 ：TypeScriptには、クラス、インターフェイス、Arrow関数など、計画されているECMAScript 2015（ES 6、7）のほとんどの機能が含まれています。

TypeScriptを使用する利点

  • TypeScriptは 速く、シンプルで、学びやすい 任意のブラウザまたはJavaScriptエンジンで実行されます。

  • です 同様 に JavaScript 同じ構文とセマンティクスを使用します。

  • これは、バックエンド開発者がフロントエンドを作成するのに役立ちます より高速なコード 。

  • TypeScriptコードはから呼び出すことができます 既存のJavaScriptコード 。また、既存のJavaScriptフレームワークおよびライブラリで問題なく動作します。

  • 拡張子が.d.tsの定義ファイルは、次のような既存のJavaScriptライブラリのサポートを提供します。 Jquery、D3.js 、など。したがって、TypeScriptコードは追加できます JavaScriptライブラリ 型定義を使用して、型チェック、コードのオートコンプリート、および既存の動的に型指定されたJavaScriptライブラリのドキュメントの利点を利用します。

  • からの機能が含まれています ES6 そして ES7 ES5レベルのJavaScriptエンジンで実行できます。 Node.js 。

TypeScriptとは何かを理解したので、このTypeScriptチュートリアルに進み、さまざまなタイプを見てみましょう。

TypeScriptタイプ

型システムは、言語でサポートされているさまざまなタイプの値を表します。それはチェックします 有効 供給された 値 それらがプログラムによって保存または操作される前。

次の2つのタイプに分類できます。

  • ビルトイン ：これには、数値、文字列、ブール値、void、null、および未定義が含まれます。
  • ユーザー定義の ：列挙型（列挙型）、クラス、インターフェイス、配列、およびタプルが含まれます。

それでは、このTypeScriptチュートリアルに進み、変数について詳しく理解しましょう。

TypeScriptチュートリアル：変数

変数は、値を格納するために使用されるメモリ内の名前付きスペースです。

TypeScriptで変数を宣言するための型構文には、変数名の後にコロン（:)があり、その後にその型が続きます。 JavaScriptと同様に、 varキーワード 変数を宣言します。

変数を宣言するとき、4つのオプションがあります。

var [identifier]：[type-annotation] = value
var [識別子]：[型注釈]
var [identifier] = value
var [識別]

例： 

var name：string = 'Daisy' var empid：number = 1001 console.log（ 'name' + name）console.log（ 'employee id' + empid）

コンパイル時に、次のJavaScriptコードが生成されます。

// typescriptで生成1.8.10var name = 'Daisy' var empid = 1001 console.log（ 'name' + name）console.log（ 'employee id：' + empid）

出力：

名前：デイジー
従業員ID：1001

それでは、TypeScriptチュートリアルの次のトピックに移りましょう。

演算子

演算子は、データに対して実行される関数を定義するために使用されます。演算子が機能するデータは、オペランドと呼ばれます。さまざまな種類があります 演算子 次のようなTypeScriptで：

  • 算術演算子
  • 論理演算子
  • 関係演算子
  • ビット演算子
  • 代入演算子

算術演算子

演算子 説明

加算（+）

オペランドの合計を返します

減算（-）

値の差を返します

掛け算（*）

値の積を返します

除算（/）

除算演算を実行し、商を返します

係数 （％）

除算演算を実行し、余りを返します

インクリメント（++）

変数の値を1つインクリメントします

デクリメント（–）

変数の値を1つ減らします

例：

var num1：number = 10 var num2：number = 2 var res：number = 0 res = num1 + num2 console.log（ 'Sum：' + res）res = num1-num2 console.log（ 'Difference：' + res） res = num1 * num2 console.log（ 'Product：' + res）

出力：

合計：12
違い：8
製品：20

論理演算子

演算子 説明

AND（&&）

指定されたすべての式がtrueを返す場合にのみtrueを返します

または（||）

指定された式の少なくとも1つがtrueを返す場合、これはtrueを返します

しない（！）

式の結果の逆を返します。

例： 

var avg：number = 20 varパーセンテージ：数値= 90 console.log（ '平均値：' + avg + '、パーセンテージ値：' +パーセンテージ）var res：boolean =（（avg> 50）&&（percentage> 80 ））console.log（ '（avg> 50）&&（percentage> 80）：'、res）

出力：

平均値：20、パーセンテージ値：90
（平均> 50）&&（パーセンテージ> 80）：false

関係演算子

演算子 説明

>>

大なり記号

<

未満

> =

以上

<=

以下

==

平等

！=

等しくない

例： 

var num1：number = 10 var num2：number = 7 console.log（ 'Value of num1：' + num1）console.log（ 'Value of num2：' + num2）var res = num1> num2 console.log（ 'num1 num2より大きい： '+ res）res = num1
 出力： 
num1の値1：10 
 num2の値：7 
 num1がnum2より大きい：true 
 num1がnum2より小さい：false
 ビット演算子 
 演算子  説明 
 ビットごとのAND（＆） 
整数引数の各ビットに対してブールAND演算を実行します。
 ビットごとのOR（|） 
整数引数の各ビットに対してブールOR演算を実行します。
 ビットごとのXOR（^） 
整数引数の各ビットに対してブール排他的論理和演算を実行します。
 ビット単位ではありません（〜） 
これは単項演算子であり、オペランドのすべてのビットを逆にすることによって動作します。
 左方移動 （<<) 
第1オペランドのすべてのビットを、第2オペランドで指定された桁数だけ左に移動します。
 右シフト（>>） 
左のオペランドの値は、右のオペランドで指定されたビット数だけ右に移動します。
 ゼロで右シフト（>>>） 
>>演算子に似ていますが、左側にシフトインされたビットが常にゼロである点が異なります。
 例： 
var a：number = 2 //ビット表示10var b：number = 3 //ビット表示11var result result =（a＆b）console.log（ '（a＆b）=>'、result）result =（ a | b）console.log（ '（a | b）=>'、result）
 出力： 
（a＆b）=> 2 
 （a | b）=> 3
 代入演算子 
 演算子  説明 
 単純な割り当て（=） 
右側のオペランドから左側のオペランドに値を割り当てます
 追加と割り当て（+ =） 
右のオペランドを左のオペランドに追加し、結果を左のオペランドに割り当てます。
 減算と割り当て（-=） 
左のオペランドから右のオペランドを減算し、その結果を左のオペランドに割り当てます。
 乗算と割り当て（* =） 
右のオペランドと左のオペランドを乗算し、その結果を左のオペランドに割り当てます。
 除算と割り当て（/ =） 
左のオペランドを右のオペランドで除算し、その結果を左のオペランドに割り当てます。
 例： 
var a：number = 12 var b：number = 10 a = b console.log（ 'a = b：' + a）a + = b console.log（ 'a + = b：' + a）a- = b console .log（ 'a- = b：' + a）
 出力： 
a = b：10 
 a + = b：20 
 a- = b：10
これらは異なる演算子でした。それでは、TypeScriptチュートリアルに進み、ループについて学びましょう。
 ループ 
コードのブロックを数回実行する必要がある場合があります。 A ループ ステートメントを使用すると、ステートメントまたはステートメントのグループを複数回実行できます。
TypeScriptループは次のように分類できます。
 Forループ 
ザ・ forループ 明確なループの実装です。
 構文： 
for（1番目の式2番目の式3番目の式）{//繰り返し実行されるステートメント}
ここでは、ループが開始する前に最初の式が実行されます。 2番目の式は、ループを実行するための条件です。そして、3番目の式はすべてのコードブロックの実行後に実行されます。
 例： 
for（let i = 0 i<2 i++) { console.log ('Execute block statement' + i) }
 出力： 
ブロックステートメント0を実行します 
ブロックステートメント1を実行します
 Whileループ 
whileループは、指定された条件がtrueと評価されるたびに命令を実行します。
 構文： 
while（条件式）{//実行するコードブロック}
 例： 
i：number = 1 while（i<3) { console.log( 'Block statement execution no.' + i ) i++ }
 出力： 
ブロック文実行No.1 
ブロックステートメント実行2
 Do..Whileループ 
do＆hellipwhileループは、ループの最初の実行時に条件を評価しないことを除いて、whileループに似ています。
 構文： 
do {//実行するコードブロック} while（条件式）
 例： 
  
let i：number = 1 do {console.log（ 'ブロックステートメントの実行番号' + i）i ++} while（i<3)
 出力： 
ブロック文実行No.1 
ブロックステートメント実行2
これらとは別に、ループで使用されるTypeScriptのbreakステートメントとcontinueステートメントがあります。
 ブレークステートメント 
breakステートメントは、構成から制御を取り除くために使用されます。ループでbreakステートメントを使用すると、プログラムがループを終了するのに役立ちます。
 例： 
var i：number = 1 while（i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop
 出力： 
1から10までの5の最初の倍数は：5
 ステートメントを続ける 
continueステートメントは、現在の反復の後続のステートメントをスキップし、制御をループの最初に戻します。
 例： 
var num：number = 0 var count：number = 0 for（num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)
 出力： 
0〜10の間の奇数値の数は次のとおりです。5
これらはTypeScriptの異なるループでした。それでは、TypeScriptチュートリアルを進めて、関数を理解しましょう。
 機能 
JavaScriptでは、 機能 関数型プログラミング言語であるため、最も重要な部分の1つです。関数は、プログラムが保守可能で再利用可能であり、読み取り可能なブロックに編成されていることを保証します。 TypeScriptはクラスとモジュールの概念を提供しますが、関数は依然として言語の不可欠な部分です。
 名前付き関数 
名前付き関数は、指定された名前で関数を宣言および呼び出すために使用されます。
 例： 
function display（）{console.log（ 'TypeScript Function'）} display（）
 出力： 
TypeScript関数
 匿名関数 
匿名関数は、式として定義される関数です。この式は変数に格納されます。これらの関数は、関数が格納されている変数名を使用して呼び出されます。
 例： 
let Greeting = function（）{console.log（ 'TypeScript Function'）} Greeting（）
 出力： 
TypeScript関数
 矢印機能 
太い矢印表記は、無名関数、つまり関数式に使用されます。他の言語ではラムダ関数とも呼ばれます。
 構文： 
（param1、param2、...、paramN）=>式
太い矢印（=>）を使用すると、「function」キーワードを使用する必要がなくなります。パラメータは山括弧で渡され、関数式は中括弧{}で囲まれます。
 例： 
let sum =（x：number、y：number）：number => {return x + y} sum（10、30）// 40を返します
 関数のオーバーロード 
TypeScriptは、関数のオーバーロードの概念を提供します。したがって、名前は同じで、パラメーターの型と戻り値の型が異なる複数の関数を使用できます。
 例： 
function add（a：string、b：string）：string function add（a：number、b：number）：number return a + b} add（ 'Hello'、 'Edureka'）// return'Hello Edureka 'add（ 10、10）// 20を返します
上記の例では、2つの関数宣言と1つの関数実装を持つ同じ関数add（）があります。最初のシグニチャには文字列型の2つのパラメータがあり、2番目のシグニチャには番号型の2つのパラメータがあります。
これらはさまざまなタイプの関数です。それでは、TypeScriptチュートリアルに進み、TypeScriptの文字列を理解しましょう。
 TypeScriptチュートリアル：文字列 
ザ・  テキストデータを格納するために使用される別のプリミティブデータ型です。文字列値は、一重引用符または二重引用符で囲まれています。
 構文： 
var var_name = new String（string）
Stringオブジェクトで使用できるメソッドには、次のようなさまざまなプロパティがあります。
  •  ビルダー –オブジェクトを作成したString関数への参照を返します
  •  長さ –これは文字列の長さを返します
  •  プロトタイプ –このプロパティを使用すると、オブジェクトにプロパティとメソッドを追加できます
 例： 
let name = new String（ 'Welcome to Edureka！'）console.log（ 'Message：' + name）console.log（ 'Length：' + name.length）
 出力： 
メッセージ：エドゥレカへようこそ！ 
 長さ：19
 文字列メソッド 
文字列オブジェクトのメソッドのリストは次のとおりです。
 方法  説明 
 charAt（） 
指定されたインデックスの文字を返します
 charCodeAt（） 
指定されたインデックスの文字のUnicode値を示す数値を返します
 concat（） 
2つの文字列のテキストを結合し、新しい文字列を返します
 の指標（） 
指定された値が最初に出現した呼び出し元のStringオブジェクト内のインデックスを返します
 lastIndexOf（） 
指定された値が最後に出現した呼び出し元のStringオブジェクト内のインデックスを返します
 一致（） 
正規表現を文字列と照合するために使用されます
 localeCompare（） 
参照文字列がソート順で指定された文字列の前か後か、または同じであるかを示す数値を返します
 探す（） 
これにより、正規表現と指定された文字列の間の一致の検索が実行されます
 replace（） 
正規表現と文字列の一致を検索し、一致した部分文字列を新しい部分文字列に置き換えるために使用されます
 スライス（） 
文字列のセクションを抽出し、新しい文字列を返します
 スプリット（） 
文字列を部分文字列に分割することにより、Stringオブジェクトを文字列の配列に分割します
 substr（） 
指定された場所から指定された文字数までの文字列内の文字を返します
 substring（） 
2つのインデックス間の文字列内の文字を文字列に返します
 toLocaleLowerCase（） 
文字列内の文字は、現在のロケールを尊重しながら小文字に変換されます
 toLocaleUpperCase（） 
文字列内の文字は、現在のロケールを尊重しながら大文字に変換されます
 toLowerCase（） 
小文字に変換された呼び出し文字列値を返します
 toUpperCase（） 
大文字に変換された呼び出し文字列値を返します
 toString（） 
指定されたオブジェクトを表す文字列を返します
 valueOf（） 
指定されたオブジェクトのプリミティブ値を返します
 例： 
let str：string = 'Edurekaへようこそ' str.charAt（0）// 'w'を返しますstr.charAt（2）// 'l' 'を返しますEdurekaへようこそ' .charAt（2）は 'l'を返しますletstr1 ：string = 'welcome' let str2：string = 'Edureka' str1.concat（str2）//「welcomeEdureka」を返しますstr1.concat（ ''、str2）//「welcomeEdureka」を返します'）//'ようこそ 'を返します
文字列について理解したところで、このTypeScriptチュートリアルに進み、配列について理解しましょう。
 TypeScriptの配列 
アン アレイ は、特別な構文を使用して異なるデータ型の複数の値を順番に格納する特別なタイプのデータ型です。配列要素は、要素の添え字またはインデックスと呼ばれる一意の整数によって識別されます。
 構文： 
var array_name [：datatype] //宣言array_name = [val1、val2、valn ..] //初期化
 例： 
let names：配列名= ['John'、 'Daisy'、 'Rachel'] let ids：配列ids = [101、700、321]
 配列メソッド 
さまざまな目的に使用できるさまざまな配列メソッドのリストを次に示します。
 方法  説明 
 フィルタ（） 
提供されたフィルタリング関数がtrueを返す、この配列のすべての要素を使用して新しい配列を作成します
 every（） 
この配列のすべての要素が提供されたテスト関数を満たす場合、trueを返します
 concat（） 
他の配列と結合されたこの配列で構成される新しい配列を返します
 の指標（） 
指定された値に等しい配列内の要素の最初または最小のインデックスを返します
 forEach（） 
配列内の各要素の関数を呼び出します
 join（） 
配列のすべての要素を文字列に結合します
 lastIndexOf（） 
指定された値に等しい配列内の要素の最後または最大のインデックスを返します
 地図（） 
この配列内のすべての要素で提供された関数を呼び出した結果を使用して、新しい配列を作成します
 押す（） 
配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します
 ポップ （） 
配列から最後の要素を削除し、その要素を返します
 reduce（） 
配列の2つの値に対して、左から右に関数を同時に適用して、配列を1つの値に減らします。
 reduceRight（） 
配列の2つの値に対して、右から左に関数を同時に適用して、配列を1つの値に減らします。
 逆行する（） 
配列の要素の順序を逆にします
 シフト（） 
配列から最初の要素を削除し、その要素を返します
 スライス（） 
配列のセクションを抽出し、新しい配列を返します
 いくつか（） 
この配列の少なくとも1つの要素が、提供されたテスト関数を満たしている場合、trueを返します。
 ソート（） 
配列の要素を並べ替えます
 toString（） 
配列とその要素を表す文字列を返します
 スプライス（） 
配列に要素を追加および/または削除します
 unshift（） 
配列の前に1つ以上の要素を追加し、配列の新しい長さを返します
 例： 
var name：Array = ['John'、 'Daisy'、 'Tara'] name.sort（）console.log（name）//出力：['Daisy'、 'John'、 'Tara'] console.log（ name.pop（））//出力：Tara name.push（ 'Rachel'）console.log（name）//出力：['John'、 'Daisy'、 'Rachel']
それでは、このTypeScriptチュートリアルを進めて、インターフェイスについて学びましょう。
 TypeScriptインターフェイス 
インターフェイスは、アプリケーションのコントラクトを定義する構造です。従うクラスの構文を定義します。これにはメンバーの宣言のみが含まれ、メンバーを定義するのは派生クラスの責任です。
 例： 
interface Employee {empID：number empName：string getSalary :( number）=> number //矢印関数getManagerName（number）：string}
上記の例では、 従業員 インターフェイスには2つのプロパティが含まれます empID そして empName 。メソッド宣言も含まれています getSalaray を使用して 矢印機能 これには、1つの数値パラメーターと数値戻り値の型が含まれます。ザ・ getManagerName メソッドは通常の関数を使用して宣言されます。
 TypeScript  クラス 
TypeScriptは、カプセル化や抽象化などのオブジェクト指向技術の利点を利用できるようにクラスを導入しました。 TypeScriptのクラスは、TypeScriptコンパイラによってプレーンなJavaScript関数にコンパイルされ、プラットフォームやブラウザ間で機能します。
クラスには次のものが含まれます。
  •  ビルダー 
  •  プロパティ 
  •  メソッド 
 例： 
class Employee {empID：number empName：stringコンストラクター（ID：number、name：string）{this.empName = name this.empID = ID} getSalary（）：number {return 40000}}
 継承 
TypeScriptはサポートします 継承 これは、既存のクラスから新しいクラスを作成するプログラムの機能であるためです。新しいクラスを作成するために拡張されたクラスは、親クラスまたはスーパークラスと呼ばれます。新しく作成されたクラスは、子クラスまたはサブクラスと呼ばれます。
クラスは、「extends」キーワードを使用して別のクラスから継承します。子クラスは、親クラスからプライベートメンバーとコンストラクターを除くすべてのプロパティとメソッドを継承します。ただし、TypeScriptは多重継承をサポートしていません。
 構文： 
クラスchild_class_nameはparent_class_nameを拡張します
 例： 
class Person {name：stringコンストラクター（name：string）{this.name = name}} class Employee extends Person {empID：numberコンストラクター（empID：number、name：string）{super（name）this.empID = empid} displayName （）：void {console.log（ 'Name =' + this.name + '、Employee ID =' + this.empID）}} let emp = new Employee（701、 'Jason'）emp.displayName（）//名前=ジェイソン、従業員ID = 701
クラスについて理解したところで、このTypeScriptチュートリアルに進み、オブジェクトについて学びましょう。
 TypeScriptのオブジェクト 
オブジェクトは、異なるキーと値のペアのセットを含むインスタンスです。値は、スカラー値または関数、あるいは他のオブジェクトの配列にすることができます。
 構文： 
var object_name = {key1：“ value1”、//スカラー値key2：“ value”、key3：function（）{//関数}、key4：[“ content1”、“ content2”]
オブジェクトには、スカラー値、関数、および配列やタプルなどの構造体を含めることができます。
 例： 
var person = {firstname： 'Danny'、lastname： 'Green'} //オブジェクト値にアクセスしますconsole.log（person.firstname）console.log（person.lastname）
コンパイル時に、JavaScriptで同じコードが生成されます。
 出力： 
ダニー 
 緑
これらはTypeScriptのさまざまな重要な要素でした。それでは、このTypeScriptチュートリアルに進み、ユースケースを理解するための例を見てみましょう。
 TypeScriptチュートリアル：ユースケース 
ここでは、既存のものを変換する方法を学びます  TypeScriptに。
TypeScriptファイルをコンパイルすると、同じ名前の対応するJavaScriptファイルが生成されます。ここでは、TypeScriptがそれらをオーバーライドしないように、入力として機能する元のJavaScriptファイルが同じディレクトリに存在しないようにする必要があります。
JavaScriptからTypeScriptに移行するプロセスには、次の手順が含まれます。
 1.tsconfig.jsonファイルをプロジェクトに追加します 
tsconfig.jsonファイルをプロジェクトに追加する必要があります。 TypeScriptは、tsconfig.jsonファイルを使用して、プロジェクトのコンパイルオプション（含めるファイルと除外するファイルなど）を管理します。
{'compilerOptions'：{'outDir'： './ built'、 'allowJs'：true、 'target'： 'es5'}、 'include'：['./ src / ** / *']}
 2.ビルドツールと統合する 
ほとんどのJavaScriptプロジェクトには、gulpやwebpackなどの統合ビルドツールがあります。次の方法でプロジェクトをwebpackと統合できます。
  • ターミナルで次のコマンドを実行します。
$ npm install awesome-typescript-loader source-map-loader
webpack統合では、ソースコードのデバッグを容易にするために、awesome-typescript-loaderをsource-map-loaderと組み合わせて使用​​します。
  • 次に、webpack.config.jsファイルのモジュール構成プロパティをマージしてローダーを含めます。
 3.すべての.jsファイルを.tsファイルに移動します 
このステップでは、.jsファイルの名前を.tsファイルに変更する必要があります。同様に、ファイルがJSXを使用している場合は、名前を.tsxに変更する必要があります。ここで、TypeScriptをサポートするエディターでそのファイルを開くと、一部のコードでコンパイルエラーが発生する可能性があります。したがって、ファイルを1つずつ変換すると、コンパイルエラーをより簡単に処理できます。 TypeScriptが変換中にコンパイルエラーを検出した場合でも、コードを変換できます。
 4.エラーをチェックします 
jsファイルをtsファイルに移動した後、すぐにTypeScriptはコードの型チェックを開始します。そのため、JavaScriptコードで診断エラーが発生する可能性があります。
 5.サードパーティのJavaScriptライブラリを使用する 
JavaScriptプロジェクトは、次のようなサードパーティライブラリを使用します  またはLodash。ファイルをコンパイルするために、TypeScriptはこれらのライブラリ内のすべてのオブジェクトのタイプを知る必要があります。 JavaScriptライブラリのTypeScriptType定義ファイルは、DefinitelyTypedですでに入手できます。したがって、このタイプを外部にインストールする必要はありません。私たちのプロジェクトで使用されているタイプのみをインストールする必要があります。
jQueryの場合、次の定義をインストールできます。
$ npm install @ types / jquery
この後、JavaScriptプロジェクトに変更を加え、ビルドツールを実行します。これで、TypeScriptプロジェクトがブラウザで実行できるプレーンなJavaScriptにコンパイルされているはずです。
これで、このTypeScriptチュートリアルは終了です。 TypeScriptのすべての重要な要素を理解していただければ幸いです。
 チェックしてください     Edurekaによる。  Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なウェブサイトを作成し、Amazon Simple Storage Service（S3）にデプロイする方法を学ぶのに役立ちます。 
 質問がありますか？ 「TypeScriptチュートリアル」のコメントセクションでそれについて言及してください。折り返しご連絡いたします。
プログラミングとフレームワーク

カテゴリー

Popular Articles

ビッグデータとHadoopの違いは何ですか？

Androidレイアウトデザインチュートリアル：知っておくべきことすべて

アジャイルのユーザーストーリー：ユーザーストーリーとは何ですか？

PythonでのEvalについて知っておくべきことすべて

Javaでアダプタクラスを実装する方法

C ++で参照による呼び出しを実装する方法

Informaticaチュートリアル：Informaticaの「裏返し」を理解する

MySQLとは何ですか？ –データベース管理システムの概要

PHPで正規表現を作成するにはどうすればよいですか？

Pythonでのファイル処理について知っておくべきことすべて