typescript TIL(55)

갑자기 타임어택과제로 타입스크립트로 리액트&리덕스를 리팩토링해서 제출하게됬다.

물론 완성하지 못했다. ㅠ 역시 3일만에는..무리인가보다 ㅠ docs고 구글이고 다 해도 오류가 한번나니까 연결되서 나니까 어질했다.

헷갈린다 헷갈려~

 

1. JSX.Element type

: JSX자료형을 말한다. 이 타입을 지정하고 싶다면 JSX.Element를 사용하도록

 

- JSX를 변수로 지정한다면

const fruits : JSX.Element = <p className = "apple"> </p>

const fuits:JSX.IntrinsicElement['p']=<p className = "apple" > </p>

이 두가지 다른 점은 태그를 앞에 지정해주냐 안해주냐다.

지정을 하면 Intrinsic을 붙여하는데 사전 찾아보니까 '본래 갖추어진'이라고 나온다... 이해하기 좋자면, 기존에있던 태그를 먼저 지정하니까? 그렇게 생각하고 넘어가야겠다.

 

2.컴포넌트

리액트에서 컴포넌트는 항상 return <JSX>였기 때문에 함수에서 return값을 타입 정해주듯 정해주면 된다.

const App() :Jsx.Element{
 return ( 여기에 JSX가 옵니다. )
}

3.Props타입

**어제 했던 타임어택 프로젝트에서 제일 답답헀던게 props문제였다 ㅠ 타입지정을 어떻게 해야할지 고민되었음..🧐

//App.tsx
const App (): JSX.Element{
 return (
   <div>
      <Main title={title} contents={contents}>
   </div>
  )
}

//Main.tsx  원래의 코드 였다면 이렇게
const Main =({title,contents})=> return (
 <div className = "main">
	<p>{title}</p>
       <p>{contents}</p>
 <div>
)

/*타입을 지정한다면 이렇게 */
const Main =(props:{title:string,contents:string}):JSX.Element=>return (
 <div className = "main">
	<p>{title}</p>
       <p>{contents}</p>
 <div>
)

아니면 밖에서 묶어줘도 된다.
타입스크립트에서 타입이 길어질 경우 따로 빼주듯이 type alias를 사용한다.

type Props = {
  title: string,
  contents: string
}

const Main=(props: Props): JSX.Element =>{
  return (
    <div className="main">
      {props.title}
      {props.contents}
    </div>
  )
}

 

4.state타입

-초기값이 있다? 알아서 지정됨

-초기값 없다? 제너릭으로 지정한다.

---

어제 리액트로 리팩토링을 하던 중에 하나하나 모든게 다 오류가 생기면서 멘붕이 왔었는데ㅋㅋㅋ

다시 재도전을 해봐야겠다. 내가 놓친 부분이 많은것 같다.😎