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
436
Help us understand the problem. What is going on with this article?
@ryo2132

TypeScriptの"型"を学びたいあなたへ。type-challengesのすゝめ

先日以下ツイートをしたら思いの外良い反応もらえたので、より詳細な紹介記事を書いてみました。

type-challengesとは

type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

VueUseVueDemiの開発者である @antfu7さんが開発している、TypeScriptの型問題に気軽に挑戦できるリポジトリです。

  • ある型上の問題に対処するために、独自のユーティリティタイプを作成する型パズルを提供
  • TypeScript Playgroundで実際に手を動かしながら学べる
  • 世界のプログラマーの回答が確認できる

という点が特徴です。

使い方

1. READMEから挑戦したい問題を選ぶ

https://github.com/type-challenges/type-challenges にアクセスして、READMEのChallengesから挑戦したい問題を選びます。
レベル別に掲載されているので、まず黄緑ラベルのeasyから順に解いてみるのがおすすめです。

バッジをクリックすると、問題詳細ファイルに遷移します。
ここが問題挑戦や、回答の起点になります。

2. TypeScript Playgroundで問題にチャレンジ

Take the Challengeのバッジを押してTypeScript Playgroundにアクセスします。
Take the Challenge
TypeScript Playgroundでは問題文と回答欄、テストケースが記載されてます。テストケースではtype-challengesから型チェック用のユーティリティタイプがimportされています。JestのAssertionのような形で、ジェネリクスにユーティリティタイプを入れることで型を検証しています(すごい..!!)。

テストケースで型エラーが発生しないように、Your Code Hereの部分の型を修正してみてください。

3. 回答を確認 or 回答をIssueとして提出

Playgroundで問題に挑戦して型エラーを解決できたら、check out Solutionsのバッジから、対象の問題に対する回答(Issue)を確認してみましょう。
もし同様の回答が見つかったら投票やコメントをしてみてください。
Check out Solutions

また、もし自分の回答がユニークなものだったら、Share your solutionsのバッジからIssueを作成して回答をシェアしてみましょう。
Share your Solutions
バッジを押すと回答用のIssueが開かれるので、your answersの部分に自分の回答を貼り付け、Submit new issueボタンを押せば完了です。

Appendix: おすすめのTypeScript学習資料

「いやいや、型パズルをやる前にそもそもこれからTypeScript学ぶんだわ..」という方に向けておすすめ資料を紹介します。

TypeScript 公式ドキュメント

最近リニューアルされたTypeScript公式ドキュメントです。Handbookという章がとても分かりやすいです。
Handbookには基礎的な内容。Handbook Referenceにはconditional typesなど応用的な内容が掲載されています。

ちなみにこちらのIssueで日本語への翻訳プロジェクトも動いています。
コントリビューションしてみるのも良いと思います。

Japanese Translation Coordination Issue · Issue #220 · microsoft/TypeScript-Website

TypeScript Deep Dive

言わずと知れたTypeScriptの入門書ですね。TypeScriptを学びたいという方に「何から読めば?」と聞かれたら、まずこちらを進めることが多いです。
JavaScriptの歴史からTypeScriptへの移り変わり、TypeScriptのトランスパイル過程、高度な型機能まで幅広く解説されています。

TypeScriptの型システム - TypeScript Deep Dive 日本語版

@uhyo さんの記事

私は@uhyoさんの記事でTypeScriptを学びました。
どの記事もとても良いのですが、最初は以下記事で概要を理解するのがおすすめです。

そしてこちらの演習で理解度を確認するのが良いと思います。

O'Reilly プログラミングTypeScript

より体系的にTypeScriptを学ぶならO'Reillyから出ている書籍も良いです。
TypeScriptの型システムが網羅的に解説されています。

O'Reilly Japan - プログラミングTypeScript

終わりに

以上「TypeScriptの"型"を学びたいあなたへ。type-challengesのすゝめ」でした。
「TypeScriptの型は完全に理解してる!」「全く自信がない!」どちらの人にもおすすめなので、是非挑戦してみください。

(こんな記事を書いておきながらeasyレベルのTuple to Objectでつまづいた私も鍛錬あるのみです🙈)

2020/09/06 追記
な、なんと!!type-challengesの作者の@antfu7さんがコメント付きRTしてくれました(しかも完璧な日本語で)。嬉しい!!😆

436
Help us understand the problem. What is going on with this article?
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
ryo2132
Frontend engineer / フルリモートワーク / 元消防士🚒 / 一児の父 / Ruby / Typescript / Vue.js / Firebase
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
436
Help us understand the problem. What is going on with this article?