TypeScript を学習してみた

2019/04/14,

JavaScript の上位互換といわれる TypeScript 。TypeScript - JavaScript that scales を見て勉強しました。学んだ内容を解説しようと思います。

TypeScript とは

Typescript とは JavaScript を拡張した言語です。コンパイルすることで生の JavaScript を生成することができます。マイクロソフトが主導で開発しています。

Typescript では 変数にデータ型をつけることができ、静的チェックやコードリファクタリングなどを行うことができ、生産性が高いです。

TypeScript のデモ

TypeScript のデモの実行環境を公式が用意してくれています。画面左側が TypeScript 、 右側がコンパイルした結果生成される JavaScript になっています。

TypeScript のコード学習にとても有用です。

ts playground

Typescript をインストール、コンパイル

Typescript のコンパイラは Node.js パッケージとして配布されています。

インストール

npm install -g typescript

コンパイル

tsc helloworld.ts

TypeScript のサンプルコードを書いてみる。

TypeScript in 5 minites のドキュメントを参考にサンプルコードを書きます。

greeter.ts という名前で保存しました。

function greeter(person) {
  return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

TypeScript を書いたつもりですが、書いている内容は、JavaScript です。TypeScript 特有の書き方はありません。とりあえずコンパイルしてみます。

tsc greeter.ts

greeter.js が生成されました。生成されたソースを確認すると、TypeScript と JavaScript の内容は全く一緒。TypeScript 特有の書き方をしてないので当たり前ですね

TypeScript の型

では TypeScript 特有の型を利用してみます。関数の引数を型つきで宣言してみます。person 引数に string 型を与えます。

function greeter(person: string) {
  return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

こちらはコンパイルしてみると、正常にコンパイルできます。

次に、関数宣言時にstring型の引数を指定しておきながら、別の型の引数を与えてみます。

function greeter(person: string) {
  return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

コンパイルしてみると、以下のようなエラーが発生します。

Argument of type 'number[]' is not assignable to parameter of type 'string'.

number[]型の引数はstring型に割り当てられないと怒られてしまいます。

このように TypeScript では型があっていなければ、警告を発します。このためプログラムのバグに気づきやすくなります。

::: warning

ただし、TypeScript はエラーを発生していたとしても、js ファイルを生成します。この場合、TypeScript は、そのコードは予期したとおりには動作しないだろうと警告を発します。

:::

TypeScript の Interface(インターフェース)

TypeScirpt では Interface を利用できます。サンプルコードでは、firstName と lastName のフィールドがあるとしています。

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

TypeScript Classes ( クラス )

TypeScript ではクラスがあります。TypeScript はクラスベースのオブジェクト指向プログラムなど JavaScript の新機能をサポートしています。

コンストラクタといくつかのパブリックフィールドをもったStudent クラスを作成してみます。

::: tip

コンストラクタの引数に public をつけることで、自動的にクラスフィールドを作成されます。

:::

class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

TypeScript を Web 上で動かす。

TypeScript を利用して Web アプリを作成してみます。

greeter.html 作成します。

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Greeter</title>
  </head>
  <body>
    <script src="greeter.js"></script>
  </body>
</html>

greeter.html を開いてみて、TypeScript Web アプリケーションの動作を確認してみましょう。

まとめ

TypeScript についてざっくりとしたまとめでした。型宣言や Class 宣言などが簡単に行えるため JavaScript よりも安全なプログラムが作成可能となります。

参考

TypeScript - JavaScript that scales


Ouvill(おーびる)

この記事は Ouvill(おーびる) が書きました。サイト作成や、ウェブアプリケーション開発、IT 関連の記事執筆のご依頼を賜っております。

ご要件がある方はコンタクトフォームからご連絡ください。

@Ouvill

最新記事