TypeScriptを5分で学ぶ-初心者向けのチュートリアル

TypeScriptはJavaScriptの型付きスーパーセットであり、言語をよりスケーラブルで信頼性の高いものにすることを目的としています。

これはオープンソースであり、2012年にMicrosoftが作成して以来、Microsoftによって維持されています。ただし、TypeScriptは、Angular 2のコアプログラミング言語として最初のブレークスルーを達成しました。それ以来、ReactおよびVueコミュニティでも成長を続けています。

このチュートリアルでは、実用的な例を使用してTypeScriptの基本を学習します。

また、Scrimbaで無料の22部構成のTypeScriptコースを開始しようとしています。早期アクセスが必要な場合は、ここにメールを残してください。

始めましょう。

TypeScriptのインストール

コーディングを開始する前に、コンピューターにTypeScriptをインストールする必要があります。npmこれに使用するので、ターミナルを開いて次のコマンドを入力するだけです。

npm install -g typescript 

インストールしたら、インストールされてtsc -vいるTypeScriptのバージョンを表示するコマンドを実行して確認できます。

いくつかのコードを書く

最初のTypeScriptファイルを作成し、その中にコードを記述しましょう。お気に入りのIDEまたはテキストエディタを開いて、次の名前のファイルを作成しますfirst.ts — TypeScriptファイルの場合、拡張子を使用します.ts

今のところ、すべてのJavaScriptコードも有効なTypeScriptコードであるため、数行の単純な古いJavaScriptを記述します。

let a = 5; let b = 5; let c = a + b; console.log(c); 

次のステップは、ブラウザーが.jsファイルの読み取りを要求するため、TypeScriptをプレーンJavaScriptにコンパイルすることです。

TypeScriptのコンパイル

コンパイルするには、のコマンドを実行します。このコマンドはtsc filename.ts、ファイル名は同じで拡張子が異なるJavaScriptファイルを作成し、最終的にブラウザーに渡すことができます。

したがって、ファイルの場所でターミナルを開き、次のコマンドを実行します。

tsc first.ts 

ヒント:任意のフォルダー内のすべてのTypeScriptファイルをコンパイルする場合は、次のコマンドを使用します。tsc *.ts

データ型

TypeScriptは、その名前が示すように、JavaScriptの型付きバージョンです。これは、宣言時にさまざまな変数に型を指定できることを意味します。それらは常にそのスコープ内で同じタイプのデータを保持します。

入力は、信頼性とスケーラビリティを確保するための非常に便利な機能です。型チェックは、コードが期待どおりに機能することを確認するのに役立ちます。また、バグやエラーを探し出し、コードを適切に文書化するのにも役立ちます。

任意の変数に型を割り当てるための構文は、変数の名前の後に:記号を書き込み、次に型の名前の後に=記号と変数の値を書き込むことです。

TypeScriptanyには、Built-inタイプ、タイプ、タイプの3つの異なるタイプがありUser-definedます。それぞれを見てみましょう。

いかなるタイプ

anyデータ型は、活字体中のすべてのデータ型のスーパーセットです。変数に型を指定anyすることは、変数の型チェックをオプトアウトすることと同じです。

let myVariable: any = 'This is a string' 

ビルトインタイプ

これらはTypeScriptに組み込まれているタイプです。彼らにはnumberstringbooleanvoidnullundefined

let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; 

ユーザー定義タイプ

User-defined種類はenumclassinterfacearray、とtuple。これらのいくつかについては、この記事の後半で説明します。

オブジェクト指向プログラミング

TypeScriptは、クラスやインターフェイスなど、オブジェクト指向プログラミングのすべての機能をサポートしています。この機能はJavaScriptを大幅に強化します。特に開発者が大規模なアプリケーションで使用し始めて以来、JavaScriptは常にOOP機能に苦労しています。

クラス

オブジェクト指向プログラミングでは、クラスはオブジェクトのテンプレートです。クラスは、オブジェクトの特徴と機能の観点から、オブジェクトがどのように見えるかを定義します。クラスは、オブジェクトのデータもカプセル化します。

TypeScript has built-in support for classes, which were unsupported by ES5 and earlier versions. This means we can use the class keyword to easily declare one.

class Car { // fields model: String; doors: Number; isElectric: Boolean; constructor(model: String, doors: Number, isElectric: Boolean) { this.model = model; this.doors = doors; this.isElectric = isElectric; } displayMake(): void { console.log(`This car is ${this.model}`); } } 

In the above example, we have declared a Car class, along with some of its properties, which we’re initializing in the constructor. We also have a method which would display some message using its property.

Let’s see how we can create a new instance of this class:

const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius 

To create an object of a class, we use the keyword of new and call the constructor of the class and pass it the properties. Now this object Prius has its own properties of model, doors, and isElectric. The object also can call the method of displayMake, which would have access to the properties of Prius.

Interface

The concept of interfaces is another powerful feature of TypeScript, which allows you to define the structure of variables. An interface is like a syntactical contract to which an object should conform.

Interfaces are best described through an actual example. So, suppose we have an object of Car:

const Car = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

If we look at the object above and try to extract its signature, it would be:

{ model: String, make: String, display(): void } 

If we want to reuse this signature, we can declare it in the form of an interface. To create an interface, we use the keyword interface.

interface ICar { model: String, make: String, display(): void } const Car: ICar = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

Here, we’ve declared an interface called ICar , and created an object Car. Car is now binding to the ICar interface, ensuring that the Car object defines all the properties which are in the interface.

Conclusion

So I hope this gave you a quick glimpse into how TypeScript can make your JavaScript more stable and less prone to bugs.

TypeScript is gaining a lot of momentum in the world of web development. There’s also an increasing amount of React developers who are adopting it. TypeScript is definitely something any front-end developer in 2018 should be aware of.

Happy coding :)

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.