Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TypeScript + Express

1,894 views

Published on

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

Published in: Engineering
  • Hello! High Quality And Affordable Essays For You. Starting at $4.99 per page - Check our website! https://vk.cc/82gJD2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

TypeScript + Express

  1. 1. TypeScript + Express 関西Node学園 梅田キャンパス 1時限目 2018.4.20
  2. 2. 自己紹介 • かみやん (Twitter@kamiyam) • 元自動車整備士 • Engineer • JavaScript フロント〜バックエンド全般
  3. 3. https://www.typescriptlang.org/
  4. 4. TypeScriptとは • マイクロソフトによって開発されているオー プンソースのプログラミング言語 • JavaScriptに対して、省略も可能な静的型付け とクラスベースオブジェクト指向を加えた厳 密なスーパーセットとなっている Wikipedia:https://ja.wikipedia.org/wiki/TypeScript
  5. 5. TypeScript 導入 (not Express)
  6. 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. 7. これだとメリットわからん… (JSスーパーセットなのでそのまま利用できる)
  8. 8. 型定義を準備する • 文字通り型のないJavaScriptに型を定義する • 型定義(d.ts) ファイルを作成(参照)する • 多くは@types/xxx から探すことができる • 自分で定義することもできる • 逆に無いものは自分で定義するしかない
  9. 9. 型定義を準備する • ts ファイル内 • types/***
  10. 10. サンプル
  11. 11. enum RequestType { get, post } interface Post { userId: number; id: number; title: string; body: string; } interface Result { count: number; response: Post[]; }
  12. 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. 13. ES2017使いたい.. (コンパイルオプションあるので試して)
  14. 14. // tsconfig.json 準備 npx tsc —init // 色々あるが { "compilerOptions": "target": “ES2017" }, "include": [ "src/**/*" ], "exclude": [ "node_modules" ] }
  15. 15. tslintを入れたほうが幸せ (多くのIDEで補助が効くので)
  16. 16. // 準備 npm i -D tslint npx tslint —init // tsファイル実行 tslint index.ts
  17. 17. TypeScript + Express
  18. 18. https://www.typescriptlang.org/samples/
  19. 19. https://github.com/Microsoft/vscode-samples/tree/master/node-express-typescript
  20. 20. 時間があったらデモ express-generator からのts置き換え https://gist.github.com/kamiyam/996023564d4d2cc04334b1197c693c36
  21. 21. https://github.com/Microsoft/vscode-samples/blob/master/node-express- typescript/src/app.ts#L39
  22. 22. TypeScript出始めは定義ファイルが無い => 自分で定義しないといけない => めんどくさい 今は型定義ファイルが設定されることが多く そのあたりは気にしなくても良くなってきている
  23. 23. まとめ • 導入はむずかしくない • JavaScriptスーパーセットなのでひとまず移行で きる (VSCode のTypeScript-Expressも結構ゆるい) • 大規模/多人数開発で大きな助けとなる
  24. 24. TypeScript やっていきましょう!
  25. 25. ご清聴ありがとうございました

×