カバー畫(huà)像クレジット: Daria Kraplak

目次

はじめに
TypeScript の目的
JavaScript と TypeScript の比較
結(jié)論

導(dǎo)入

TypeScript とは何かを説明する前に、まず JavaScript について話(huà)しましょう。 JavaScript が 1995 年に発明されたことをご存知ですか?私もそうではありませんでした。

この間、人々のブラウザで単純な Web ページを処理するというニーズを満たしていました。 1999 年以來(lái)、JavaScript は改良され、現(xiàn)在私たちが構(gòu)築している楽しくてダイナミックな Web ページを処理できるようになりました。さらに、データ型にも柔軟に対応できるため、かなり使いやすいプログラミング言語(yǔ)です。

しかし、対処されていない問(wèn)題がありました。皮肉なことに、JavaScript が使いやすい理由は、JavaScript がコードを破壊する可能性がある理由と同じです。ここで TypeScript が役に立ちます。

TypeScript の目的

TypeScript は JavaScript のスーパーセットです。これはどういう意味ですか？ TypeScript は、既存の JavaScript コードを支援するために利用されているため、プログラミング言語(yǔ)ではないと考える人もいます。いずれにせよ、TypeScript はコードの構(gòu)造を強(qiáng)化することで、JavaScript ユーザーを助けます。これは、各変數(shù)のデータ型の一貫性を確保することによって行われます。これは、開(kāi)発中の潛在的なバグを強(qiáng)調(diào)表示し、コードが JavaScript にコンパイルされる前に警告してくれるため、テストの場(chǎng)合に役立ちます。

JavaScript と TypeScript の比較

これらのデータ型を共有する

• 文字列
• 番號(hào)
• ブール値
• 未定義
• ヌル

ただし、実裝には別のアプローチが必要です。その方法を紹介しましょう！

推論

JavaScript で変數(shù)を定義する場(chǎng)合、必要に応じて、そのデータ型を後で変更できます。変數(shù)のデータ型は TypeScript によって推論されるか、明示的に指定されるため、TypeScript の場(chǎng)合は別の話(huà)になります。変數(shù)のデータ型は、推論できない場(chǎng)合、または明示的に指定されていない場(chǎng)合、任意のデータ型になる可能性があります!

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

型の注釈

上記のサブセクションの続きとして、TypeScript で変數(shù)のデータ型を明示的に記述する別の方法は、型アノテーションを使用することです。これは、変數(shù)に名前を付けた後にコロンと型 (: ) を追加することを意味します。

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

形狀

TypeScript における「シェイプ」とは何ですか?たとえば、文字列の場(chǎng)合、そのメソッドには獨(dú)自のプロパティが付屬します。これらの「プロパテ?！工稀鋽?shù)の「形狀」または構(gòu)造を構(gòu)成します。変數(shù)のプロパティにアクセスするには、まず、使用しているメソッドが必要な情報(bào)を提供していることを確認(rèn)する必要があります。 JavaScript はこれに厳密ではなく、実行時(shí)に変數(shù)の形狀を変更することを許可します。ただし、TypeScript は変數(shù)の正確なプロパティを検索するため、注意が必要です。ブロックをその形狀に合わせて輪郭にはめ込むようなものです。

// JavaScript 
// No need to state the data type here, just assign the variable a value. 
let color = ‘purple’;
// Since JavaScript is flexible, it is fine with this reassignment. 
color = ‘blue’;
// This is also the case even if the value changes to 10. 

// TypeScript 
// 'color' is declared and expected to have a string value.  
let color: string;
// Similar to the line above, except we assign a value as well.  
let color: string = 'red';
color = ‘purple’;  // 'purple' is a string value, so this is valid.  
color = ‘blue’;  // 'blue' is a string value, so this is valid.  

これら以外にもたくさんあります!

結(jié)論

これらが、これまでの TypeScript に対する私の第一印象です。私は、JavaScript がすでに私たちのためにできることをどのように高められるかに魅了されていると言っても過(guò)言ではありません。もっと詳しく學(xué)んで、それを自分の JavaScript プロジェクトに実裝したいと思っています。

この記事を読んで、JavaScript とともに TypeScript をサンドボックス/ツールボックスに追加することに興味を持っていただければ幸いです。自分のコードがより適切に構(gòu)造化されることを望まない人はいないでしょうか?

以上がTypeScript を使用してスクリプトに追加するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。