関西Node学園 梅田キャンパス 1時限目

1. TypeScript + Express
関西Node学園 梅田キャンパス 1時限目
2018.4.20

2. 自己紹介
• かみやん (Twitter@kamiyam)
• 元自動車整備士
• Engineer
• JavaScript フロント〜バックエンド全般

3. https://www.typescriptlang.org/

4. TypeScriptとは
• マイクロソフトによって開発されているオー
プンソースのプログラミング言語
• JavaScriptに対して、省略も可能な静的型付け
とクラスベースオブジェクト指向を加えた厳
密なスーパーセットとなっている
Wikipedia:https://ja.wikipedia.org/wiki/TypeScript

5. TypeScript 導入
(not Express)

6. // 準備
npm init -y
npm i -D typescript ts-node
touch index.ts
// tsファイル実行
npx ts-node index.ts
// ビルド
npx tsc // -> index.js が生成される
// jsファイル実行
node index.js

7. これだとメリットわからん…
(JSスーパーセットなのでそのまま利用できる)

8. 型定義を準備する
• 文字通り型のないJavaScriptに型を定義する
• 型定義(d.ts) ファイルを作成（参照）する
• 多くは@types/xxx から探すことができる
• 自分で定義することもできる
• 逆に無いものは自分で定義するしかない

9. 型定義を準備する
• ts ファイル内
• types/***

10. サンプル

11. enum RequestType {
get,
post
}
interface Post {
userId: number;
id: number;
title: string;
body: string;
}
interface Result {
count: number;
response: Post[];
}

12. import axios from “axios"
async function fetchUrl(): Promise<Result> {
const res = await
axios("https://jsonplaceholder.typicode.com/posts");
const posts: Post[] = res.data;
return {
count: res.data.length,
response: posts
};
}
fetchUrl().then((result) => {
console.log(result);
});

13. ES2017使いたい..
(コンパイルオプションあるので試して)

14. // tsconfig.json 準備
npx tsc —init
// 色々あるが
{
"compilerOptions":
"target": “ES2017"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

15. tslintを入れたほうが幸せ
(多くのIDEで補助が効くので)

16. // 準備
npm i -D tslint
npx tslint —init
// tsファイル実行
tslint index.ts

17. TypeScript + Express

18. https://www.typescriptlang.org/samples/

19. https://github.com/Microsoft/vscode-samples/tree/master/node-express-typescript

20. 時間があったらデモ
express-generator からのts置き換え
https://gist.github.com/kamiyam/996023564d4d2cc04334b1197c693c36

21. https://github.com/Microsoft/vscode-samples/blob/master/node-express-
typescript/src/app.ts#L39

22. TypeScript出始めは定義ファイルが無い
=> 自分で定義しないといけない
=> めんどくさい
今は型定義ファイルが設定されることが多く
そのあたりは気にしなくても良くなってきている

23. まとめ
• 導入はむずかしくない
• JavaScriptスーパーセットなのでひとまず移行で
きる
(VSCode のTypeScript-Expressも結構ゆるい)
• 大規模/多人数開発で大きな助けとなる

24. TypeScript やっていきましょう！

25. ご清聴ありがとうございました