在上一篇文章有稍微提到建立專案時，可以選擇 JavaScript (JS) 或 TypeScript (TS) ，這篇主要會介紹兩者的差異，以及如何去做選擇、使用

比較

語法差異：型別註解

JavaScript

//變數
let age = 20;
let name = "苦力怕";

//函式
function add(a, b) {
  return a + b;
}

//props元件
function MyComponent({ user }) {
   return <p>{user.name} is {user.age}</p>
}

TypeScript

//變數
let age: number = 20;
let name: string = '苦力怕';

//函式
function add(a: number, b: number): number {
  return a + b;
}

//props元件
interface User {
  name: string;
  age: number;
}

function MyComponent({ user }: { user: User }) {
   return <p>{user.name} is {user.age}</p>
}

總結

• 變數：JavaScript 沒有限制型別，TypeScript 要指定型別（number, string … ）
• 函式：JavaScript 的參數型別自由，TypeScript 可指定參數與回傳值型別
• props：JavaScript 直接取值，TypeScript 可用 interface 定義物件的介面

TypeScript專屬：interface

// **定義 User 物件的介面**
interface User {
  name: string;
  age: number;
}

// **定義 props 的介面**
function MyComponent({ user }: { user: User }) {
  return (
    <div>
      <h2>姓名: {user.name}</h2>
      <p>年齡: {user.age}</p>
    </div>
  );
}

總結

在 React 中使用 interface 定義 props，可以確保型別正確，也能讓程式碼更清楚且能重複使用

結論

• TypeScript = JavaScript + 型別
• TypeScript 比 JavaScript 需要多寫上型別註解，但兩者程式碼大致上差異不大，且在 TypeScript 中，這些型別能在編譯時，幫助檢查錯誤、提升程式碼可讀性與維護性
• 選擇 TS 或 JS 這兩者哪一個，取決於自己的需求（如專案規模、是否長期維護等考量）