https://hfs.connpass.com/event/112035/ で発表した内容です。TypeScriptの入門編です。

1. はじめてのTypeScript

2. 講師紹介
榮枝純一
SCE（現SIE、PlayStation）で社内SE的な仕事の後、起業。
自社サービスや受託開発をしつつ、受託の取引先だったタスカジのシステムをほぼ一人
で巻取る(現在は社員として参加)。設計から実装・運用まで行うフルスタックエンジニア
として活動中！
・使ってきた言語は
C、C++(使いこなせてない)で画像処理(顔の立体計測とか)
Java、Scala(主にPlayFramework)、PHP(!?)
Javascript(主にjQuery)、CoffeeScript(主にBackbone)、TypeScript(主にAngular)

3. 1.TypeScriptとは

4. きっちりした言語が好きな人用のJavascript

5. サーバサイドの一般的なプログラミング言語では、当たり前の用
にある「型」
型があると、
・引数の間違えによるバグの発見
・エディタによる関数サジェスト(正式名?)
などが捗ります。
型がある言語に慣れてしまうと、無い言語は苦痛。。

6. 例）TypeScriptで、成人しているユーザを取り出す
class BirthDay {
private static today(): Date {
return new Date();
}
constructor(private birthday: Date) {
}
public age(): number {
return BirthDay.today().getFullYear() - this.birthday.getFullYear()
+ (this.isOverBirthday() ? 1 : 0);
}
private isOverBirthday(): boolean {
if (BirthDay.today().getMonth() < this.birthday.getMonth()) {
return false;
}
if (BirthDay.today().getMonth() === this.birthday.getMonth()) {
return BirthDay.today().getDay() >= this.birthday.getDay();
}
return true;
}
}
class User {
constructor(private _name: string, private birthDay: BirthDay) {
}
get name(): string {
return this._name;
}
public age(): number {
return this.birthDay.age();
}
}
const users: User[] = [
new User("Taro", new BirthDay(new Date("2001-01-10"))),
new User("Jon", new BirthDay(new Date("1984-06-23"))),
new User("Hanako", new BirthDay(new Date("2005-9-19"))),
new User("Yamada", new BirthDay(new Date("1999-3-19"))),
];
users.filter((user) => {
return user.age() >= 20;
}).map(user => user.name)
.forEach(name => console.log(name));

7. 同じコードをJavascriptで書くと
https://bit.ly/2Lm17az

8. なぜTypeScriptを選ぶのか

9. TypeScriptのメリットいろいろ 1
・型があるので便利
・問題があるとコンパイル時にエラーで怒ってくれる
・(エディタによるかもしれないですが、)コード補完が充実する
・Javascriptの闇、”prototype”を触らなくていい
・classやinterfaceを扱える(※)のでオブジェクト指向が捗る
→逆にフロント開発経験がサーバ側開発スキルにも生きる!!
※当時はJavascriptに”class”はなかった。
また、今もJavascriptのclassはprivateがなかったりと不完全
そして、Javascriptにはinterfaceはない。。

10. TypeScriptのメリットいろいろ 2
・フロントエンドフレームワークのAngularではTypeScriptほぼ必須
・AngularはReactやVueに押され気味ですが、もちろんReactやVueをTypeScriptで
書くことも出来ます。
・バックエンドをnodeで書く場合にもTypeScriptで書けます
・コンパイルするとJavaScriptになる言語(AltJS)はTypeScript以外にもありますが、そ
の中でTypeScriptがデファクトスタンダード
・Githubによる分析でもプロジェクト数7位、成長率3位の言語！
https://octoverse.github.com/projects

11. TypeScriptのデメリット
・コンパイルしないといけない。
・コンパイルの設定が色々あって複雑。。tsconfig.json
(設定しなくてもある程度のことは出来ます。)
・手続き型に慣れているプログラマーには？
ぐらい。

12. なぜTypeScriptを選ぶのか
→比較的大規模な開発では
あると捗る

13. TypeScriptのはじめかた

14. ちょっと触ってみよう
http://www.typescriptlang.org/play/

15. TypeScript開発環境の作り方ダイジェスト
1.npm/nodeを用意する→インストールされていない場合は次ページ補足
2.typescriptのインストール
$npm install -g typescript
3.typescriptのコードを書く
→sample.ts
4.コンパイル
$tsc sample.ts
→sample.jsが生成されます。index.htmlなどに埋め込むなどで実行します。

16. 補足：npmのインストール
nodeをインストールするとnpmもついてきます。
https://nodejs.org/en/download/
からダウンロードしてインストール
macの場合はhomebrewを使って以下のコマンドでも可。
$brew install node

17. Javascriptの進化も見逃せない！
ES2015(ES6), ES2016, ES2017, ES2018,...
let/const, classやラムダ、アロー関数等々TypeScriptにしかなかった機能がどんどん
Javascriptにも。
(https://github.com/tc39 辺りで色々推められている感じ？)

18. Javascriptが進化していくとTypeScriptはい
らなくなる？？

19. Javascriptに対してTypeScriptの優位性がなくなる日は
来ない。(たぶん)
おそらく、
・Javascriptに「型」が導入されることはない
・classの仕様もこれ以上大きな変更があるとは考えにくい。(privateとか。)
・JavascriptにInterfaceが導入されることもなさそう。
・Javascriptの変化は、TypeScriptでも使える。
→当面TypeScriptを使えて困ることはない。

20. 更に詳しく
https://www.typescriptlang.org/docs/home.html
を読みましょう。