js를 기반으로한 프로그래밍 언어 -> type 중시
strongly-typed
: 프로그래밍 언어가 작동하기 전에 type 확인
js
const plus = (a,b) ⇒ a+b;
ts
const plus = (a:number ,b:number) ⇒ a+b;
plus(1,1) → O
plus(”a”,1) → ERROR!
타입이 다르면 경고 표시를 보낸다
타입 설명
interface CirclePrps {
bgColor: string;
}
import styled from "styled-components";
const Container = styled.div``;
interface CircleProps {
bgColor: string;
}
function Circle({bgColor}: CircleProps) {
return <Container />;
}
export default Circle;
props 전달할 수 있다
import styled from "styled-components";
interface CircleProps {
bgColor: string;
}
interface ContainerProps {
bgColor: string;
}
const Container = styled.div<ContainerProps>``;
function Circle({bgColor}: CircleProps) {
return <Container bgColor={bgColor} />;
}
export default Circle;
interface - 선택적 요소
interface CirclePrps {
bgColor: string;
borderColor?: string;
}
필수가 아닌 바뀔 수 있는 요소일 때 ?
를 사용한다
interface ContainerProps {
bgColor: string;
borderColor: string;
}
function Circle({bgColor, borderColor}: CircleProps) {
return <Container bgColor={bgColor} borderColor={borderColor ?? "white"} />;
}
borderColor={borderColor ?? "white"}
: borderColor가 undefined
→ white
borderColor={borderColor ?? bgColor}
: borderColor가 undefined
→ bgColor과 동일하게
const [counter, setCounter] = useState(1);
setCounter(1);
→ O
const [counter, setCounter] = useState(1);
setCounter("hello");
→ ERROR!
타입 정해주기
const [value, setValue] = useState<number|string>(0);
setValue(1); → O
setValue(”hello”); → O
setValue(true); → ERROR
|
: 두가지 타입 모두 가능함
ex. <number|string>
React.FormEvent<element>
const onChange = (event: React.FormEvent) => {};
어떤 종류의 element가 onChange 이벤트를 발생시킬지 특정 가능
const [value, setValue] = useState('');
const onChange = (event: React.FormEvent<HTMLInputElement>) => {
const {
currentTarget: {value},
} = event;
setValue(value);
};
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log("hello", value);
};