2022.1.19 TIL

0.TypeScript의 Interface 사용
1.TypeScript의 Synthetic Event 사용

TypeScript Interface 사용

import styled from"styled-component";

const Container = styled.div``;

interface CircleProps = {
	bgColor:string;
};

function Circle({bgColor}:CircleProps) {
	return <Container bgColor={bgColor} />
}

function Circle({bgColor}:CircleProps) {
	return <Container bgColor={bgColor} />
}

여기서 Container 태그 안의 bgColor에 빨간 밑줄이 생긴다.
TypeScript가 봤을 때 Container component가 어떤 props도 받고있지 않기 때문이다.
따라서 TypeScript에게 bgColor를 styled-component에게도 보낼것이라고 알려주어야한다.

interface ContainerProps = {
	bgColor:String;
};

const Container = styled.div<ContainerProps />``;

위와 같이 Container에 대한 interface를 하나더 선언해 주고 Container에게 알려주면 된다.
여기서 ContainerProps와 CircleProps는 하나의 props를 받는 다는 점에서 서로 같은 interface라고 할 수 있다.

TypeScript의 Synthetic Event 사용

function APP(){
	const onClick = (event.FormEvent<HTMLButtonElement>) =>{};
	return (
    	<form>
            <button onClick={onClick}>click here</button>
        </form>
    );
};

위 코드에서 event.FormEvent<HTMLButtonElement> 는 react 이벤트이다. 이는 종류가 다양하기 때문에 사용시 필요에 맞게 Synthetic Event React 공홈 Synthetic Event 문서에서 찾아보면 좋겠다.

React 공홈 Synthetic Event 문서에 들어가보면 아래 이미지와 같이 합성 이벤트의 종류를 확인해볼 수 있다.