Marsen's Blog typescript_string_intersection_trick

components_Hero.tsx

import { HeroProps } from "@/types/HeroProps";

export const Hero = ({ race,name }: HeroProps) => {
  return (
    <h1>Hero: {name} is {race}</h1>
  );
};

components_HeroDisplay.tsx

// src/components/HeroDisplay.tsx

import React from 'react';
import { Hero } from '../components/hero'; // 引入 Hero 型別

const HeroDisplay = () => {
  return (
    <div>
      <Hero name="alice" race="human" />
      <Hero name="mark" race="demon" />
      <Hero name="grace" race="" />
    </div>
  );
};

export default HeroDisplay;

types_HeroProps

//type Race = 'human' | 'demon' | string;
type Race = 'human' | 'demon' | (string & {});
export type HeroProps = {
  name: string;
  race: Race;
}

React 專案資料結構