Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【TypeScript】type-challengesという型エラー解決の問題集が面白い

TypeScriptの型の扱い方の学習法に悩む

ハピタスのスマホアプリ版ではReactNative/React(web view)を導入しており、
TypeScriptでの開発を採用しております(Reactは一部JavaScriptが混在)。

JavaScript(以下JS)の上位互換であるTypeScript(以下TS)、
業務で書きながら覚えることはもちろんなのですが、自分で学習する際にどのように学べばTS特有の型を含んだ型の扱いを理解できるようになるのか学習法に悩んでいました。

type-challenges

何か手を動かしながら学べる物がないと色々探して、
antfu(GitHub Profile)さんという方が作成した
type-challengesという型のエラーを解決する問題集を提供しているリポジトリを見つけました。
TS公式にあるPlaygroundで実行しながらコードを書いて問題を解けるので、非常に手軽です。
自分の解答をissueに上げて共有したり、質問をすることもでき、作者や、他に取り組んでいる人たちでサポートし合う環境を目指しているようです。

実際にサンプル問題を解いてみます。

下記のように問題がレベル別にタグとなって表示されております。

実際にwarm-upのHello Worldという問題を解いてみます。

スクリーンショット 2020-12-09 18.56.48.png

解きたい問題のタグを選択すると、問題文が表示されます。

解く際には、Take the Challenge を選択します。

スクリーンショット 2020-12-09 19.00.37.png

Playgroundに記述されているTest Caseのコードがエラーとなっているので
Your Code Hereの解答を記述する箇所に、問題で提示される条件に合致するようにコードを修正し、Test Caseのエラーが解消されればOKです。

スクリーンショット 2020-12-09 19.12.27.png

今回の問題はexpected to be a stringなので
anystringにすればOKです。

スクリーンショット 2020-12-09 19.19.22.png

エラーが解消されたので、この問題は解くことができました。

自分の解答を共有したい場合には、左下のShare your Solutions からisuueの作成画面に行けるので、解答を記入してissueとして共有します。
不明点があれば質問を共有すれば誰かが答えてくれるかもしれません。

最後に

シンプルな問題からかなり入り組んだ問題まで用意されており、手を動かしてクイズ感覚で楽しんで取り組めます。

TSを書いてると型エラーに苦しめられることが多々あるので
業務以外にも、この問題集で手を動かしながら理解を深めていきたいです。

みなさんも是非挑戦してみてください。

最後まで読んで頂きありがとうございました。

sh-suzuki0301
2019年9月に7年半従事した営業職からwebエンジニアへ転向。 会員数320万人のサービスでバックエンド/フロントエンド/ネイティブアプリ開発など幅広くやっております。 PHP/JavaScript/TypeScript/React/ReactNative/Redux
https://hapitas.jp
ozvision
購買プラットフォーム「ハピタス」を開発・運営するベンチャー企業
https://www.oz-vision.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away