function Circle() {
const [value, setValue] = useState<number | string>(0);
setValue(2);
setValue("hello");
setValue(true); // error
return <Container />;
}
Typescript는 const [value, setValue] = useState()
에서 value
와 setValue
의 타입을 따로 작성하지 않아도 useState()
안에 들어가는 값을 가지고 타입을 자동으로 판단한다.
value
와 setValue
에 string
뿐만 아니라 number
의 값도 허용하게 하고 싶으면 useState<number | string>()
형식으로 작성하면 된다.
function App() {
const onChange = (event) => {};
return (
<div>
<form>
<input onChange={onChange} />
<button>Log in</button>
</form>
</div>
);
위의 코드에서 Typescript
는 form
에서 일어나는 event
를 자동으로 Any
타입으로 지정한다. 하지만 Any
타입을 배제하려고 노력해야 한다.
event
의 타입을 React.FormEvent<>
를 통해 react
의 form
에서 일어나는 event
임을 명시해줘야 한다.
React.FormEvent<HTMLInputElement>
에서 <>
내부에는 어떤 태그 내에서 일어나는 이벤트인지를 명시해줘야 한다.
어떤 타입을 지정해야하는지는 구글링을 열심히..
styled-components
에는 IDE에서 편집 환경을 지원하고 TypeScript
프로젝트에 유형을 제공할 수 있는 TypeScript
정의 가 DefinedTyped
에 있다.
npm install --save-dev @types/styled-components
themes
를 사용하기 위해선 선언 파일을 만들어줘야 한다.
styles.d.ts
파일을 만들고 아래의 코드를 작성해준다.
import "styled-components";
declare module "styled-components" {
export interface DefaultTheme {
textColor: string;
bgColor: string;
btnColor: string;
}
}
styles.d.ts
파일에는 DefaultTheme
가 어떤 key
와 type
을 가져야하는지 지정한다.
themes.ts
파일을 만들고 아래의 코드를 작성해 준다.
import { DefaultTheme } from "styled-components";
export const lightTheme: DefaultTheme = {
bgColor: "white",
textColor: "black",
btnColor: "tomato",
};
export const darkTheme: DefaultTheme = {
bgColor: "black",
textColor: "white",
btnColor: "teal",
};
그 후에 index.tsx
에 import { ThemeProvider } from "styled-components";
import { lightTheme } from "./theme";
하여 일반 styled-component
형식대로 작성하면 된다. 아래 코드 참조.