【Sublime Text3】TypeScirpt を導入する(T3Sが動作しない場合)

情報が古いのか環境が悪いのか分かりませんがちょっと苦労したので、失敗したケースも含めて情報を残しておきます。

◆【失敗】編
TypeScriptを使うために検索すると『Sublime Text 3 + TypeScriptで自動補完(候補検索)やSyntax Highlightを実現する』という記事を見つけてやってみたが、結果から言えばこれは失敗だった。
typescriptのコード補完などを行える『T3S』というプラグインが正常に動作しない(Windows7 64-bit)。
SublimeText3でTypeScriptのAutoComplete』ちょうどこの記事にあるような環境で同じ症状なので、そういう仕様なのだろうと思います。
代替案として示されている『ArcticTypescript』の方も残念ながら上手くいきませんでした。

◆上手くいった手順

◆必要なもの
  • node.js
  • TypeScript
  • TypeScript-Sublime-Plugin
◆TypeScriptのインストール
npm install --g typescript
◆TypeScript-Sublime-Pluginのインストール
TypeScript-Sublime-Pluginとは何か?
Microsoft謹製のSublimeText3でTypeScriptを(コンパイルや自動補完などを含め)使えるようにするプラグインです。
(なぜこれが検索の最初に出てこなかったのか分からない…)
インストール方法
  • ココから入手してパッケージをインストール。またはgitがあれば以下のコマンドでコピーしてくる。
  • git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript
    
◆使ってみる
元のTypeScript
class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
    public call(){
        console.log("call => " + name);
    }
}
class Rhino extends Animal {
    constructor() { super("Rhino"); }//親クラスのコンストラクタを呼ぶ
}
class Employee {
    private name: string;
    constructor(theName: string) { this.name = theName; }
    greeting(){
        return "nice to meet you!"
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
var animal = new Animal("Goat");
var rhino = new Rhino();
var employee = new Employee("Bob");

console.log(animal.call);
変換後のjavascript
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Animal = (function () {
    function Animal(theName) {
        this.name = theName;
    }
    Animal.prototype.call = function () {
        console.log("call => " + name);
    };
    return Animal;
})();
var Rhino = (function (_super) {
    __extends(Rhino, _super);
    function Rhino() {
        _super.call(this, "Rhino");
    } //親クラスのコンストラクタを呼ぶ
    return Rhino;
})(Animal);
var Employee = (function () {
    function Employee(theName) {
        this.name = theName;
    }
    Employee.prototype.greeting = function () {
        return "nice to meet you!";
    };
    Employee.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Employee;
})();
var animal = new Animal("Goat");
var rhino = new Rhino();
var employee = new Employee("Bob");
console.log(animal.call);

[Ctrl+B]でビルド出来ます。コンパイル時間は1.6sでした。

javascriptで書かれた大規模なプロジェクトを管理するのはうんざりしそうですが、
TypeScriptならクラスベースで言語構造を論理的で把握しやすい形で記述できるので非常に見通しがいいコードが書けます。
とはいえjavascriptの曖昧な手軽さも捨てたものではないので、場合によって使い分けるのがいいかなと思います。

なお、TypeScriptをちょっと試したい方はPlayGroundで即試せます。私見ですが、特にC系言語出身の人は他のAltJSよりは気にいるはずです(…たぶん)。

カテゴリー: Web パーマリンク

【Sublime Text3】TypeScirpt を導入する(T3Sが動作しない場合) への1件のフィードバック

  1. ピンバック: 【Sublime Text3】TypeScirpt でJQueryを使う | とど。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です