[TypeScript]TS쓰는 법 간단설명

변수, 함수 만들 때 타입지정하면 끝임.

 

 

뻥이다.

 

 

 

(새로 프로젝트 셋팅하는 것 기준.)

 

1.

 

터미널열고

npx create-react-app 프로젝트이름 --template typescript 

!!! 

---

 

2.

 

파일 확장자명은 JSX문법을 쓴다면 .tsx

일반파일은 .ts

 

---

3.

 

JSX표현하는 타입은

 

ex) let 박스 :JSX.Element  = <div></div>

---

4. 

 

component만들 때 타입지정은

 

함수니까 파라미터와 return 타입 지정하면됨.

 

파라미터는 항상 props이기 때문에 props가 어떤 타입일지 지정하면됨.

 

ex)

type AppProps = {
  name: string;
}; 

function App (props: AppProps) :JSX.Element {
  return (
    <div>{message}</div>
  )
}

---

props로 JSX 입력할 수 있는 코드

.

ex 1)

<Container a={<h4>안녕</h4>} />

function Container (props) {
  return (
    <div>{props.a}</div>
  )
}

 

ex 2)

type ContainerProps = {
  a: JSX.IntrinsicElements['h4'];
}; 

function Container (props: ContainerProps) {
  return (
    <div>{props.a}</div>
  )
}

---

5.

useState 사용시에는 알아서 타입 지정해줌

 

혹시라도 타입 넣고싶으면 제네릭 문법 사용

 

ex)

let [user, setUser] = useState<string| number>('han')