TypeScriptとReactを一緒に使う方法

#ゼロからTypeScriptとReactを一緒に使う
tsxファイルを作成

react.tsx

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello</h1>, document.getElementById("app"));

↓"jsx": "preserve"をreactに変更

tsconfig.json

"jsx": "react"

↓変更してあげます。
↓entry: './src/react.tsx'
↓test: /.tsx?$/
↓extensions: ['.tsx', '.ts', '.js']

webpack.dev.js

module.exports = {
  mode: 'development', 
  entry: './src/react.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
}

#create-react-appでTypeScriptとReactを一緒に使う
#####create-react-app
様々な機能を詰め込んだ、React Applicationを作るためのツールです。

↓インストール

% npx create-react-app typescript-react --template typescript

#####react-app-env.d.tsファイル
↓import文のような感じで、実際には、中身のたくさんのものが読み込まれています。

react-app-env.d.ts

/// <reference types="react-scripts" />

#props
props : 親コンポーネントから子コンポーネントへ値を渡すための仕組みです。

propsはコンポーネント利用時に属性として設定ができる値で、
一度設定してしまえば後から変更ができません。

概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

↓は、propsに型をつけないと動きません。

App.tsx

import React from 'react';
import Hello from './components/Hello';

function App() {
  return (
    <div>
      <Hello message="I can do it."></Hello>
    </div>
  );
}

export default App;

Hello.tsx

import React from 'react'

const Hello = (props) => {
  return <h1>Hello {props.message}</h1>
}

export default Hello;

↓propsに型を付ける

Hello.tsx

import React from 'react'
type HelloProps = {
  message: string;
}

const Hello = (props: HelloProps) => {
  return <h1>Hello {props.message}</h1>
}

export default Hello;