快捷導(dǎo)航

淺談熟悉C#如何轉(zhuǎn)TypeScript

更新時間：2026年05月10日 10:10:47 作者：向上的車輪

本文主要介紹了淺談熟悉C#如何轉(zhuǎn)TypeScript,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

方面	C#	TypeScript
運(yùn)行環(huán)境	編譯為 .NET IL，在 CLR 上運(yùn)行	編譯為 JavaScript，在瀏覽器或 Node.js 中運(yùn)行
類型系統(tǒng)	強(qiáng)制、嚴(yán)格（編譯失敗即錯誤）	可選 + 漸進(jìn)式（可寫純 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 步上手）

寫法習(xí)慣調(diào)整
- 用 const/let 代替 var
- 用 import/export 組織代碼
- 函數(shù)多用箭頭函數(shù) () => {}
善用 TS 的“超能力”
- 接口 (interface) 定義對象形狀（比 C# 更靈活）
- 聯(lián)合類型：string | number
- 類型推斷強(qiáng)大，很多時候不用顯式寫類型
記住：TS ≠ 新語言，而是“帶類型的 JS”
- 所有 JS 語法都合法
- 你的 C# 架構(gòu)思維（SOLID、分層等）完全適用
- 差別主要在標(biāo)準(zhǔn)庫和運(yùn)行時 API（比如發(fā) HTTP 請求用 fetch 而不是 HttpClient）

?? 一句話總結(jié)：

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

你已具備 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;
}

// 或表達(dá)式體
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;
// 返回類型通?？墒÷裕═S 能推斷）
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); // 安全訪問
}

?? 強(qiáng)烈建議在 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