へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)!

TypeScriptをつかってみた。(Vim)

会社でTypeScriptって使えるんじゃねみたいな話になったので、導入のためにちょろっと備忘録

Ecmascript(TypeScriptってなんぞやのまえに)

Ecmascriptっていう、各ブラウザなどで実装されているJavaScriptの標準規格としての仕様がある。
Ecmascriptそのものはプログラミング言語ではない。

ここの記事よかったwww.xenophy.com


歴史的には

ネットスケープ(´・ω・`) < JavaScriptつくったよ!
 ↓
お、これいいやん。真似しよ
 ↓
いろんなブラウザがJavaScriptを実装しはじめるが、実装のしかたが各ブラウザでバラバラ
 ↓
ブラウザによってJS違うとか、なんとかしろ!!
 ↓
Ecmascriptという言語仕様を決めるやつ誕生「みんなぼくの言うとおり実装してね!」
 ↓
そういうふうに実装してきた

現状(2015/11/)

Ecmascript 5については、どのブラウザでもだいたい完全に実装されている。
ECMAScript 5 compatibility table

f:id:haruharu1:20151127104330p:plain

クライアント側の言語がJavaScriptから他の言語になるとは、デファクトスタンダードになったJSを他の言語が引き摺り下ろすということなので、
よほどのことが無い限り、今後もこのままEcmascriptがクライアントの標準を握っていくような感じがする

Ecmascript 6

現行のブラウザでは中途半端に実装されている
ECMAScript 6 compatibility table

Typescriptっていうのは、この「将来デファクトスタンダードになるであろうEcmascript 6の仕様」を満たしている言語だといえる

でもくわしいことはよくわからないぞ!

げんじょうのTypescript

拡張子は*.ts
$ tsc hoge.tsとやる(いわゆるコンパイルする)と、hoge.jsが生成される。

基本的にはこのjsファイルを、そのままブラウザで使うことになる。

ためしにやってみる

$ npm install -g typescriptのようにしてインストール
npmってなんぞって人はnodeでググると幸せになれる

あとはtypescriptの書き方で書いて
コンパイルして
実行する

hello.ts

class Student {
    fullname: string;
    constructor(public firstname, public lastname) {
        this.fullname = firstname + " " + lastname;
    }
}
function greeter(person: Student) {
    return "Hello, " + person.fullname;
}

var user = new Student("taro", "tanaka");

console.log(greeter(user));
$ tsc hello.ts
$ node hello.js
Hello, taro tanaka

hello.jsが生成されている

var Student = (function () {
    function Student(firstname, lastname) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.fullname = firstname + " " + lastname;
    }
    return Student;
})();
function greeter(person) {
    return "Hello, " + person.fullname;
}
var user = new Student("taro", "tanaka");
console.log(greeter(user));

vimプラグインいれる

こんだけ
$ git clone https://github.com/leafgarland/typescript-vim.git ~/.vim/bundle/typescript-vim

REPL

github.com
$ npm install -g tsun

こんな感じ

$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl

> enum Color{Red}
undefined
> Color.Red
0

そのた

別にTypeScript以外にもいろいろあるので、これじゃないとダメとかではない。