TypeScript_개인프로젝트 진행하며 알게 된 점(+ 복습)
프로젝트를 하며 처음 접했고, 아직 공부 중이므로 실제 개발하며 마주한 에러 메시지 + 알게 된 부분 위주로 정리
타입스크립트로 앱 폴더 생성
- $npx-create-react-app "생성할 프로젝트 이름" --template typescript
자바스크립트로 만들어진 써드 파티 라이브러리를 타입스크립트에서 사용하려면 각 기능에 대한 타입이 정의되어 있어야 한다.
- @types라는 별칭으로 타입스크립트 추론
Type '{ colors: { back: string; landing: string; ...}; flexRow: string; flexColumn: string; ... 13 more ...; xxl: string; }' is missing the following properties from type 'DefaultTheme': fonts, display, size, device, and 5 more.
- '{color: {...}}'의 타입에서 DefaultTheme 타입의 해당 프로퍼티들이 없다는 뜻
Type '{ themeToggler: string | (() => void); t: string | (() => void); }' is not assignable to type 'IntrinsicAttributes'. Property 'themeToggler' does not exist on type 'IntrinsicAttributes'.
- '{ themeToggler: string | (() => void); ...}' 타입은 'IntrinsicAttributes' 타입에 할당될 수 없습니다. 'themeToggler' 속성은 'In...' 타입에 존재하지 않습니다.
- 전달받은 props(themeToggler,t)의 타입을 자식 컴포넌트에서 명시하지 않았고, 아직 코드로 쓰여지지 않았을 때 생기는 에러(직역: 할당될 수 없다.)
https://github.com/nala723/The-Dreamer/issues/14
문자열 타입의 키로 객체에 접근했을 때, TypeScript 오류
- 타입스크립트는 객체의 프로퍼티를 읽을 때, string 타입의 키 사용을 허용하지 않는다.
https://github.com/nala723/The-Dreamer/issues/20
Styled-component에서 props 전달해 컴포넌트를 스타일 할 때 typescript 에러
https://github.com/nala723/The-Dreamer/issues/7
Property 'style' does not exist on type 'EventTarget'.
- 보통 e.target으로 접근해 작업을 수행할 때 볼 수 있다.(타입스크립트는 구체적인 EventTarget의 정보를 알지 못한다.)
- Type Assertions으로 타입의 값을 구체화한다.(e.target의 타입을 알려주었다.)
- currentTarget - a reference to the element on which the event listener is registered.(현재의 e.target)
const handleColor = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
e.preventDefault()
const newColor = e.currentTarget.style.backgroundColor
// const newColor = (e.target as HTMLDivElement).style.backgroundColor
// 둘다 가능하다.
// 생략
}Redux 세팅 과정
as const
const SEARCH_DREAM = 'SEARCH_DREAM' as const: 액션 타입 선언 코드- type assertion의 한 종류, 리터럴 타입의 추론 범위를 줄이고 값의 재할당을 막기 위한 목적
- action.type 이 string 으로 추론되지 않고 'SEARCH_DREAM' 타입으로 추론됨
ReturnType<T>
- 함수 T의 반환 타입으로 구성된 타입을 만듬.
ReturnType<typeof signInAct>: 액션 생성 함수(signInAct)가 생성하는 액션 객체의 타입
declare function f1(): { a: number, b: string }
type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<(<T>() => T)>; // {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>; // number[]
type T4 = ReturnType<typeof f1>; // { a: number, b: string }
type T5 = ReturnType<any>; // any
type T6 = ReturnType<never>; // any
type T7 = ReturnType<string>; // Error
type T8 = ReturnType<Function>; // Error declare global
- 모듈 파일에서도 전역 참조가 가능한 선언 코드를 작성하고 싶을 때 사용한다 declare global로 기존에 정의되어있던 인터페이스를 확장
- redux devtools 사용시 Property 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' does not exist on type 'Window'. 메세지가 뜨기 때문에 Window 인터페이스를 확장해준다.
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
}
}
// 리덕스 개발자도구와 미들웨어를 사용하기 위해서 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 를 사용. (크롬 확장 프로그램에 작성되어있는 자바스크립트 함수) 만약에 리덕스 개발자도구가 설치되어있지 않다면 일반 compose 를 사용
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
Creative Developer