4. React components

5. Vue components

Real-World Example

A React developer defined `interface UserCardProps { user: User; onDelete: (id: string) => void; }` and typed `function UserCard({user, onDelete}: UserCardProps)`. Copilot suggested a complete component body: avatar, name, delete button with onClick. With untyped props, Copilot would have guessed at structure.

Example Prompts / Commands / Code

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

// Type the function — Copilot suggestions improve:
function getUserSummary(user: User): string {
  // Copilot suggests:
  //   return `${user.name} <${user.email}>`;
}

// Async with types:
async function fetchUser(id: string): Promise<User> {
  // Copilot suggests fetch + parse + return:
  //   const res = await fetch(`/api/users/${id}`);
  //   if (!res.ok) throw new Error('Failed to fetch user');
  //   return res.json();
}

interface UserCardProps {
  user: User;
  onDelete: (id: string) => void;
}

function UserCard({ user, onDelete }: UserCardProps) {
  // Copilot suggests:
  //   return (
  //     <div className="user-card">
  //       <h3>{user.name}</h3>
  //       <p>{user.email}</p>
  //       <button onClick={() => onDelete(user.id)}>Delete</button>
  //     </div>
  //   );
}

Common Mistakes

• Using `any` everywhere — kills Copilot's type-awareness.
• Skipping JSDoc in JS files — fewer signals for Copilot.
• Not typing React props — Copilot guesses at structure.
• Forgetting async return types — Copilot may suggest sync patterns.

Best Practices

• Always type params and returns in TS.
• Use JSDoc in JS files for similar benefits.
• Define Props interfaces for React components.
• Type async returns as Promise.
• Use strict mode in tsconfig — more types = better Copilot.

Troubleshooting

Practical Exercise

Frequently Asked Questions

Further Reading

• Copilot with TypeScript

Official References

• Copilot in VS Code

Related lessons: BE-24, BE-25