TypeScript Meetup #4 参加レポート

2020/06/16 19:00よりオンラインで行われた[TypeScript Meetup #4](https://typescript-jp.connpass.com/event/177175/) の参加レポートです。
動画アーカイブは[こちら](https://www.youtube.com/watch?v=b6WpRCC5GoM)で公開されています。


# TypeScriptでテストコードを徹底的に型推論する [@okunokentaro](https://twitter.com/okunokentaro)
<a href="https://speakerdeck.com/okunokentaro/typescript-meetup-4"><img width="1000" alt="スクリーンショット 2020-06-17 5.18.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/e51fba58-c756-ba30-b8d9-144ae37e14a7.png"></a>

:page_facing_up: スライド: https://speakerdeck.com/okunokentaro/typescript-meetup-4
:movie_camera: 動画開始位置： https://youtu.be/b6WpRCC5GoM?t=1066
:pencil: 内容メモ：

- テストコードでanyを使わず正しい型定義をするための方法
- Jestのtype.d.tsから型定義の読み方の解説（overload, Mapped Types, Conditional Types, infer）
- AngularのTestBedを型定義した例

最初の「テストコード、anyで諦めていませんか？」から同意しかなかったです。テストコード関係なく、型定義の読み方をとても丁寧に解説して頂けたので勉強になりました。テストコードにどこまで型を書くかは型費用対効果で考えるべきだと思うのですが、テストコードでもanyで逃げずサッと型をかけるようにはなりたいです。

# Async Function and Runtime Error Tracking [@laco2net](https://twitter.com/laco2net)

<a href="http://bit.ly/3fahTar"><img width="1000" alt="スクリーンショット 2020-06-17 5.37.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/aa63ce48-7b3c-a5d0-8b92-b2182c420234.png"></a>

:page_facing_up: スライド: http://bit.ly/3fahTar
:movie_camera: 動画開始位置： https://youtu.be/b6WpRCC5GoM?t=2092
:pencil: 内容メモ：

- TypeScriptの中でのAsync functionの解説、型定義、ES5でのトランスパイル
- tslib/importHelpersでのバンドルサイズ圧縮
- async/awaitでエラーハンドリング時の注意（catch文でのre-throw）

何気なくasync/await使いまくっていたので、tslib/importHeplersは目から鱗でした。早速プロダクションコードに`importHelpers: true`のPRを作ろうと思います。また、catch文でre-throwされた時の動作（`__awaiter`の中でPromiseのRejectに変わってしまう）というのも勉強になりました。とても実用的な発表で感謝です。


# Azure Static Web AppsとVisual Studio Codespacesで快適なTypeScript環境を構築する [@hoisjp](https://twitter.com/hoisjp)

<a href="https://www.slideshare.net/hois/20200616-tsjpazurestaticwebappsvscodespaces"><img width="1000" alt="スクリーンショット 2020-06-17 5.52.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/7e98eb72-898c-3cf6-eb90-004fd94c2c68.png"></a>

:page_facing_up: スライド: https://www.slideshare.net/hois/20200616-tsjpazurestaticwebappsvscodespaces
:movie_camera: 動画開始位置:https://youtu.be/b6WpRCC5GoM?t=3841
:pencil: 内容メモ：

- Azure Static Web Appsの紹介
- Visual Studio Codespacesの紹介
- 書籍紹介

`Azure Static Web Apps`は静的ファイルのホスティングとAPIのラムダ公開を簡単にできるもののようです。`Visual Studio Codespaces`も雰囲気が分かりました。これが進化していくと、もう手元のマシンスペックは不要になりそうですね。あと、Azureの各種機能をサンドボックスで学べる [Azure Learn](https://docs.microsoft.com/ja-jp/learn/) も良いですね。個人的に、諸所の事情で来月からAzureが広く使われている会社に所属するのでやってみようと思いました。


# フロントとサーバーを大統一してAPI疎通を静的に型検査する話 [@m_mithide](https://twitter.com/m_mitsuhide)
<img width="1000" alt="スクリーンショット 2020-06-17 6.04.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/2a90ef2d-2d8b-a5d8-5fc1-e0bb9fd78a02.png">

:page_facing_up: スライド: - （公開されてたら教えてください :pray: )
:movie_camera: 動画開始位置: https://youtu.be/b6WpRCC5GoM?t=5105
:pencil: 内容メモ：

- フロントとサーバーで型を共有する場合の課題
- [Aspida](https://github.com/aspidajs/aspida)の紹介
- [frourio](https://github.com/frouriojs/frourio)の紹介・ライブコーディング

`frourio`のライブコーディングは圧倒されました。特にModel側の型定義を変えたときに、フロント側の型定義が自動的に型エラーになるのとても良さそうですね。マイグレーションの動きなどとてもRailsライクだなーと思っていたら「TypeScirpt界のRailsにしたい」というお話があってなるほどとなりました。まだまだ絶賛開発中みたいですが、後で触ってみようと思います。`frourio`の詳細についてはこちらのQiita記事でも紹介されています。
[フロントとサーバーのAPI疎通を静的に検査できるTypeScriptフレームワークを作った - Qiita](https://qiita.com/m_mitsuhide/items/35d61f2e64cd6092e6dc)

# 運営からのお知らせ
<a href="https://www.typescriptlang.org/v2/"><img width="1000" alt="スクリーンショット 2020-06-17 6.15.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/2213e302-683b-1c29-655b-fbaf39e10de9.png"></a>

:movie_camera: 動画開始位置: https://youtu.be/b6WpRCC5GoM?t=6584
:pencil: 内容メモ：

- [TypeScript Website v2](https://www.typescriptlang.org/v2/)の日本語翻訳が進行中
- https://github.com/microsoft/TypeScript-Website/issues/220
- コントリビューション待ってます

TypeScriptのwebサイトがこんな進化しているとは知りませんでした。特に[tsconfig.jsonの書き方が詳細に説明されているページ](https://www.staging-typescript.org/tsconfig#exclude)が良かったです。サイトの日本語化もとても嬉しいですね。
動画で話されてますが、[翻訳プロジェクトのコントリビューション募集中](https://github.com/microsoft/TypeScript-Website/issues/220)で、OSS初コントリビューションの人もおすすめとのこと。自分も[こちらの記事](https://qiita.com/ryo2132/items/0ea06e93ac26f2c83736)に書いた通り、初めてのOSSコントリビューションはGatsby.jsのドキュメント翻訳でした。翻訳からOSS活動始めるのはとても良いと思います。
# 終わりに

以上「TypeScript Meetup #4 参加レポート」でした。
濃い内容の発表ばかりで、総じて勉強になりました。開催時間も丁度良く、妻子持ちの自分としても視聴しやすかったです。また、オンラインの開催は地方に住むエンジニア（自分も）も気軽に参加できるのが嬉しいですね。オンライン配信自体は、今後のリアル開催の時でもやっていただけると :pray:
最後に、運営の方々とても良い勉強会をありがとうございました。