Help us understand the problem. What is going on with this article?

TypeScript の基礎

More than 1 year has passed since last update.

特徴・メリット

  • 静的型付け言語であり,あいまいさを回避しやすい(javascript は 暗黙型変換)
  • コード補完を効かせることができる
  • ECMAScriptのスーパーセットで,かつECMA Script 6の機能を先取りしている
  • 変換しても平易なECMAScriptが出力される
  • 既存ライブラリとの相互運用のために外部に型定義ファイルを持てる
  • クラスベースのオブジェクト指向プログラミング

例:クラスの定義を定義した場合の javascript と typescript の比較

// javascript
var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
// typescript
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

コンパイルエラーでビルドが通らないため、バグが生まれにくい。

var message: string; // string(文字列型)の変数を定義
message = 1;
// ↑ エラー: Cannot convert 'number' to 'string'.

導入手順

インストール

$ npm install -g typescript

コンパイル

$ tsc sample.ts

Javascriptファイルの実行

$ node sample.js

Typescript と javascript のソースコードを一度に表示できるサイト

http://www.typescriptlang.org/play/

実装する上で大変勉強になったサイト

ポリモーフィズムを活用するとなぜ if や switch が消えるのか?
https://qiita.com/Nossa/items/a93024e653ff939115c6

mokkos
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away