实战应用

import React from 'react';

interface Props {
  name: string;
  age?: number;
  onUpdate?: (name: string) => void;
}

const User: React.FC<Props> = ({ name, age, onUpdate }) => {
  return (
    <div>
      <h1>{name}</h1>
      {age && <p>年龄: {age}</p>}
    </div>
  );
};

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
}

function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    fetchUsers().then(data => {
      setUsers(data);
      setLoading(false);
    });
  }, []);

  return <div>{/* ... */}</div>;
}

function Form() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log('clicked');
  };

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'User',
  props: {
    name: {
      type: String,
      required: true
    },
    age: Number
  },
  setup(props) {
    const count = ref<number>(0);
    
    return {
      count
    };
  }
});

import { ref, computed, Ref } from 'vue';

interface User {
  name: string;
  age: number;
}

export function useUser() {
  const user = ref<User | null>(null);
  const isAdult = computed(() => user.value && user.value.age >= 18);

  const fetchUser = async () => {
    const data = await fetch('/api/user').then(r => r.json());
    user.value = data;
  };

  return {
    user,
    isAdult,
    fetchUser
  };
}

import express, { Request, Response } from 'express';

const app = express();

interface User {
  id: number;
  name: string;
}

app.get('/users', (req: Request, res: Response) => {
  const users: User[] = [
    { id: 1, name: 'John' }
  ];
  res.json(users);
});

app.listen(3000);

// types.ts
export interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}

export interface User {
  id: number;
  name: string;
  email: string;
}

// api.ts
import { ApiResponse, User } from './types';

async function getUser(id: number): Promise<ApiResponse<User>> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}