TypeScript -すべてについて、なぜあなたはそれを使用する必要がありますか?

このポストは、シリーズと4の一部ですbook about TypeScript . これは、ゼロからバックエンドとフロントエンド上の完全なタイプスクリプトのアプリケーションを書くことをご案内します.シリーズは、誰にでも無料でPDF電子ブックとして利用可能です.

どのようなスクリプトですか？

タイプスクリプトはJavaScript スーパーセットそれはTypeScript はJavaScriptに組み込まれている言語です.これはJavaScriptの構文、構造、利点(および欠点)に基づいていますが、また、新しい機能、構文、および機能をもたらします.
この言語の目的は何ですか.typescript開発者にコードを書くのに役立ついくつかの機能をもたらしますJavaScript 簡単かつ安全.TypesScriptが提供する最も重要な特徴の1つはStatic typing . 基本的に、静的タイピングによってデータ型に誤りが少なくなります.たとえば、この値がパラメーターと同じ型を持っていない場合は、関数の引数として値を置くことはできません.これは非常に基本的なものですがTypeScript また、このシリーズの次の記事で見つけることがより強力な機能があります.
TypeScriptはJavaScriptと同じAPIと環境で動作する機能を持っていますNode . しかしWeb browser そして、それらがJavaScriptだけで働くので、ノードはtypescriptを実行することができません.では、どうやって使うのTypeScript コードを実行できない場合JavaScript Webブラウザやノードのような環境?
事はTypeScript は、単なるスクリプトではなく、強力なツールであるコンパイラではありませんJavaScript コード.そして、ブラウザで実行できるJavaScriptコードをコンパイルしたりNode . TypeScriptコンパイラは、TypesScriptからJavaScriptの一般的なコードでのみ使用できる機能を持つコードを変換します.そして、あることがあります.すべての型と他のtypescript建設は、彼らが存在しないので、あなたが環境で実行するコードにありませんJavaScript .

なぜタイプスクリプト？

この質問に答える前に、この簡単なコード例を見てみましょう.

const countries = [
  {
    name: "The Netherlands",
    flag: "🇳🇱",
    currency: "EUR",
    capital: "Amsterdam",
  },
  {
    name: "Germany",
    flag: "üá©üá™",
    currency: "EUR",
    capital: "Berlin",
  },
  {
    name: "The Czech Republic",
    flag: "🇨🇿",
    currency: "CZK",
    capital: "Prague",
  },
];

function getLabel(country) {
  return `${country.flag} ${country.name}, ${country.captal}, ${country.currency}`;
}

function print(str) {
  console.log(str + "\n");
}

function printCountries(countries) {
  countries.forEach((country) => {
    print(getLabel(country));
  });
}

printCountries(countries);

非常に簡単なコード、右?何か間違いがありましたか.我々は、ちょうどいくつかの国についての情報を含むオブジェクトのリストがあります.コード実行の結果は、すべての国に関する情報が端末に印刷されることです.これを実行しましょうNode .
これが端末で見られることです.

🇳🇱 The Netherlands, undefined, EUR

üá©üá™ Germany, undefined, EUR

🇨🇿 The Czech Republic, undefined, 

…を待つ何?確かに、あなたは驚異的な注意スパンを持っている場合、結果はあなたを驚かないでしょう.しかし、我々はすべての人間であり、我々は時々ミスをすることができます.
ここでのエラーは、存在しないフィールドの名前を書いたことです.

function getLabel(country) {
  - return `${country.flag} ${country.name}, ${country.captal}, ${country.currency}`;
  + return `${country.flag} ${country.name}, ${country.capital}, ${country.currency}`;
}

そして、これは非常に単純な合成例です.何百行のコードを持っているプロジェクトで間違いを犯したらどうですか?千人
「しかし、我々が我々のコードを実行したとき、結局、我々はエラーを見つけました」.はい.しかし、これは1つのファイルです.あなたが大きなプロジェクトを持っている場合は、エラーを見つけるために多くの時間を無駄にします.TypeScript コードを実行する前に、この種のエラーを見つける能力を提供します.
いくつかの行のコードを国と一緒に書き、コードを実行する前にエラーを防ぎましょう.

type Currency = "EUR" | "CZK";

interface Country {
  name: string;
  flag: string;
  currency: Currency;
  capital: string;
}

const countries: Country[] = [
  {
    name: "The Netherlands",
    flag: "🇳🇱",
    currency: "EUR",
    capital: "Amsterdam",
  },
  {
    name: "Germany",
    flag: "üá©üá™",
    currency: "EUR",
    capital: "Berlin",
  },
  {
    name: "The Czech Republic",
    flag: "🇨🇿",
    currency: "CZK",
    capital: "Prague",
  },
];

function getLabel(country: Country) {
  return `${country.flag} ${country.name}, ${country.captal}, ${country.currency}`;
}

function print(str: string) {
  console.log(str + "\n");
}

function printCountries(countries: Country[]) {
  countries.forEach((country) => {
    print(getLabel(country));
  });
}

printCountries(countries);

エラーはまだコード中ですが、エディタ( vscode ):

我々は、コードを実行する前にミスを見つけるのに役立ついくつかの新しい構文を追加しました.ここで最も重要なことは3行目-インターフェイスです.のは、それは、それぞれの国のオブジェクトの種類に関する情報を含むオブジェクトのようなものであると言いましょう.我々は、このシリーズの次のポストで後でそれに着きます.

タイプスクリプトはすでにここにあります

タイプスクリプトは、2009年に人気になりませんJavaScript 開発生態系それは既に人気です.つのプログラミング言語でコードを書く能力を提供し、このコードをJavaScriptにコンパイルしてブラウザで実行する多くの技術があります.しかし、彼らはあまり人気がないか、一般的な目的がありませんTypeScript .
に書かれている多くのプロジェクトやライブラリがありますTypeScript . 実際には、おそらく1つのツールを使ってコードを書くことができます.Visual Studio Code . JavaScriptコードを書いたとしても、TypeScriptは既にVisual Studioコードでこのコードを検査および分析するために使用しています.
国とのコード例を覚えていますか?それに戻りましょう.このコードを変更しましたJavaScript . どうにか、私たちはミスをしました、コードの若干の小さいtypo

const countries = [
    // the same countries as before
];

function getLabel(country) {
  return `${country.flag} ${country.name}, ${country.capital}, ${country.currency}`;
}

function print(str) {
  console.log(str + "\n");
}

function printCountries(countries) {
  countries.forEach((country) => {
    print(getLabel(country));
  });
}

printCountries(contries);

開くならJavaScript コードインVisual Studio Code どんなエラーも見当たらない.では、ファイルの上に特別なコメント行を加えましょう.

+ // @ts-check

const countries = [
    // the same countries as before
];

// .. the same code as before

printCountries(contries);

そして今、私たちはJavaScriptファイルのエラーを参照してくださいTypeScript :

利点

私たちには、一般的にタイプスクリプトが何であるかという理由があります、そして、なぜ我々はそれを使用しなければなりませんか.さて、どのような機能と利点を見てみましょうTypeScript 開発者に提供することができます.

種類

前に述べたように.TypeScript 追加Static typing JavaScriptコードへ.これは、コード内のいくつかのエラーや誤植を回避するのに役立ちます.また、自動補完、リファクタリングのような機能を持って現代的なIDEやエディタを使用することができます定義に移動します.型と型の定義によって、IDE内のコードを分析するサポートが追加されます.

サポートのJavaScript機能

TypeScript サポートES 6 +の機能JavaScript . これは、スクリプトのコードで現代的なJavaScriptの機能を書くことができることを意味します.このコードをJavaScriptコードにコンパイルすることもできますWeb browser それは現代のJavaScript機能をサポートしません.

典型的な特徴

TypeScriptもそれに固有の機能を追加します.これは、インターフェイス、ジェネリック、デコレータなどについてです.その新しい構造はJavaScriptには存在しません.このシリーズの次のポストでもっと書きます.

続く

このポストでは、私たちは、タイプスクリプトがJavaScriptのsupersetであることを学びました、そして、どのようにTypeScriptは我々がより安定して安全コードを書くのを手伝うことができますか.これは私のブログのタイプスクリプトについての紹介記事です.次のポストでは、私たちはどのようにプロジェクトのために私たちのTypeScriptコンパイラを設定し、TypeScriptが開発者にもたらす機能に深いダイビングを発見するでしょう.
この動画はお気に入りから削除されています.お願いします.subscribe to my email newsletter 今日まで滞在する.