概要
TypeScriptは、JavaScriptを拡張して作られたプログラミング言語で、2014年頃にMicrosoftによって開発・発表されました。
TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されるため、JavaScriptファイルが実行できる環境ならすぐに使えて、JavaScriptライブラリもTypeScriptから使用できるなど、互換性の高さが特徴のプログラミング言語です。
しかし、TypeScriptでプログラムを書く場合、クラスの作り方やデータ型の設定方法など、新たな知識を習得するための学習コストが必要です。
これまで JavaScript の経験がある方にとってはそこまで学習コストが高いわけではないですが、やはり全くの初心者にとってはハードルが少し高い言語かと思います。
そこで、今回はそのような方を対象とした初心者向け TypeScript チュートリアル「Beginner's TypeScript Tutorial」を紹介します！
こちらの OSS では実際にリポジトリをローカル環境にクローンし、ローカル環境下で実行させながら問題を解決してくインタラクティブ形式のチュートリアルになっています。
それでは早速使い方などについてみていきましょう！
利用手順
以下のリポジトリをクローンして、ローカルサーバーを起動させることでチュートリアルを実行することができます。
git clone https://github.com/total-typescript/beginners-typescript-tutorial.git cd beginners-typescript-tutorial npm install
チュートリアルを実行するには以下のコマンドを実行します。
npm run exercise 01
試しに上記コマンドを実行してみると以下のようなメッセージが表示されます。
上記コマンドで実行されるファイルは /src/01-number.problem.ts にあり、ここでは Parameter 'a' implicitly has an 'any' type. とあり、addTwoNumbers = (a,b) =>{} の引数について型指定がされていないというエラー内容です。
TypeScript では JavaScript と異なり型指定が必要となるため、このようなエラーを度々目撃することとなるでしょう。
ちなみに、今回の場合は以下のように 引数 a と b にそれぞれ型を明示的に指定してあげることで解決できます。
export const addTwoNumbers = (a: number, b: number) => {
return a + b;
};
本チュートリアルの問題の模範解答時の挙動は以下のコマンドを入力することで確認することができます。
npm run solution 01
上記コマンドで実行されるファイルは /src/01-number.solution.ts であり、それぞれの引数に Number が付与されていることがわかります。
このようにして、執筆時点では 18 題ある問題にチャレンジすることができます！
使用感
早速自分もチュートリアルを試してみました！
私は普段 VSCode でソースコードを触っているのですが、各お題については赤線が表示されているのでここを修正すれば良いのだなということがわかりますね。
操作自体もコマンドを打ち込んで確認するだけのため、とても簡単に行うことができます。
残りの問題についても解凍していこうかなと思います！
まとめ
初心者向け TypeScript チュートリアル「Beginner's TypeScript Tutorial」を紹介しました。
TypeScript 初心者の方はもちろんのこと、TypeScript についてもう一度学び直してみたい方、深く TypeScript について学びたい方にとっても良いｔ教材かと思います。
興味がある方はぜひ一度こちらの OSS を試してみてはいかがでしょうか？
ライセンス
特に見当たりませんでした。
