TypeScript を使用してスクリプトに追加する

カバー画像クレジット: Daria Kraplak

目次

はじめに
TypeScript の目的
JavaScript と TypeScript の比較
結論

導入

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

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

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

TypeScript の目的

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

JavaScript と TypeScript の比較

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

• 文字列
• 番号
• ブール値
• 未定義
• ヌル

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

推論

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

// 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 で変数のデータ型を明示的に記述する別の方法は、型アノテーションを使用することです。これは、変数に名前を付けた後にコロンと型 (: ) を追加することを意味します。

// 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 における「シェイプ」とは何ですか?たとえば、文字列の場合、そのメソッドには独自のプロパティが付属します。これらの「プロパティ」は、変数の「形状」または構造を構成します。変数のプロパティにアクセスするには、まず、使用しているメソッドが必要な情報を提供していることを確認する必要があります。 JavaScript はこれに厳密ではなく、実行時に変数の形状を変更することを許可します。ただし、TypeScript は変数の正確なプロパティを検索するため、注意が必要です。ブロックをその形状に合わせて輪郭にはめ込むようなものです。

// 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.  

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

結論

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

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

以上がTypeScript を使用してスクリプトに追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。