0
0

More than 5 years have passed since last update.

TypeScript の基礎

Last updated at Posted at 2018-09-02

特徴・メリット

  • 静的型付け言語であり,あいまいさを回避しやすい(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 のソースコードを一度に表示できるサイト

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0