エムティーアイ Advent Calendar 2016 の11日目です。
今までサーバサイドやアプリ開発でJavaやC#などの静的型付け言語をメインにやってきた人間としては
強い型付けを持つTypeScriptのおかげでフロントエンド開発が非常に楽になっています。
私のTypeScript歴を紹介しておくと、約1年前から数ヶ月ほどWebサイトをクライアントのコードをTypeScriptで書いていました。
現在serverlessというフレームワークを用いてAWS lambdaのNode.jsプログラムをTypeScriptで書いています。
TypeScriptは社内でも興味があるとかちょっと触ってみたとかいう方はいる様なのですが
結構苦戦している人が多そうなのでTypeScriptを始めるにあたって
意識しておいたほうが良いと思うことを書いていきます。
TypeScriptの進化の速さ
言語のリリースサイクルが早いため、ネットや書籍の情報がすぐ過去のものになってしまうことが多いです。
今年9月にTypeScript2.0がリリースされたと思えばつい最近TypeScript 2.1の正式版がリリースされました。
ネットの記事を参考にする場合はどのバージョンを前提にしているか確認するのがベターです（これはTypeScriptに限ったことではないですが）
特にメジャーバージョンアップとなる2.0では多数の変更点があるため、2.0以降と明示してある情報ならほぼ問題ないと思います。
http://qiita.com/vvakame/items/ae239f3d6f6f08f7c719
http://qiita.com/vvakame/items/826bf193dd301862014f
手前味噌で恐縮ですが私が以前投稿した記事も紹介しておきます。型定義ファイルのインストール方法(TypeScript 2.0版)
tsconfigの設定
tsconfig.jsonがあるディレクトリ内でtscコマンドを実行すればそこから設定が読み込まれます。
TypeScriptでは同一のソースコードでもtsconfig.jsonの設定によってエラーが出たり出なかったり重要な役目を担っています。
コンパイル時に毎回オプションを指定するより、tsconfig.jsonを作成して管理する方が良いと思います。
公式ページのドキュメントも参考にしてください。
なお、tsd hoge.tsの様にファイル名を指定した場合tsconfig.jsonの設定が使われないので注意してください。
module周り
importとかrequireとか書き方がいろいろあって混乱します。
歴史的な経緯などもあって仕方ないのですがmodule周りは初心者殺しの鬼門だと思います。
また、コンパイラオプションを見てみると、moduleのオプションに "None", "CommonJS", "AMD", "System", "UMD", "ES6", "ES2015" が指定可能となっていますが
前提知識がないと訳がわからないですね。
個人的な考えですが、最初のうちはCommonJSだけ覚えていればいいと思います。
CommonJSというのはサーバサイド(Node.js)のJavaScriptモジュール解決の仕組みなので
Node.jsで実行する場合にはCommonJSを指定しておけば特に問題無いはずです。
クライアントの場合もCommonJSを指定した上でBrowserifyやWebpack等を使うことでブラウザで動かすことができると思います。
余談
TypeScriptのデザインのゴールとしてECMAScriptのプロポーザルに沿って行くことを謳っています。
TypeScriptの紹介記事等ではクラス構文、アロー関数、letやconstの変数宣言、async/awaitなどが見かけますが
これらはTypeScriptが全く勝手気ままに文法が追加されていったというわけではありません。
これらはJavaScriptの標準であるECMAScriptの仕様に存在しています。
（実際多くの構文はすでに最新のChromeやFirefoxで動作します）
TypeScriptの文法の知識はJavaScriptのプロジェクトに行った時でも役に立つはずです。
参考までに、TypeScript 2.1で、ターゲットにES2017(最新のECMAScript)を指定してコンパイルすると
ほとんど元のTypeScriptと変わらないJavaScriptが作られます。
// クラス定義
class Hoge {
// デフォルトパラメータ
sayHello(name = 'anonymous') {
// 文字列テンプレート
console.log(`hello ${name}`);
}
}
// letによる変数宣言
let name = 'hello';
function wait(time: number) {
// アロー演算子
return new Promise(done => setTimeout(() => done(time), time));
}
/** async/await */
async function sleep() {
return await wait(10);
}
// クラス定義
class Hoge {
// デフォルトパラメータ
sayHello(name = 'anonymous') {
// 文字列テンプレート
console.log(`hello ${name}`);
}
}
// letによる変数宣言
let name = 'hello';
function wait(time) {
// アロー演算子
return new Promise(done => setTimeout(() => done(time), time));
}
/** async/await */
async function sleep() {
return await wait(10);
}
まとめ
あまりまとまりの無い内容で申し訳ないですが、
今回の内容に不明な点、間違いなどがあればご連絡ください、修正/追記していきたいと思います。
個人的な知り合いの方は何らかの手段でコンタクトもらえれば私の分かる範囲でヘルプしたいと思います。
これを読み、少しでもTypeScriptに興味を持ってもらえれば幸いです。