フリーランス チャレンジ!!

読者です 読者をやめる 読者になる 読者になる

フリーランス チャレンジ!!

週休4日制に俺はなる!

Atomで簡単TypeScript入門

f:id:ksakae1216:20160710153804j:plain

みなさん、コウタロウです!

 

ところでTypeScriptってご存じですか?

 

私も知らなかったのですが仕事で使うため調べました。

なにがいいのか?

どんなふうに試すのか?

わかりやすくまとめました!!

 

ちなみに下記サイトを参考にしました。

www.buildinsider.net

 

【目次】

 

 

TypeScriptとは

TypeScriptは以下の特徴があります!

 

①マイクロソフトが開発したスクリプト言語

②オープンソース

③TypeScriptのソースコードをJavaScriptのソースコードにコンパイルする

 

つまり、TypeScriptで書いて、JavaScriptにコンパイルするということです。

でも、なんでTypeScriptで書く必要があるの?

 

メリットは?

じゃあ、何でTypeScriptで書くの?の答えは・・・

 

静的型付けの言語だからです!!

 

JavaScriptは静的型付けではないので下記コードでも問題なく

記述することができます。

gistf65170e221944879c98563af9d4f3345

 

でも"zzz"と"5"は積算することは出来ないので実行するとエラーに

なるのですがJavaScriptは動的型付け言語のため、実行前にチェック

することができません。

 

そうすると、実際に動かしてみて、うまく動かなくてどこが悪いのか

探すのが大変です。

JavaScriptを大規模に書くプロジェクトはこのコストが非常にかかります。

 

この悩みを解決するのがTypeScriptです!!

 

試してみる

では、早速TypeScriptで書いてみます。

 

最も簡単に試すことができるのがAtomエディタで

Windows、Macどちらでもインストール可能です。

 

下記記事でも紹介しています。

www.ksakae1216.com

 

Atomをインストール

まずは下記からAtomをダウンロードしインストールして下さい。

atom.io

 

TypeScriptプラグインをインストール

Atomの「Packageメニュー」→「Settings View」→「Open」

→「Install」を選択し「Install Package」のテキストボックスに

「atom-typescript」と入力し、atom-typescriptをインストールします。

※結構時間がかかります。(私の環境で5分位)

 

インストール後、TypeScriptプラグインが有効化されているか

確認してください。

 

Macであれば「環境設定」→「Packages」で確認できます。

f:id:ksakae1216:20160710160559p:plain

 

コンパイル用のファイルを作成

これがわからなくて少しハマりました。

「tsconfig.json」ファイルをAtomエディタで作成して下さい。

gistf653f63b943790e690709c415f381a46

 

TypeScriptを書く

次にTypeScriptを書きます。(Atomエディタで書いてね)

※tsconfig.jsonと同じフォルダに作成して下さい。

gistcd7ba8e1a7c8379b314a540f399cf5eb

 

 恐らく、bmi.tsを保存するだけでコンパイルされます。

MacならF6でもコンパイルできます。

 

コンパイルが正常終了すると、bmi.jsファイルが同じフォルダに

作成されているはずです!

 

bmi.jsを組み込んでみる

同じフォルダに下記HTMLファイルをAtomエディタで作成し表示してみて下さい。

ダイアログが表示されるはずです!!

gist410c953358660670d13fe4fcd0464129

 

どうでしたか?

結構簡単でしたね!!

 

作成したものをgitにあげておきます。

github.com