개발/TypeScript
-
[TypeScript + React] 공통 UI 컴포넌트 interface 선언개발/TypeScript 2023. 1. 8. 16:39
공통 UI 컴포넌트를 쓰다 보면 부모 컴포넌트에서 전달해야할 props가 각기 다른 경우가 태반이다. 이럴 때 TypeScript에서는 어떤 식으로 interface를 작성해야 하는지 감을 못 잡고 있었는데 거금을 주고 강의 결제했더니 바로 거기서 튀어나왔다. 아주 값진 쓰임이었다...! 아래와 같이 인터페이스에서 [key: string]: any; 로 각종 props를 처리할 수 있게 넣어준 후 컴포넌트가 받을 props 선언하는 부분에서는 ...rest와 같이 spread 연산자로 풀어주면 끝 interface TextAreaProps { label?: string; name?: string; [key: string]: any; } export default function TextArea({ lab..
-
[TypeScript] Generic 써보기개발/TypeScript 2023. 1. 6. 23:03
[Generic] - 확실한 타입을 모를 때 사용 가능 /// 파라미터 타입이 미정인 경우 예제 type SuperPrint = { (arr: T[]): void } const superPrint: SuperPrint = (arr) => { arr.forEach(el => console.log(el)); } // 이하 모두 정상 작동 superPrint([1, 2, 3]); superPrint([true, false, true]); superPrint(['1', '2', '3']); superPrint(['1', true, 3]); /// 리턴 타입이 미정인 경우 예제 type SuperReturn = { (arr: T[]): T } const superReturn: SuperReturn = arr = ..
-
[TypeScript] 함수 선언 - Call Signature와 Overload개발/TypeScript 2023. 1. 6. 19:59
[Call Signature] - 함수의 파라미터, 리턴값을 선언 // 타입 선언. number형 파라미터를 2개 받고 number형 값을 반환한다 type Add = (a: number, b: number) => number; // 위에서 선언한 타입을 사용하는 함수 작성. call signature 덕분에 파라미터와 리턴값 타입 선언을 생략했다 const add: Add = (a, b) => a + b; // call signature 없이 함수 선언 시 const add_before = (a: number, b: number): number => a + b; [Overload] - 하나의 함수가 여러개의 call signature를 가질 때 발생 // 파라미터 데이터 타입이 상이한 경우 type A..
-
[TypeScript] 읽기 전용(readonly) 속성 지정개발/TypeScript 2023. 1. 6. 19:39
특정 속성 값을 수정하지 못하도록 readonly 선언을 할 수 있다. type Player = { readonly name: string }; // name 속성 값 변경 불가 const firstPlayer: Player = { name: 'first man' }; firstPlayer.name = 'first cool man'; // numbers 원소 편집 불가 const numbers: readonly number[] = [1, 2, 3]; numbers.push(4); 개발툴에서 보면 아래와 같이 평범한 js 코드였다면 아무 문제 없었을 부분에 빨간 줄이 뜨면서 수정을 강요한다.