React with Typescript

1. create

npx create-react-app ${폴더명} --typescript

2. Component Type

const Component: React.FunctionComponent<{num:number}> = ({num}) => ...

==================
      
interface IProps {
  num:number
}
const Component: React.FunctionComponent<IProps> = ({num}) => ...

3. Event Type

## App.tsx

interface IProps {
  name:string
}
const onChange = (event : React.SyntheticEvnet<HTMLInputElement>) => {
  console.log(event.target)
}

const onSubmit = (event : React.FormEvent) => {
  event.preventDefault();
}

const Component: React.FunctionComponent<IProps> = () => (
  <>
    <Form onSubmit={onSubmit}>
      <Input value={name} onChange={onChange} />
    </Form>
  </>
)

## Input.tsx

interface IInputProps {
  value:string,
  onChange: ( event : React.SyntheticEvnet<HTMLInputElement>) => void;
}

export const Input: React.FunctionComponent<IInputProps> = ({value, onChange}) => 
  <input type='text' value={value} onChange={onChange} />

## Form.tsx

interface IFormProps {
  onSubmit: ( event: React.FormEvent ) => void
}

const Form: React.FunctionComponent<IFormProps> = ({ children, onSubmit }) => <Form>{children}</Form>

4. styled-component Type

const Container = styled.span<{red: boolian}>`
  color:${props=>props.red ? 'red' : 'black'}
`;

const Counter : React.FunctionComponent<{count:number}> = ({count}) => 
  <Container isBlue={count > 10}>{count}</Container>
  

styled-component의 타입은 inline / Component의 타입은 interface로 지정하는것을 추천

** Theme Type

### styled.d.tx

import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    red: string,
    fontSize: string;
  }
}

props.theme. 설정해둔 props는 자동완성 기능이 된다!!!