ReactJS中使用TypeScript的方法

function greet(userName: string): string {
  return `Hello, ${user.name}! You are ${user.age} years old.`;
}

type Animal = {
  name: string;
  species: string;
};
type Loggable = {
  log(): void;
};
type LoggableAnimal = Animal & Loggable; //合并
const dog: LoggableAnimal = {
  name: "Buddy",
  species: "Canine",
  log() {
    console.log(`${this.name} is a ${this.species}`);
  }
};

interface Person {
    name: string;
    age: number;
    introduce(): string;
}
class Student implements Person {
    name: string;
    age: number;
    course: string;
    constructor(name: string, age: number, course: string) {
        this.name = name;
        this.age = age;
        this.course = course;
    }
    introduce(): string {
        return `Hi, I'm ${this.name}, and I'm ${this.age} years old. I study ${this.course}.`;
    }
}

class Animal<T> {
    name: string; // Regular property for the animal's name
    animation: T;  // Generic property for the animal's animation
    constructor(name: string, animation: T) {
        this.name = name;
        this.animation = animation;
    }
    animate(): void {
        console.log(`The ${this.name} starts to: ${this.animation}`);
    }
}

#方法泛型
function createPair<S, T>(v1: S, v2: T): [S, T] {
  return [v1, v2];
}
console.log(createPair<string, number>('hello', 42)); // ['hello', 42]
#类型泛型
type Wrapped<T> = { value: T };
const wrappedValue: Wrapped<number> = { value: 10 };

function MyButton({ title }: { title: string }) {
  return (
    <button>{title}</button>
  );
}
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton title="I'm a button" />
    </div>
  );
}

interface MyButtonProps {
  /** The text to display inside the button */
  title: string;
  /** Whether the button can be interacted with */
  disabled: boolean;
}
function MyButton({ title, disabled }: MyButtonProps) {
  return (
    <button disabled={disabled}>{title}</button>
  );
}

#自动解析为 bool
const [enabled, setEnabled] = useState(false);
#指定类型为Status
type Status = "idle" | "loading" | "success" | "error";
const [status, setStatus] = useState<Status>("idle");

export default function Form() {
  const [value, setValue] = useState("Change me");
  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setValue(event.currentTarget.value);
  }
  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>Value: {value}</p>
    </>
  );
}