TypeScriptを使う理由

概要：このチュートリアルでは、動的型によって生じる問題を回避するために、JavaScriptよりもTypeScriptを使用する理由を学びます。

TypeScriptを使用する理由

TypeScriptを使用する主な理由は2つあります。

• TypeScriptは型システムを追加することで、JavaScriptの動的型に関する多くの問題を回避するのに役立ちます。
• TypeScriptはJavaScriptの将来の機能、別名ES Nextを実装しているので、今日からそれらを使用できます。

このチュートリアルは、最初の理由に焦点を当てています。

JavaScriptにおける動的型の理解

JavaScriptは動的に型付けされています。JavaやC#などの静的に型付けされた言語とは異なり、値に型があり、変数には型がありません。例えば

"Hello"Code language: TypeScript (typescript)

値から、その型がstringであることがわかります。

次の値は数値です。

2020Code language: TypeScript (typescript)

次の例を参照してください。

let box;
box = "hello";
box = 100;Code language: TypeScript (typescript)

box変数の型は、それに代入された値に基づいて変化します。

実行時にbox変数の型を見つけるには、typeof演算子を使用します。

let box;
console.log(typeof(box)); // undefined

box = "Hello";
console.log(typeof(box)); // string

box = 100;
console.log(typeof(box)); // numberCode language: TypeScript (typescript)

この例では、最初のステートメントは値を代入せずに変数boxを定義しています。その型はundefinedです。

次に、リテラル文字列"Hello"をbox変数に代入し、その型を表示します。box変数の型はstringに変更されます。

最後に、100をbox変数に代入します。今回は、box変数の型はnumberに変更されます。

ご覧のとおり、値が代入されるとすぐに、変数の型が変わります。

そして、JavaScriptに型を明示的に伝える必要はありません。JavaScriptは値から型を自動的に推論します。

動的型は柔軟性を提供します。しかし、それらは問題も引き起こします。

動的型の問題

idに基づいてproductオブジェクトを返す関数があるとします。

function getProduct(id){
  return {
    id: id,
    name: `Awesome Gadget ${id}`,
    price: 99.5
  }
}Code language: TypeScript (typescript)

次は、getProduct()関数を使用してid 1の製品を取得し、そのデータを表示します。

const product = getProduct(1);
console.log(`The product ${product.Name} costs $${product.price}`);Code language: TypeScript (typescript)

出力

The product undefined costs $99.5 Code language: Shell Session (shell)

予想とは異なります。

このコードの問題は、productオブジェクトにNameプロパティがないことです。最初の文字が小文字のnであるnameプロパティがあります。

しかし、スクリプトを実行するまでそれを知ることはできません。

オブジェクトに存在しないプロパティを参照することは、JavaScriptで作業する場合の一般的な問題です。

次の例では、製品情報をコンソールに出力する新しい関数を定義します。

const showProduct = (name, price)  => {
  console.log(`The product ${name} costs $${price}.`);
};Code language: JavaScript (javascript)

次は、getProduct()関数とshowProduct()関数を使用します。

const product = getProduct(1);
showProduct(product.price, product.name);Code language: JavaScript (javascript)

出力

The product 99.5 costs $Awesome Gadget 1 Code language: PHP (php)

今回は、showProduct()関数に引数を間違った順序で渡します。これは、JavaScriptで作業する際に頻繁に発生するもう1つの一般的な問題です。

これが、TypeScriptが登場する理由です。

TypeScriptが動的型の問題を解決する方法

オブジェクトに存在しないプロパティを参照するという問題を解決するには、次の手順を実行します。

まず、インターフェースを使用してproductオブジェクトの「形状」を定義します。後でインターフェースについて学習します。

interface Product{
    id: number,
    name: string,
    price: number
};Code language: CSS (css)

次に、getProduct()関数の戻り値の型としてProduct型を明示的に使用します。

function getProduct(id) : Product{
  return {
    id: id,
    name: `Awesome Gadget ${id}`,
    price: 99.5
  }
}Code language: JavaScript (javascript)

存在しないプロパティを参照すると、コードエディターがすぐに通知します。

const product = getProduct(1);
console.log(`The product ${product.Name} costs $${product.price}`);
Code language: JavaScript (javascript)

コードエディターは、Nameプロパティで次のエラーを強調表示しました。

そして、マウスカーソルをエラーの上に置くと、問題解決に役立つヒントが表示されます。

引数を間違った順序で渡すという問題を解決するには、関数パラメーターに型を明示的に割り当てます。

const showProduct = (name: string, price:number)  => {
  console.log(`The product ${name} costs $${price}.`);
};Code language: JavaScript (javascript)

そして、間違った型の引数をshowProduct()関数に渡すと、エラーが発生します。

const product = getProduct(1);
showProduct(product.price, product.name);Code language: JavaScript (javascript)

まとめ

• JavaScriptは動的に型付けされており、柔軟性を提供しますが、多くの問題も引き起こします。
• TypeScriptは、これらの問題を解決するためにJavaScriptにオプションの型システムを追加します。