TypeScript=Strongly-type
Strongly-type=프로그랠밍 언어가 작동하기 전에 type을 확인한다.

const plus =(a,b)=>a+b;

이렇게 작성하면 a,b에 아무거나 들어가도 된다. 그럼 JavaScript 에서는
숫자, 문자 혼용이 되어버린다. 혼종....
그래서 TypeScript에서는 타입을 정해준다.

const plus=(a:number, b:number)=> a+b;
plus(1,2); =>3
plus(1, '2') => error

첫 설치시
npx create-react-app my-app --template typescript

파일 확자자명 .tsx

Typing the Props

TypeScript에게 Component가 가져야 하는 Prop을 설명해주고싶을때.

App.tsx

import Circle from "./Circle";

function App(){
	return(
    	<Circle bgColor="green"/>
    )
}
export default App;

Circle.tsx

import styled from 'styled-components';

interface ContainerProps{
	bgColor: string;
}

const Container = styled.div<ContainerProps>`
	width: 200px;
    height: 200px;
    background-color: ${(props)=>props.bgColor} //ContainerProps에서 bgColor받아옴

`;

interface CircleProps{
	bgColor: string; 
}

//TypeScript는 CircleProps안에 bgColor가 있다는걸 알게됨.
function Circle({bgColor}: CircleProps){
	return<Container bgColor={bgColor}/> 
    //근데 Container은 bgColor를 알지 못한다.
    //그래서 ContainerProps 라는 interface를 만들어서 형식을 전해주고 Container에게 할당한다.
}
export default Circle;

interface는 object를 설명해주기 위함.

ex)

interface PlayerShape{
    name:string;
    age:number;
}
const sayHello=(playOjb:PlayerShape)=>`
    Hello ${playOjb.name} you are ${playOjb.age} years old
    `

sayHello({name:'bin', age: 28})
//props type와 비슷하지만 코드 실행후 에러를 받을수있지만 여기서는 코드 실행 전에 에러를 볼수있다. 

Optional Props

동일한 태그가 있지만 하나의 태그에만 값을 주고싶을때.
props값을 필수적이 아닌 선택사항으로 변경하려면 어떻게 해야할까?

기존상태

interface CircleProps{
	bgColor: string; 
}

변경상태

interface CircleProps{
	bgColor: string; 
    borderColor?: string
}

뒤에 ? 만 주면 된다.
이러면 borderColor: string | undefiend; 와 동일하다.

function App(){
    return(
        <div>
            <Circle borderColor='white' bgColor="green"/>
            <Circle bgColor="pink"/>
        </div>

    )
}

이렇게 해도 문제없다. borderColor는 선택사항이기에

하지만 return에는 문제가있다.
ContainerProps는 borderColor가 필수사항이다 그래서!

return<Container bgColor={bgColor} borderColor={borderColor ?? bgColor }/>
  //borderColor값이 없으면 bgColor 값을 사용하세요~

혹시 props에 default값을 주려면?
interface CircleProps{
bgColor: string;
borderColor?: string;
text?: string; 주고
}

function Circle({bgColor,borderColor,text="default text"}:circleProps){}
텍스트값 세팅

<Circle borderColor='white' bgColor="green"/>
 <Circle text="I'm text" bgColor="pink"/>

State

useState에서 형식을 세팅해주는 방식은
const [value,setValue]=useState<number|string>(0);
그럼 value값은 두개만 가능.

Forms

import React, {useState} from 'react';

function App() {
  const [value, setVaule]=useState("");

  /** 이 onChange함수가 InputElement에 의해서 실행될것이다.*/
  const onChange=(event: React.FormEvent<HTMLInputElement>)=>{
      const {currentTarget: {value}}=event;
      setVaule(value);
  }

  //target과 currentTarget의 차이
  //target: 이벤트가 발생한 바로 그 요소
  //currentTarget: 이벤트리스너를 가진 요소
  //설명: https://choonse.com/2022/01/14/605/

  const onSubmit = (event: React.FormEvent<HTMLFormElement>)=>{
      event.preventDefault();
      console.log('hello',value)
  }

  return (
      <div>
          <form onSubmit={onSubmit}>
              <input
                  value={value}
                  onChange={onChange}
                  type="text"
                  placeholder="userName"/>
              <button>Log In</button>
          </form>
      </div>
  );
}

export default App;

const {currentTarget:{value},}=event;
코드의 의미

ES6 문법이에요. event안 curentTarget안에 value의 값을 기존 이름 그대로 value 라는 변수를 만드는 거에요.
const value = event.currentTarget.value 랑 똑같습니다. 왜 저렇게 복잡하게 하냐고 물어보실수도 있는데 사실 저런식으로 한개만 만들때는 저 문법의 장점이 없어요.
헌데 만약에 currentTarget안에서 value, tagName, width, id 이 4개를 가져오고 싶다고 하면 기존 문법으로는 이렇게 써야 되겠죠?
const value = event.currentTarget.value;
const tagName = event.currentTarget.tagName;
const width = event.currentTarget.width;
const id = event.currentTarget.id;
이거를 이렇게 바꿔 쓰실수 있습니다.
const {
currentTarget: {value, tagName, width, id}
} = event;

✰React.FormEvent<여러가지> 쪽 더 찾아보자. SyntheticEvent

Theme

styled.d.ts

import 'styled-components';

declare module 'styled-components'{
  export interface DefaultTheme{
      textColor: string;
      bgColor: string;
      btnColor: string;
  }
}

theme.ts

import {DefaultTheme} from "styled-components";

export const lightTheme: DefaultTheme={
  bgColor: 'white',
  textColor: 'black',
  btnColor: 'skyblue'
}
export const darkTheme: DefaultTheme={
  bgColor: 'black',
  textColor: 'white',
  btnColor: 'red'
}

index.tsx

root.render(
<React.StrictMode>
    <ThemeProvider theme={darkTheme}>
  <App />
    </ThemeProvider>
</React.StrictMode>
);

App.tsx

import React from "react";
import styled from  'styled-components'
import Circle from "./Circle";

const Container=styled.div`
background-color: ${(props)=>props.theme.bgColor};
`
const H1=styled.h1`
color: ${(props)=>props.theme.textColor}
`

function App(){
  return(
      <Container>
          <H1>Protect</H1>
      </Container>
  )
}

export default App;

다크모드