Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 구조분해할당
- 에러해결방안
- 리액트
- 혼자공부하는머신러닝딥러닝
- 타입스크립트
- Redux
- TS
- 백준
- 딥러닝
- 백준 #코딩테스트 #코테 #알고리즘
- typeScript
- styledcomonents
- 혼자공부하는머신러닝
- useEffect
- clipboardapi
- js
- 혼공챌린지
- axios
- 머신러닝
- 백준 #코딩테스트
- 혼공머신
- error맛집
- reactmemo
- CSS
- 알고리즘
- REACT
- 초기값 설정하기
- 코딩테스트
- 혼공단
- 유니티 #게임개발
Archives
- Today
- Total
좌충우돌 개발자의 길
[TS] 타입스크립트로 컴포넌트 props 타입 설정하기 본문
1. 컴포넌트 props 타입 정의하기
- 변환 전 자바스크립트 코드
const goalCard = (data) => {
return <GoalCard data={data} />;
};
...
function GoalCard({ data }) {...}
- 변환 후 타입스크립트 코드
const goalCard = (data: GoalDataInfo) => {
return <GoalCard data={data} />;
};
...
function GoalCard({ data }: GoalProps) {...}
// 타입 설정
export interface GoalDataInfo {
startYear: string;
startMonth: string;
startDate: string;
endYear: string;
endMonth: string;
endDate: string;
goalContents: string;
price: string;
id: string;
}
export type GoalProps = {
data: GoalDataInfo;
};
- 참고 사이트
https://velog.io/@ovogmap/React-Typescript-2
https://velog.io/@ahsy92/TypeScript-React-TypeScript-Props-type%EC%A0%95%EC%9D%98-%ED%95%98%EA%B8%B0
'STUDYING > Typescript' 카테고리의 다른 글
[TS] Styled-Components에 타입스크립트 사용하기 (0) | 2022.12.22 |
---|---|
[TS] 타입스크립트로 구조 분해 할당 하기 (0) | 2022.12.22 |
[TS] 타입스크립트로 구조 분해 할당 하기 (0) | 2022.12.22 |
[TS] Typescript 오류 해결 : is not assignable to type 'IntrinsicAttributes && boolean' (0) | 2022.07.06 |
[TS] Typescript 기초 (0) | 2022.06.12 |