メルペイのTypeScript活用 / TypeScript practical use in Merpay

1. メルペイのTypeScript活用 TypeScript meetup #3 2019/10/02 Daiki Sugiura
2. Daiki Sugiura @naughtLdy • Frontend Engineer • メルペイ CS Tool
4. 話すこと • メルペイについて • Nuxt.js + TypeScript • TypeScript活用 / 開発について
5. メルペイについて
6. プロダクト パートナー向け C向け •キャンペーン（LP） •クーポン •あと払い •オンライン決済 •加盟店申し込みフォーム •加盟店管理画面 •カスタマーサービス •加盟店サービス 社内向け
7. 技術スタック Application CI / CD Infra Monitoring
8. プライベートレジストリ APIClient Validation Rules tsconfig protoc-gen-jsonpb-ts lerna
9. 開発フロー GitHub flow Pull Request Lint / Unit Test Code Review Approved Build Save Container Image Deploy Container Image Create Container Image
10. Nuxt.js + TypeScript
11. Nuxt.js + TypeScript 各プロジェクト共通の機能を package として開発 lerna を使って monorepo にしている • @merpay/api-client • @merpay/protoc-gen-jsonpb-ts • @merpay/tsconfig-merpay • vuex-typescript-fsa
12. Nuxt+TypeScriptの事始め NuxtMeetup#2 https://speakerdeck.com/sue71/nuxt-and-typescript
13. TypeScript活用 / 開発について
14. TypeScriptで得られるメリット • 人間のうっかりを防いでくれる • Vuex （Store）での型安全 • Component の props での型安全 • API での型安全
15. TypeScriptで得られるメリット • 人間のうっかりを防いでくれる • Vuex （Store）での型安全 • Component の props での型安全 • API での型安全
16. 開発について • エンジニアでAPIの仕様を決める • proto ファイルのレビューを Frontend, Backend 双方からする ◦ 全サービスの proto を管理しているリポジトリがあり、プルリクベースでレビューする ◦ proto から README も自動で作成される • proto ファイルを TypeScript に変換して開発する ◦ Frontend は mock API を使用して Backend と平行して開発を進めることができる
17. protocol buffers メルペイでは API の定義に使用している • gRPC用に API仕様を定義するデータフォーマット • proto ファイルで API 仕様を定義し、各言語向けに変換して使う • TypeScript に変換することで型安全に開発することが容易になる https://developers.google.com/protocol-buffers/
18. @merpay/protoc-gen-jsonpb-ts • proto ファイルから TypeScript に変換するライブラリ • Nuxt.js (axios) を使う用に特化している
19. proto
20. proto TypeScript
21. Vuex (Store)
22. store → vue ここから先の話の補足になる Repository naughtLdy/sandbox-typescript-meetup3 https://github.com/naughtLdy/sandbox-typescript-meetup3
23. store 定義
24. store → vue
25. store → vue any型
26. store → vue string型
27. Mapper を作って型がわかるようにする https://github.com/naughtLdy/sandbox-typescript-meetup3/blob/master/src/store/helpers.ts\#L148-L163
28. store → vue any型 string型
29. 開発について TypeScript の恩恵で • 型安全に Backend とやりとりができる • proto が変更されても気づく仕組みが作れる
30. ありがとうございました