React에서 typescript 사용법
- node.js로 설치하는 법
npx create-react-app 프로젝트명 --template typescript JSX 타입 지정하는 법
let 박스 :JSX.Element = <div></div>
let 버튼 :JSX.Element = <button></button>
/*리액트에선 변수나 자료에 <div></div> HTML 태그를 담아 작성할 수 있다. 하지만 리액트에선 HTML이 아닌 JSX라고 한다.
이런 자료를 타입지정하고 싶으면 JSX.Element 라는 타입을 쓰면 된다.*/function component 타입지정
- function에서 타입 지정은 parameter(매개변수)와 return(결과값)에 지정이 가능하다.
🖐️ parameter는 항상 props기 때문에 props의 타입을 직접 정할 수 있지만, 컴포넌트는 JSX를 return하기 때문에 JSX.Element로 지정해줄 수 있다. 따로 타입을 지정해주지 않아도 typescript가 자동으로 JSX.Element로 지정해준다.
type PropsType = {
name: string;
}
function App(props: PropsType) :JSX.Element {
return(
<div>{props.name}</div>
);
}🖐️ 가끔 props를 JSX를 입력할 수 있게 코드를 작성할 수도 있는데
그럴땐 JSX.intrinsicElements 라는 타입을 사용할 수 있다.
<Container a={<h4>안녕하세요</h4>} />
function Container(props) {
return(
<div>{props.a}</div>
)
}
---------------------------------------------
type ContainerProps = {
a: JSX.IntrinsicElements['h4'];
}
function Container(props: ContainerProps) {
return(
<div>{props.a}</div>
)
}
//a라는 props는 h4 태그만 넣을 수 있다.state 문법 사용시 타입 지정하는 법
- useState를 사용 시에는 typescript가 자동으로 type을 지정해준다.
하지만 state 타입이 변화할 수도 있을 경우 미리 지정해 줄 수 있다.
const [user, setUser] = useState<string | null>('jeong')
//Generic 문법을 사용하여 state의 타입을 지정해 준다.type assertion 문법 사용시 타입 지정하는 법
as또는<>를 사용. but React에서<>를 사용할 경우 컴포넌트로 오해할 수 있어as키워드를 권장한다.- 하지만
as키워드는 타입스크립트의 보안해제의 역할이기 때문에 자료값의 타입을 확실히 알 수 있을 때 사용하는 것을 지향한다.
하잇