TypeScriptが書けるようになりたい1児の父です！
先日1歳になって、日々の成長が目覚ましいのを目の当たりにしていると自分も成長しなければと思います…

だからというわけではないですが…「TypeScriptを知ってるよ！」から「TypeScriptを書けるよ！」になるため、
継続して勉強していけるための工夫の一つとして勉強したことをアウトプットしていくことに決めました！

勉強方法

どんな勉強方法が良いかと考えていましたが…

type-challenges

個人的には多少なりとも勉強していたこともあったのでオススメされた下記をやってみることにしました。

サバイバルTypeScript

「サバイバルTypeScript」も気になったので、こちらも並行して進めたいと思います！

これまでで利用したコンテンツ

これまでに下記の有料のコンテンツで勉強しました。
動画でのハンズオン形式で、解説も丁寧なので非常にわかりやすかったです！

TypeScriptってなに？

TypeScriptはMicrosoftにより2012年10月1日に発表されたものらしいです。
最近耳にすることが多くなりましたが、ずいぶん前からあることに驚きです！

TypeScriptの特徴

JavaScriptに型が追加され、それ以外の部分は基本的に互換性がある
型があることでコンパイル時にミスに気がつくことができる
JavaScript100％で記述してもTypeScriptのコンパイラーは解析してくれる

TypeScriptを学ぶというのはJavaScriptを学ぶことが必須。
JavaScriptも同時に学んでいかないといけないので学習コストは高めかもしれないです…。

「TypeScript誕生の背景」は面白かったで興味ある方は読んでみてください！

type-challengesの始め方

type-challengesのGitHubページへアクセス

ページにアクセスしてスクロールすると「Challenges」と書かれた箇所にタグがたくさんあります。

type-challengesの課題を選択する

タグをクリックすることで課題に取り組むことができます！
赤枠で囲まれた「Hello World」のタグをクリックします。

課題のページが開きます。

ページには下記のコードを編集してテストに合格するようにと書かれています。

// expected to be string
type HelloWorld = any

「Take the Challenge」のボタン（画像の赤枠部分）を押してチャレンジしてみます！

課題に取り組む

クリックするとTypeScriptの実行環境が開きます。
開いた時点では右側の「Errors」でエラーが出ているのがわかるのでこちらを解消していけばいいかと思われます！

ページをスクロールすると「Your Code Here」とあるのでそちらを編集していきます！
編集すれば自動で実行されて結果が出ます。

テストケースは「Your Code Here」のすぐ下に「Test Cases」とあるところに記載してあるので参考にすれば修正方法がわかるかと思います！

コードを修正する

/* _____________ Your Code Here _____________ */

- type HelloWorld = any
+ type HelloWorld = string

/* _____________ Test Cases _____________ */
import type { Equal, Expect, NotAny } from '@type-challenges/utils'

type cases = [
  Expect<NotAny<HelloWorld>>,
  Expect<Equal<HelloWorld, string>>,
]

これでエラーは消えます。

回答を確認する

課題が書かれていたページの右下にある「Check out Solutions」をクリックします。

Issueの一覧が出てくるので自分と同じ回答がないか探します。
すでにClosedになっているものから探すのが良いかと思います！

まとめ

始めたばかりですが、かなりの筋トレになりそうです。
Issueの中には自分とは違う回答の方もいらっしゃるので人のコードをみてそんな書き方もあるのかと学びにもなります！

これからTypeScriptを始める人、今頑張って勉強している人は是非学習方法の一つとして検討してみてください！