Typescript와 React를 사용하면서 발견한 것들

Image credit @ellladee

이번 주에 저는 Typescript를 사용하여 React 앱에서 작업했으며 매우 유용한 몇 가지 발견을 했습니다. 이것은 Typescript를 사용하는 첫 번째 프로젝트 중 하나이며 지금까지 돌아가고 싶지 않습니다. 이러한 발견 중 일부는 일반적인 지식일 수 있지만 Typescript 초보자에게는 더 나은 코드를 작성하는 데 매우 유용합니다. 적어도 나를 위해. 그래서 더 이상 고민하지 않고 들어가 봅시다!

개체의 특정 키만 허용

이것은 개체에 추가할 수 있는 키를 제한하려는 경우에 매우 유용합니다. 예를 들어, 다른 개발자가 이벤트 리스너로 사용해야 하는 함수를 전달하도록 허용합니다. 그런 상황에서 개발자는 불쾌한 오류를 피하기 위해 유효한 이벤트 리스너만 전달하기를 원합니다.

type TListenerTypes = "onload" | "progress" | "error"
type TListeners = {
  [k in TListenerTypes]: Function
}

// Passes!
const listenerObj: TListeners = {
  onload: () => {}
}

// Error
const errorObj: TListeners = {
  a: "something", // wrong type
  progress: () => {},
  d: 10 // not in objectKeys type
}

// Improvement added by this comment (https://dev.to/theodesp/comment/bd1k)
type TListenerTypes = "onload" | "progress" | "error"

const x: Record<TListenerTypes, Function> = {
    a: "something", // wrong type
    progress: () => {},
    d: 10 // wrong type
};

동화책 이야기 분류하기

내가 작업 중인 프로젝트에서 storybook을 사용하여 구성 요소를 테스트하고 있습니다. 몇 가지 이야기를 추가하고 나면 이러한 이야기를 관련 그룹으로 분류할 방법이 필요하기 시작합니다. 다행히 이에 대한 해결책이 있습니다! 참고로 저는 스토리북을 충분히 추천할 수 없습니다. 구성 요소를 독립적으로 시각적으로 테스트하는 데 매우 유용합니다. 애드온의 힘으로 접근성 검사, 라이트/다크 모드 테스트 등을 수행할 수 있습니다.

// uncategorised
storiesOf("Button", module).add(...)

// categorised under "Form"
storiesOf("Form|Selectbox", module).add(...)

구성 요소를 소품으로 전달

이것은 React Router 을 사용하는 동안 사용자 지정 <Route> 구성 요소를 선언하려고 할 때 문제가 되었습니다. 구성 요소를 사용자 지정<Route>에 전달한 다음 구성 요소를 렌더링할 수 있는 방법이 필요했습니다. 이것은 놀랍게도 성가신 일이었습니다. 팁, 다른 모듈의 유형 정의를 볼 수 있다면 그렇게 하십시오! 나는 이것을 포함하여 기존 코드베이스에서 꽤 많은 솔루션을 찾았습니다.

import { ComponentType } from "react"
import { RouteProps } from "react-router-dom"

interface ICustomRoute extends RouteProps {
  // Allows you to pass in components and then render them
  component: ComponentType<any>
}

const CustomRoute = ({
  component: Component,
  ...rest
}: ICustomRoute) => (
  <Route
    {...rest}
    render={props => (
      <Component {...props} />
    )}
  />
)

기본 HTML 속성을 소품으로 허용

<Input /> 요소와 추가 <input /> 개체의 모든 속성을 허용해야 하는 theme 구성 요소를 만들고 싶다고 상상해 보십시오. 구성 요소에 대한 사용자 정의 정의를 생성하는 것을 막으려면 <input /> 요소의 사용 가능한 props를 확장하는 것이 훨씬 낫습니다. 할 수 있습니다!

import { HTMLAttributes } from "react"

type Theme = "light" | "dark"
interface IProps extends HTMLAttributes<HTMLInputElement> {
  // additional props if need
  theme: {
    variation: Theme
  }
}

// You might want to extract certain props and your custom props
// instead of just spreading all the props
// if you don't have additional props swap IProps for HTMLAttributes<HTMLInputElement>
const Input ({ theme, ...props }: IProps) => (
  <input
    {...props}
    className={`input input--${theme.variation}`}
  />
)

// Usage
<Input
  onChange={(e) => handle(e)}
  value={this.state.name}
  name="name"
  id="id"
  theme={{
    variation: "light"
  }}
/>

기기 방향 가져오기

이것은 실제로 Typescript 또는 React와 관련이 없지만 흥미로운 것으로 이어질 수 있습니다. 나는 이것이 매우 멋지지만 매우 쓸모없는 기능에 유용하다고 확실히 상상할 수 있습니다. 자세한 내용은 MDN 에서 읽으십시오.

// Check if it is supported
if (window.DeviceOrientationEvent) {
  window.addEventListener("deviceorientation", function(e) {
    console.log({
      x: e.alpha,
      y: e.beta,
      z: e.gamma
    })
  }, false)
}

마무리

매주 우리는 새로운 기술과 다양한 사고 방식을 배웁니다. 나는 누구에게나 당신이 배운 다양한 기술을 기록해 두는 것이 좋습니다. 작은 지식 기반을 만들 뿐만 아니라 진행 상황을 볼 때 더 많은 동기를 부여받을 수 있습니다.


제 글을 읽어주셔서 감사합니다. 정말 많은 의미가 있습니다! ❤️ 피드백이나 의견을 보내주세요. 저는 항상 개선을 찾고 의미 있는 토론을 하고 있습니다. 이 기사는 내 #myweekinjs 챌린지의 일부로 작성되었으며, 이에 대해 관심이 있는 경우 몇 가지 흥미로운 기사가 ​​있습니다.

👋 다음 시간까지!