メインコンテンツまでスキップ

速習 TypeScript

前置き​

この章では、TypeScript で React を書く上で、とりあえず知っておくと良い TypeScript の文法を解説していきます。

JavaScript でも他のプログラミング言語でもそうですが、「TypeScript をマスターしてやろう」という気持ちは不要です。

note

実際に僕自身、TypeScript の全ての機能を把握しているわけではありません。

「使ったことない機能」「違いを正しく理解していない似たような機能」など色々とあります。

それでも開発で困ったことがないのは、わからないことが出てきたら、都度調べて問題を解決しているからです。

ぜひみなさんにも、あまりハードルを高く感じずに「必要に応じて調べて解決する」という気持ちで学習を進めてもらえたらと思います。

TypeScript の書き方を学んだら実際に自分の手元でも実際に書いて動作確認してください。

動作確認をして思うように動かない時もあるかもしれません。

そういうときは「TypeScript type 書き方」「TypeScript 変数 型 指定」のような感じで、あなたの現在の状況に合わせたキーワードで都度ググってください。

そうすることで、自己解決スキルも少しずつ身についていきます。

前置きはこの辺にして、さっそく TypeScript の学習をしていきましょう。

TypeScript を体験する​

TypeScript の基本的な書き方は、JavaScript の基礎文法を知っていればすぐに身につけられます。

参考までに同じ内容の JavaScript と TypeScript を以下に用意したので比較してみましょう。

JavaScript のコード​

JavaScriptのコード
const nickname = 'Tsuyopon';const age = 33;const gender = 'male';const userA = {  id: 1,  nickname,  age,  gender,};function isAdultInJapan(age) {  return age >= 18;}function isFemale(gender) {  return gender === 'female';}const isChildInJapan = (user) => {  return user.age < 18;};const isMale = (user) => {  return user.gender === 'male';};console.log(isAdultInJapan(userA.age));console.log(isFemale(userA.gender));console.log(isChildInJapan(userA));console.log(isMale(userA));

TypeScript のコード​

TypeScriptのコード
type UserID = number;type Gender = 'male' | 'female';type User = {  id: UserID;  nickname: string;  age: number;  gender: Gender;};// 暗黙的にnicknameはstring型になるconst nickname = 'Tsuyopon';// 明示的にageの型をnumberと指定const age: number = 33;// 明示的にオリジナルの型「Gender型」を指定const gender: Gender = 'male';// 明示的にオリジナルの型「User型」を指定// User型と異なるプロパティや型を指定するとエラーになるconst userA: User = {  id: 1,  nickname, // nickname: nickname の省略記法(key, valueが同じの場合省略できる)  age,  gender,};// returnの値を元に暗黙的に戻り値が設定される（ここではboolean型となる）function isAdultInJapan(age: number) {  return age >= 18;}// 明示的に戻り値の型を指定した場合function isFemale(gender: Gender): boolean {  return gender === 'female';}// 関数式で書いた場合（暗黙的に戻り値の型が決まる場合）const isChildInJapan = (user: User) => {  return user.age < 18;};// （明示的に戻り値の型を指定した場合）const isMale = (user: User): boolean => {  return user.gender === 'male';};console.log(isAdultInJapan(userA.age));console.log(isFemale(userA.gender));console.log(isChildInJapan(userA));console.log(isMale(userA));

上の JavaScript のコードと TypeScript のコードの違いは大きく分けると次の 2 つです。

  • type というキーワードを使って、オリジナルの型を作っている
  • 変数・引数・戻り値の型を指定している（暗黙的な型推論と明示的な型指定）

これから色々な TypeScript のコードを見ていくと「明示的に型指定しているもの」「型指定していないもの」「上では取り扱っていない TypeScript の機能」をたくさん見つけることになります。

はじめて見る書き方を見つけた場合は、都度ググっていきましょう。（暗記する必要はなく、その場その場で必要に応じて調べて使えれば良い）

TypeScript をすぐに試してみたい場合

次の章で解説する「速習 React」 で「Vite」というフロントエンドツールを使って、React と TypeScript が動く開発環境を用意します。

もし、今すぐ TypeScript を実際に書いて動作確認をしてみたいという場合は、TypeScript 公式が出している「TypeScript Playground」を使ってみると良いでしょう。

実際の値と、（暗黙的・明治的に）指定した型が異なっているとすぐにエラーを知らせてくれる体験ができます。

コードを実行する前にエラーを知らせてくれる体験をすると、JavaScript には無い、TypeScript のありがたさに気付けてもらえるかと思います。

TypeScript の学習の参考になる資料​

以下にいくつか TypeScript の学習に役立つサイトや本をまとめておきます。必要に応じて適宜活用していただけたらと思います。

Next.js & TypeScript 体験講座​

僕が YouTube に公開している再生リスト「Next.js&TypeScript 体験シリーズ」の中に、「TypeScript とは」というタイトルの動画があります。

こちらの動画の中で実際に TypeScript のコードを書いて動作確認しながら解説しています。

TypeScript の動作イメージを掴みたい場合は、まずは以下の動画をご覧いただけたらと思います。

info

「Next.js&TypeScript 体験シリーズ」では、一連の動画を通して「Next.js × TypeScript」の開発の流れを解説しています。

Next.js は React を使ったフレームワークの 1 つなので、React の知識があれば習得までにそこまで時間はかかりません。

「Next.js × TypeScript」に興味がある場合はこちらの再生リストもご覧いただけたらと思います。

Next.js&TypeScript 体験シリーズ

サイト​

本​