React + Typescript领域初学者的常见问题和技巧(最新)

const NAME = {
  HOGE: "hoge",
  FUGA: "fuga"
} as const;
keyof typeof NAME
// => "HOGE" | "FUGA"

typeof NAME[keyof typeof NAME]
// => "hoge" | "fuga"

const { hoge, piyo } = router.query as {
  hoge: string;
  piyo: string;
};

const { hoge, piyo } = router.query as unknown as {
  hoge: number;
  piyo: number;
};

type ExtendsProps = TextFieldProps & {
  hoge: number;
};

type Props = {
  name: TextFieldProps["name"];
};

// false, undefined, null, NaN, 0などのときは以下のエラーログを出力する
if (!hoge) {
  console.error("hoge がありません");
}
console.log(hoge);

const HogeComponent = ({ hoge }) => {
  return <div>{hoge || "HOGE"}</div>;
};

const a1 = false || "hoge"; // f || t returns "hoge"
const a2 = "hoge" || false; // t || f returns "hoge"

const HogeComponent = ({ loading, hoge }) => {
  return (
    <>
      {loading && <Loading />}
      <Typography>{hoge}</Typography>
    </>
  );
};

const piyoList = userList?.map((user) => ({
  hoge: user?.hoge ?? "hoge",
  fuga: user?.fuga ?? "fuga",
  piyo: user?.piyo ?? "piyo",
}));

const WidthComponent = ({ width }) => {
  return <div style={{ minWidth: width || "400px" }}>横幅をきめる</div> };

const productName = product?.getName?.();

const productName = product?.getName ? product.getName() : undefined;

const user = userList?.[3]?.hoge ?? "HOGE"

const userList = [
  {hoge:"hoge1",piyo:"piyo1"},
  {hoge:"hoge2",piyo:"piyo2"},
  {hoge:"hoge3",piyo:"piyo3"},
]
const user = userList?.[3]?.hoge ?? "HOGE"
console.log(user); // 何が出るかな？

const mergeString = (hoge: string, fuga: string, piyo: string) =>
  `${hoge}_${fuga}_${piyo}`;

const mergeString = (hoge: string, fuga: string, piyo: string) => {
  return `${hoge}_${fuga}_${piyo}`;
};

const hoge = [1, 2, 3];
const fuga = [4, 5, 6];
const piyo = [...hoge, ...fuga]; // => [1,2,3,4,5,6]

const defaultValue = {
  hoge: "hoge",
  fuga: "fuga",
  piyo: "piyo",
};
const inputValue = {
  hoge: "hogehoge",
  fuga: "fugafuga",
};
const result = { ...defaultValue, ...inputValue };
// => {hoge: "hogehoge", fuga: "fugafuga", piyo: "piyo"}

type HogeProps = {
  hoge: string;
  piyo: string;
};
export const Hoge: React.VFC<HogeProps> = (props) => {
  return (
    <>
      <ChildComponent {...props} />     </>   );
};

type Response = {
  loading:boolean;
  data: unknown;
}
const getResponse = ():Response => ({
  loading: true;
  data : {
    hoge: "hoge";
    fuga: "fuga";
  }
})
const {data, loading} = getResponse(); // 通常の分割代入
// 別名の分割代入
const {data: data2, loading: loading2} = getResponse()

type APIResponse = {
  code: string;
  data: {
    hoge: string;
    fuga?: string;
    piyo?: string;
  }[];
};

const {
  code,
  data: [{ hoge, fuga, piyo }],
} = res; // res は APIResponse型とする