Typescriptを使ってみました。

投稿日: 投稿者: hanikun

こんにちは。hanikunです。

google-ng-conf 2017
この間ニュースで「Googleの内部開発コードでtypescriptが採択された」を見て
マイクロソフト社のコードをGoogleが使うのは面白かったのでTypescrpitに興味が生まれました。

まずはTypescriptっで何?

typescript
TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。 TypeScript は JavaScript に対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。
TypeScript – ウィキペディア

まずはダウンロード及び設置

ダウンロードと設置は簡単です。 npm が使えるのであれば

npm install -g typescript

これでOKです。レクチャーが要らないほど簡単です。

実際簡単なコードを作ってみました。

それで今回はTypescrpitを使って「ハローワールド」見たいな簡単なコードから使ってみました。
Typescriptサイトにあるサンプルです。 TypescriptファイルをCompileしてJSファイルを作ってくれます。

class Greeter {
    constructor(public greeting: string) { }
    greet() {
        return "<h1>" + this.greeting + "<h1>";
    }
};

var greeter = new Greeter("Hello, world!");

document.body.innerHTML = greeter.greet();

以下がそのファイルになります。

var Greeter = (function () {
    function Greeter(greeting) {
        this.greeting = greeting;
    }
    Greeter.prototype.greet = function () {
        return "<h1>" + this.greeting + "<h1>";
    };
    return Greeter;
}());
;
var greeter = new Greeter("Hello, world!");
document.body.innerHTML = greeter.greet();

Htmlファイルがあればブラウザーで確認できます。

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

コマンドプロンプトで「start xxx.html」で実行するとブラウザーで「Hello, Wolrd」が見えます。
greeter

まとめ

今回たまたまTypescrpitに興味を持って使ってみましたが、まだ慣れてないので難しいですね。
会社のシステムとはまだ違いが多いんで少しずつ勉強しようと思ってます。今度はJavasciprtでよく使うコードを持って来ます。

 

More from my site