JavaScript、TypeScript、JSX、TSX 教學
一、簡介
在現代前端開發中，JavaScript（簡稱 JS）與其超集合 TypeScript（簡稱 TS）是最常用的程式語言，而 JSX/TSX 則為了讓開發者更便利地在 React 中撰寫元件而誕生的語法擴充。本篇文章將分別介紹這四者的概念、特性與範例，幫助你快速上手。
二、JavaScript（.js）
1. 什麼是 JavaScript？
-
定義：一種動態、直譯式、弱型別的程式語言，主要在瀏覽器端執行，也可用於伺服器端（如 Node.js）。
-
特性：
-
動態型別：變數在執行時才決定型別。
-
單執行緒：採用事件回呼與非同步機制（Promise、async/await）來處理 I/O。
-
原型繼承：透過物件的 prototype 屬性實現繼承。
-
2. 基本語法範例
// 宣告變數
let name = 'Samuel';
const PI = 3.14159;
// 函式宣告
function greet(person) {
console.log(`Hello, ${person}!`);
}
// 非同步函式
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (err) {
console.error(err);
}
}
// 使用範例
greet(name);
三、TypeScript（.ts）
1. 什麼是 TypeScript？
-
定義：由 Microsoft 開發的 JavaScript 超集合，加入靜態型別檢查與最新 ECMAScript 功能編譯支援，最終編譯成純 JavaScript。
-
特性：
-
靜態型別：可在編譯時捕捉型別錯誤，提升開發穩定度。
-
介面（Interface）與型別別名（Type Alias）：定義物件結構與複雜型別。
-
豐富的編譯選項：可針對不同環境與 ECMAScript 目標做調整。
-
2. 設定與編譯
# 安裝 TypeScript
npm install -g typescript
# 產生 tsconfig.json（預設設定檔）
tsc --init
# 編譯所有 .ts 檔案
tsc
3. 型別範例
// 定義介面
interface User {
id: number;
name: string;
isAdmin?: boolean; // 可選屬性
}
// 泛型函式
function identity<T>(arg: T): T {
return arg;
}
// 使用範例
const user: User = { id: 1, name: 'Alice' };
const num = identity<number>(42);
四、JSX（.jsx）
1. 什麼是 JSX？
-
定義：JavaScript XML 的縮寫，是一種語法擴充，讓開發者在 JavaScript 檔案中書寫類似 HTML 的標記，用以描述 UI 元件結構。
-
使用場景：主要用於 React 開發，可讓標記與行為更緊密結合。
2. JSX 語法特性
-
標籤必須閉合：即使是單一元素也要自閉合
<img />。 -
屬性命名：採用駝峰式（camelCase），例如
className、onClick。 -
表達式插值：使用大括號
{}包裹 JavaScript 表達式。
3. 範例
import React from 'react';
function Hello({ name }) {
return (
<div className="greeting">
<h1>Hello, {name}!</h1>
<p>現在時間：{new Date().toLocaleTimeString()}</p>
</div>
);
}
export default Hello;
五、TSX（.tsx）
1. 什麼是 TSX？
-
定義：TypeScript 版本的 JSX，副檔名為
.tsx。在 TS 檔案中使用 JSX 語法，就必須用.tsx作為副檔名才能正確編譯。 -
差異：
-
必須搭配 TypeScript 編譯器。
-
可以在 JSX 標籤內直接使用已型別檢查的變數與介面。
-
2. TSX 範例
import React from 'react';
// 定義 Props 型別
interface HelloProps {
name: string;
}
const Hello: React.FC<HelloProps> = ({ name }) => {
return (
<div>
<h1>Hello, {name}!</h1>
</div>
);
};
export default Hello;
六、整合範例：React + TypeScript
// src/App.tsx
import React, { useState, useEffect } from 'react';
interface ClockProps {
locale?: string;
}
const Clock: React.FC<ClockProps> = ({ locale = 'zh-TW' }) => {
const [time, setTime] = useState<string>(
new Date().toLocaleTimeString(locale)
);
useEffect(() => {
const timer = setInterval(() => {
setTime(new Date().toLocaleTimeString(locale));
}, 1000);
return () => clearInterval(timer);
}, [locale]);
return <div>目前時間：{time}</div>;
};
export default function App() {
return (
<div>
<h2>React + TypeScript 範例</h2>
<Clock />
</div>
);
}
-
建立專案
npx create-react-app my-app --template typescript cd my-app npm start -
新增元件：將上述
Clock與App置於src/即可。
七、總結
-
JavaScript：動態、弱型別，網頁互動的基礎語言。
-
TypeScript：為 JavaScript 增加靜態型別檢查，提高大型專案的維護性與穩定性。
-
JSX：讓你在 JavaScript 中以類 HTML 語法撰寫 UI，最常見於 React。
-
TSX：結合 TypeScript 與 JSX 的語法副檔名，用於型別安全的 React 開發。
Flask (1)