Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
TypeScript開発を効率化させるための おすすめ型ライブラリ3選 2023.03.02 MixLeap Live Study #70 - 教えて!みんなのTypeScript
Slide 2
Slide 2 text
©︎ 2023 Gemcook, Inc. 自己紹介 名前 経歴 昨年8月から、株式会社Gemcookにインターンとして ジョイン 。React, TypeScriptを使ったフロントエンド 開発に従事。 関西学院大学 法学部 政治学科 4年 (今年4月~) 井上 倖太朗 出身 東京都府中市出身
Slide 3
Slide 3 text
型ライブラリを紹介しようと思った背景 ・単純に記述量も増える。 ・型による安全性は担保しつつ、型定義はなるべく最小限の労力で行なってメインとなる実装に より多く時間を使いたいというのが個人的な思い。 ・実装に加えて、型も同時に定義していかなくてはいけないので、考えることが増える。 TypeScriptのような静的型付け言語では、多くの利点がある一方で、 静的型付けにはいくつか「しんどいな」と感じる側面もあると思っている。
Slide 4
Slide 4 text
ライブラリを導入して 少しでも開発効率を高められないだろうか?
Slide 5
Slide 5 text
便利な型ライブラリ3選 ・ts-essentials ・ts-toolbelt ・type-fest GithubのStar数: 5.4k (2023.2.26日時点) GithubのStar数: 10.2k (2023.2.26日時点) GithubのStar数: 2.9k (2023.2.26日時点) 何が嬉しい? 具体的に何ができる? (一部紹介) ・TypeScriptの標準機能にはない型定義を提供しており、より柔軟な開発が可能 (ユーティリティタイプでは足りないようなケースに対応) ・型を一から自作する必要がないため、工数削減できる。 Ý オブジェクトの一部のプロパティのみ省略可能にする。 Ý スネークケースやケバブケースの命名規則をキャメルケースに変換する。 Ý ネストされたオブジェクトのプロパティを readonly (読み取り専用) にする。
Slide 6
Slide 6 text
ts-toolbeltのコード例を紹介 方法3 (ts-toolbeltならスッキリ!) ・ts-toolbeltでオブジェクトの一部のプロパティのみ省略可能にするコード例です! オブジェクトの一部プロパティをオプショナルにして定義したい。 方法2 (んー。なんか冗長) 方法1 (んー。なんかわかりづらい)
Slide 7
Slide 7 text
まとめ ©︎ 2023 Gemcook, Inc. a ライブラリにはさまざまな型ユーティリティが用意 されていて、複雑で高度な型の定義も簡単に実現する ことが可能です。 a 長期的に見て開発効率を重視するのであれば、 ライブラリを検討してみるのもありだと思います。 (導入コストが低い+メンテナンスコストも減る) a TypeScriptを使った開発を効率化させる 型ライブラリの紹介をしました。
Slide 8
Slide 8 text
ご静聴ありがとうございました