TypeScriptの型割り当てエラー

2019-11-10

TypeScriptで型宣言をする際、適当にstringやnumberのようなレベルで宣言していると、外部モジュールを使った際にエラーが出ることがある。

import * as React from "react";
import Slide from "@material-ui/core/Slide";
...

interface HideOnScrollProps {
  children: React.FC;
  direction: string;
}

export const HideOnScroll: React.FC<HideOnScrollProps> = ({ children, direction }) => {
  const trigger = useScrollTrigger({ target: undefined });
  return (
    <Slide appear={false} direction={direction} in={!trigger}> // <- directionがエラー
      {children}
    </Slide>
  );
}

型 'string' を型 '"left" | "right" | "up" | "down"' に割り当てることはできません。

実際にMaterial-UIのSlide.d.tsを覗いてみると、directionという変数がstringの限定的な型で宣言されていることがわかる。

export interface SlideProps extends TransitionProps {
  direction: 'left' | 'right' | 'up' | 'down';
  ref?: React.Ref<unknown>;
  theme?: Theme;
}

declare const Slide: React.ComponentType<SlideProps>;

export default Slide;

こうした場合、このattributeに入れる変数がstringなだけでは不十分で、型を満たさない値が入らないように型宣言しなくてはならない。

import * as React from "react";
import Slide from "@material-ui/core/Slide";
...

interface HideOnScrollProps {
  children: React.FC;
  direction: 'up' | 'down';
}

export const HideOnScroll: React.FC<HideOnScrollProps> = ({ children, direction }) => {
  const trigger = useScrollTrigger({ target: undefined });
  return (
    <Slide appear={false} direction={direction} in={!trigger}>
      {children}
    </Slide>
  );
}