一、TS簡介
TypeScript，簡稱TS，是微軟開發的開源編程語言。它是JavaScript的超集，意味著任何有效的JavaScript代碼都是有效的TypeScript代碼。TS就像是在JS的基礎上加入了類、介面、泛型等面向對象的特性。而這些特性使得TS在開發大型項目時具有更好的可讀性、可維護性、可擴展性。事實上，大型項目完全可以用TS來代替JS。目前，Angular就是基於TS開發的。
相較與JS，TS的學習成本略高，因為要掌握額外的面向對象特性以及類型的概念。但學會TS，會使得你的代碼更加簡潔、安全，並且提升團隊的協作效率。所以推薦開發者學習TS。
二、TS的環境配置
要學習TS，首先需要搭建開發環境。
1. 安裝Node.js
TS需要依賴Node.js環境，所以需要先下載並安裝Node.js。可以在Node.js官網下載最新版本：https://nodejs.org/zh-cn/。下載完成後，執行以下命令，檢查Node.js是否安裝成功：
node -v
輸出Node.js版本號即表示安裝成功。
2. 安裝TypeScript
執行以下命令，安裝TS：
npm install -g typescript
全局安裝TS後，通過以下命令查看版本是否安裝成功：
tsc -v
輸出當前TypeScript版本信息即表示安裝成功。
三、TS的基本語法和特性
以下是TS的基本語法和特性：
1. 類型推斷
如果變數有初始化值，TypeScript通過變數的值自動推斷變數的類型：
let str = 'hello'; //自動識別變數類型為string
let num = 666; //自動識別變數類型為number
let flag = true; //自動識別變數類型為boolean
2. 顯式聲明
除了類型推斷，還可以顯式聲明變數的類型：
let str: string = 'hello'; //顯式聲明變數類型為string
let num: number = 666; //顯式聲明變數類型為number
let flag: boolean = true; //顯式聲明變數類型為boolean
3. 介面
TS中的介面定義了一個代碼約定，使得不同的組件可以協同工作。介面就像是一個合同，定義了「必須」提供哪些屬性或方法，以及對應的類型。如下面定義了一個Person介面：
interface Person {
name: string;
age: number;
}
let person: Person = {
name: 'Mark',
age: 18
};
這裡定義了一個Person介面，約定了它包含了name和age兩個屬性，並且分別對應string和number類型。然後通過將這個介面作為類型註解來聲明一個person對象，表示該對象必須包含name和age屬性，並且屬性值符合類型約定。否則，將會編譯出錯。
4. 類和繼承
定義類的方式與JavaScript基本一致，只是可以使用extends關鍵字實現繼承：
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0) {
console.log(`${this.name} moved ${distance}`);
}
}
class Snake extends Animal {
constructor(name: string) {
super(name);
}
move(distance: number = 5) {
console.log("Snake is sliding...");
super.move(distance);
}
}
let snake = new Snake("Python");
snake.move();
這裡定義了一個Animal類，包含了name和move方法。然後通過extends關鍵字實現了Snake類對Animal類的繼承。Snake類重寫了move方法，並且通過super.move()調用了父類的move方法。
5. 泛型
泛型提供了一種定義函數、類和介面的方式，使得它們能夠適用於多種數據類型，從而實現代碼重用。下面是一個泛型函數的示例：
function identity(arg: T): T {
return arg;
}
let output1 = identity("MyString"); //T指定為string類型
let output2 = identity(666); //T指定為number類型
函數名identity後面的<T>表示該函數使用泛型類型T。當調用該函數時，需要在函數名後面通過<T>來指定T的具體類型。
四、帶有TS的React項目（示例代碼）
以下是一個使用TypeScript的簡單React項目示例：
1. 安裝必要的庫文件
npm create react-app my-app --template typescript
cd my-app
npm start
2. App.tsx組件代碼示例
import React, {useState} from 'react';
interface Props {
name: string;
}
const App: React.FC = ({name}) => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<h1>Hello, {name}!</h1>
<p>You clicked {count} times</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};
export default App;
這裡定義了一個App React組件，組件的Props是一個name屬性，表示需要傳遞一個名字參數。useState是React Hooks的一個方法，用於聲明state變數和setter函數。這裡的useState定義了一個number類型的count變數和與之對應的setCount方法。然後定義了一個handleClick函數，用於處理點擊事件，使得count加1。最後返回了一個包含h1、p、button等React元素的div元素，並綁定了相關的事件處理。
3. index.tsx文件代碼示例
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<App name="Alice"/>
</React.StrictMode>,
document.getElementById('root')
);
這裡的index.tsx文件是React項目的入口文件，通過ReactDOM.render()方法將App組件渲染到指定的HTML節點上（即id為root的div元素）。
五、總結
TS作為JavaScript的超集，對開發者來說是一個很好的選擇。TS有更多的類型控制和面向對象特性，使得代碼更具可讀性、可維護性和可擴展性。上述示例演示了如何在React項目中使用TS，但事實上，TS還有更廣泛的應用，如Node.js伺服器端開發、Angular項目開發等。在實際項目中，應該根據需求進行深入學習和實踐。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/192510.html
微信掃一掃 
支付寶掃一掃 