TypeScript と JSX の基礎文法を習得する

TypeScript と JSX が JavaScript の拡張であることを理解し、基礎文法を習得します。
わからない文法を検索できるように、文法の名称を把握します。

今はこのパートをスキップして、あとから参照もできます。

• TypeScript が JavaScript の拡張であることを理解する
• JSX が JavaScript の拡張であることを理解する
• TypeScript でよく使う記法を把握する
  • 参考リンク
• JSX でよく使う記法を把握する
  • 参考リンク

TypeScript が JavaScript の拡張であることを理解する

TypeScript は、JavaScript に 静的型付け を持たせた上位言語です。
上位 とは、JavaScript で書かれたソースコードがすべて TypeScript として妥当であることを意味します。
JavaScript が書ければ TypeScript も書けることになるのです。

TypeScript にあって JavaScript にない文法は、型の宣言です。
ほかの文法は JavaScript にも存在します（現在の JavaScript に存在するとは限らないものの、少なくとも将来的な仕様や提案には含まれています）。

型の宣言は次のようなものです。

ts
12345678910111213
             
Copied!
// 変数宣言
const message: string = 'Hello'

// 引数と戻り値の型
function greet(message: string): void {
  console.log(message)
}

// 独自型の定義
type Greeting = {
  id: number
  message: string
}

型は常に宣言する必要があるとは限りません。
TypeScript が強力に 推論 し、自動で型が決まるからです。
むしろ推論できるなら推論で型を決めたほうが、人為的ミスが減り好ましいでしょう。

次の例では、型の推論によって減算が型エラーとして検出されます。
JavaScript だけでは、実行してもエラーにならないため、検出できません。

ts
12345678
        
Copied!
// string 型に決まる
let a = '1'

// number 型に決まる
let b = 1

// string 型と number 型は減算できないので型エラー
console.log(a - b)

ブラウザーは JavaScript しか実行できないので、TypeScript で書いたソースコードは コンパイル（またはトランスパイル）によって JavaScript へ変換する必要があります。
この教材では、Parcel の内部の Babel というツールがトランスパイルを実行しています。

JSX が JavaScript の拡張であることを理解する

次の JSX 式は、h1 という JSX.Element を変数に代入するものです。

tsx
1
 
Copied!
const element = <h1 title="hello">Hello JSX!</h1>

このソースコードはコンパイルによって次の JavaScript コードへ変換されます。

js
1
 
Copied!
const element = React.createElement("h1", { title: "hello" }, "Hello JSX!");

element は React.createElement の戻り値なので、文字列ではありませんし、ほかの変数に代入したり関数の戻り値にしたりできる 普通の 値です。

TypeScript と JSX を組み合わせることで、React.createElement の引数の型が検査できます。
つまり、次のことが型エラーとして検出できます。

• 存在しないコンポーネント（たとえば h9）を使っていないか
• 属性 title は存在しているか
• 属性の値の型 title="hello" は string 型か
• 子要素 Hello JSX! を渡すことができるか、またその型は string 型でよいか

TypeScript でよく使う記法を把握する

TypeScript 固有の記法と JavaScript にもある記法を分けずに記載します。

参考リンク

• https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/About
• http://js.studio-kingdom.com/typescript/handbook/advanced_types

JSX でよく使う記法を把握する

• JSX 内で変数を使う

  tsx
  12
    
  Copied!
  const name = 'JSX'
  const element = <h1>Hello {name}!</h1>
  

• 属性に固定の文字列以外の値を渡す

  tsx
  12
    
  Copied!
  const index = -1
  const element = <h1 tabIndex={index}></h1>
  

• if 文で条件分岐する

  tsx
  1234567
         
  Copied!
  function Hello({ name }) {
    if (name) {
      return <h1>Hello {name}!</h1>
    }
  
    return <h1>What's your name?</h1>
  }
  

• 三項演算子で条件分岐する

  tsx
  123456789
           
  Copied!
  function Hello({ name }) {
    return (
      <div>
        <h1>Hello!</h1>
  
        {name ? <p>Your name is {name}</p> : <p>Mr. Anonymous</p>}
      </div>
    )
  }
  

• AND 演算子で条件分岐する

  tsx
  123456789
           
  Copied!
  function Hello({ name }) {
    return (
      <div>
        <h1>Hello!</h1>
  
        {name && <p>Your name is {name}</p>}
      </div>
    )
  }
  

• 要素を繰り返す

  tsx
  123456789101112131415
                 
  Copied!
  const people = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 20 },
  ]
  
  const element = (
    <div>
      {people.map(({ name, age }) => (
        <p key={name}>
          <b>Name: {name}</b>
          <span>Age: {age}</span>
        </p>
      ))}
    </div>
  )
  

• 特殊な React.Fragment コンポーネントを使う

  tsx
  1234567891011121314
                
  Copied!
  function Hello({ name }) {
    return (
      <div>
        {name ? (
          <>
            <h1>Hello!</h1>
            <p>Your name is {name}</p>
          </>
        ) : (
          <p>What's your name?</p>
        )}
      </div>
    )
  }
  

参考リンク

• https://ja.reactjs.org/docs/introducing-jsx.html

このパートは以上です。おつかれさまでした。