19.12.10 typescript # React TypeScript

npx create-react-app typescript-react-demo --typescript

App.tsx

import React, { Component } from "react";
import {createGlobalStyle} from "styled-components";

// 컴포넌트에게 state가 있다는 걸 알려주는 것
interface IState {
    counter : number;
}

// 컴포넌트에게 state 부여
class App extends Component<{}, IState> {
    state = {
        counter : 0
    };
    render() {
        const {counter} = this.state;
        return (
            <div>
                {counter} <button onClick={this.add}>Add</button>
            </div>
        );
  };
  add = () => {
      this.setState(prev => {
          return {
              counter : prev.counter + 1
          }
      })
  }
}

export default App;

typescript의 장점

• state의 상태값을 Interface로 미리 지정해서 setState에 없는 state를 지정해주는 실수를 줄일 수 있다
  ex) this.setState({hello:1})
  => error : hello doesn't exist in type IState