快捷導航

C#轉(zhuǎn)TypeScript的完整指南

更新時間：2026年03月27日 08:22:41 作者：向上的車輪

本文對比了C#和TypeScript的異同,指出它們在變量類型、類與接口、泛型、異步編程等方面具有相似之處,同時也指出了TypeScript在運行環(huán)境、類型系統(tǒng)、基礎(chǔ)類型、空值處理等方面的差異,并給出了從C#轉(zhuǎn)向TypeScript的建議,強調(diào)C#經(jīng)驗可以直接遷移,需要的朋友可以參考下

相同點（你已掌握的優(yōu)勢）

特性	說明
靜態(tài)類型	TS 和 C# 都支持變量、參數(shù)、返回值的類型標注（如 `string`, `number` ≈ `string`, `int`）。
類與面向?qū)ο?/strong>	`class`、`interface`、`extends`（繼承）、`implements`（實現(xiàn)接口）語法高度相似。
泛型	都用 `<T>`，如 `List<T>`（C#） ↔ `Array<T>` 或 `T[]`（TS）。
訪問修飾符	`public`/`private`/`protected` 在 TS 中用于編譯期檢查（運行時無作用，但 IDE 支持好）。
async/await	異步編程模型幾乎一樣：C# 用 `Task<T>`，TS 用 `Promise<T>`。

關(guān)鍵差異（需注意）

方面	C#	TypeScript
運行環(huán)境	編譯為 .NET IL，在 CLR 上運行	編譯為 JavaScript，在瀏覽器或 Node.js 中運行
類型系統(tǒng)	強制、嚴格（編譯失敗即錯誤）	可選 + 漸進式（可寫純 JS，但推薦全類型）
基礎(chǔ)類型	`int`, `bool`, `DateTime` 等	基于 JS：`number`（無 int/float 區(qū)分）、`boolean`、`string`；無內(nèi)置日期類型（用 `Date` 對象）
空值處理	`null` + 可空類型 `int?`	`null` 和 `undefined` 并存；開啟 `strictNullChecks` 后類似 C# 可空引用
模塊化	`namespace` / 程序集	ES 模塊：`import { x } from './file'` / `export`（無 `namespace`）
變量聲明	`int x = 1;` 或 `var x = 1;`	必須用 `let` / `const`：`const x: number = 1;`
函數(shù)定義	`int Add(int a, int b) => a + b;`	`const add = (a: number, b: number): number => a + b;`

轉(zhuǎn)型建議（3 步上手）

寫法習慣調(diào)整

用 const/let 代替 var
用 import/export 組織代碼
函數(shù)多用箭頭函數(shù) () => {}

善用 TS 的“超能力”

接口 (interface) 定義對象形狀（比 C# 更靈活）
聯(lián)合類型：string | number
類型推斷強大，很多時候不用顯式寫類型

記住：TS ≠ 新語言，而是“帶類型的 JS”

所有 JS 語法都合法
你的 C# 架構(gòu)思維（SOLID、分層等）完全適用
差別主要在標準庫和運行時 API（比如發(fā) HTTP 請求用 fetch 而不是 HttpClient）

一句話總結(jié)：

TypeScript = C# 的類型系統(tǒng) + JavaScript 的靈活性 + 瀏覽器/Node.js 運行時。

你已具備 80% 的核心能力，只需適應(yīng) JS 生態(tài)和少量語法差異，就能高效開發(fā)！

C# 與 TypeScript 的典型代碼對比

1.變量聲明

// C#
string name = "Alice";
int age = 30;
var isActive = true; // 類型推斷

// TypeScript
const name: string = "Alice";
let age: number = 30;
const isActive = true; // 類型自動推斷為 boolean

? 建議：TS 中優(yōu)先用 const（不可變）和 let（可變），避免 var。

2.函數(shù)定義

// C#
public int Add(int a, int b)
{
    return a + b;
}

// 或表達式體
public int Multiply(int a, int b) => a * b;

// TypeScript
function add(a: number, b: number): number {
    return a + b;
}
// 或箭頭函數(shù)（更常見）
const multiply = (a: number, b: number): number => a * b;
// 返回類型通常可省略（TS 能推斷）
const subtract = (a: number, b: number) => a - b;

3.類與繼承

// C#
public class Animal
{
    public string Name { get; set; }
    
    public Animal(string name) => Name = name;
    
    public virtual void Speak() => Console.WriteLine("...");
}

public class Dog : Animal
{
    public Dog(string name) : base(name) { }
    
    public override void Speak() => Console.WriteLine("Woof!");
}

// TypeScript
class Animal {
    constructor(public name: string) {} // 自動創(chuàng)建并賦值 this.name
    speak(): void {
        console.log("...");
    }
}
class Dog extends Animal {
    speak(): void {
        console.log("Woof!");
    }
}

? TS 的 constructor(public name: string) 是語法糖，等價于 C# 的自動屬性初始化。

4.接口（Interface）

// C#
public interface IPerson
{
    string Name { get; set; }
    int Age { get; }
    void Greet();
}

// TypeScript
interface Person {
    name: string;
    readonly age: number; // 只讀 ≈ C# 的 { get; }
    greet(): void;
}

TS 接口用于描述對象形狀，不限于類實現(xiàn)，也可用于普通對象：

const person: Person = { name: "Bob", age: 25, greet() { console.log("Hi"); } };

5.泛型（Generics）

// C#
public class Box<T>
{
    public T Value { get; set; }
    
    public Box(T value) => Value = value;
}

var numberBox = new Box<int>(42);

// TypeScript
class Box<T> {
    constructor(public value: T) {}
}
const numberBox = new Box<number>(42);
// 或讓 TS 推斷
const stringBox = new Box("hello");

6.異步編程

// C#
public async Task<string> FetchDataAsync()
{
    using var client = new HttpClient();
    return await client.GetStringAsync("https://api.example.com/data");
}

// TypeScript（瀏覽器或 Node.js 環(huán)境）
async function fetchData(): Promise<string> {
    const response = await fetch("https://api.example.com/data");
    return await response.text();
}
// 或使用 axios（需安裝）
import axios from 'axios';
async function fetchData2(): Promise<string> {
    const res = await axios.get<string>("https://api.example.com/data");
    return res.data;
}

? 概念一致：async/await + 容器類型（Task<T> ↔ Promise<T>）

7.空值處理（啟用 strict 模式）

// C#
string? maybeName = GetName(); // 可空引用類型（C# 8+）
if (maybeName != null)
    Console.WriteLine(maybeName.Length);

// TypeScript（tsconfig.json 中開啟 "strictNullChecks": true）
function getName(): string | null {
    return Math.random() > 0.5 ? "Alice" : null;
}
const maybeName = getName();
if (maybeName !== null) {
    console.log(maybeName.length); // 安全訪問
}

強烈建議在 tsconfig.json 中啟用 strict: true，獲得接近 C# 的空安全體驗。

總結(jié)：你的 C# 經(jīng)驗可以直接遷移！

C# 概念	TypeScript 對應(yīng)
`class`	`class`（幾乎一樣）
`interface`	`interface`（更靈活）
`List<T>`	`T[]` 或 `Array<T>`
`Task<T>`	`Promise<T>`
`namespace`	不用 → 改用 `import/export`
`HttpClient`	`fetch` 或 `axios`