typescript语法大全

以下是 TypeScript 语法体系的系统梳理，涵盖基础到高级特性，结合代码示例和关键应用场景，帮助开发者快速掌握核心语法规则。

🔧 一、基础类型与变量声明

1. 基本类型

   • 原始类型：string、number、boolean、null、undefined、symbol

     let name: string = "Alice";
     let age: number = 30;
     let isActive: boolean = true;
     let empty: null = null;
     

   • 特殊类型：

     • any：关闭类型检查（慎用）

     • void：函数无返回值（如 function warn(): void { console.log("Warning"); }）

     • never：永不返回值的函数（如抛出异常）

2. 复合类型

   • 数组：number[] 或 Array<number>

   • 元组：固定类型序列 let user: [string, number] = ["Alice", 30]

   • 枚举：

     enum Status { Pending = "PENDING", Completed = "COMPLETED" }
     let taskStatus: Status = Status.Pending; // "PENDING"
     

   • 对象：

     type Point = { x: number; y: number };
     let p: Point = { x: 10, y: 20 };
     

🔄 二、函数与作用域

1. 函数定义

   • 显式标注参数和返回类型：

     function add(x: number, y: number): number {
         return x + y;
     }
     

   • 可选/默认参数：

     function greet(name: string = "Guest", age?: number): string {
         return `Hello, ${name}`;
     }
     

   • 剩余参数：function sum(...nums: number[]): number { ... }

2. 作用域与闭包

   • 使用 let/const 替代 var（块级作用域）

   • 箭头函数保留外层 this：

     const counter = {
         count: 0,
         increment: () => { this.count++ } // 错误！应改用普通函数
     };
     

🧩 三、面向对象编程

1. 类与继承

   • 封装与访问修饰符：public、private、protected

     class Animal {
         constructor(private name: string) {}
         move(distance: number) {
             console.log(`${this.name} moved ${distance}m`);
         }
     }
     

   • 继承与多态：

     class Dog extends Animal {
         bark() { console.log("Woof!") }
     }
     

2. 接口与抽象类

   • 接口：定义对象结构（可扩展）

     interface User {
         id: number;
         name: string;
     }
     

   • 抽象类：强制子类实现方法

     abstract class Shape {
         abstract area(): number;
     }
     

🧠 四、高级类型系统

1. 联合与交叉类型

   • 联合类型：let id: number | string

   • 交叉类型：合并对象 type Admin = User & { role: string }

2. 泛型

   • 函数泛型：

     function identity<T>(arg: T): T { return arg; }
     

   • 泛型约束：

     function logLength<T extends { length: number }>(obj: T) {
         console.log(obj.length);
     }
     

3. 类型操作工具

   • keyof：获取对象键的联合类型 type Keys = keyof User

   • 映射类型：动态生成类型

     type Readonly<T> = { readonly [P in keyof T]: T[P] };
     

   • 条件类型：

     type IsString<T> = T extends string ? true : false;
     

4. 模板字面量类型

   type Event = "click" | "hover";
   type Handler = `on${Capitalize<Event>}`; // "onClick" | "onHover"
   

⚙️ 五、实用类型与工具

1. 内置工具类型

   • Partial<T>：所有属性变为可选

   • Required<T>：所有属性变为必填

   • Pick<T, K>：提取部分属性 type UserName = Pick<User, "name">

   • Omit<T, K>：排除部分属性

2. 类型守卫

   • typeof/instanceof：缩小类型范围

     if (typeof val === "string") { ... }
     

   • 自定义守卫：

     function isFish(pet: Fish | Bird): pet is Fish {
         return (pet as Fish).swim !== undefined;
     }
     

📦 六、模块与异步

1. 模块化

   • 导出：export function add() { ... }

   • 导入：import { add } from "./math"

2. 异步处理

   • Promise：

     function fetchData(): Promise<string> {
         return new Promise(resolve => resolve("Data"));
     }
     

   • async/await：

     async function load() {
         const data = await fetchData();
     }
     

💡 七、进阶技巧

1. 类型断言：显式指定类型

   let str = (someValue as string).length;
   

2. 装饰器（元编程）：

   function LogMethod(target: any, key: string) {
       console.log(`Method ${key} called`);
   }
   class MyClass { @LogMethod myMethod() {} }
   

3. 枚举与常量断言：

   const Colors = { Red: "RED", Blue: "BLUE" } as const;
   type Color = (typeof Colors)[keyof typeof Colors]; // "RED" | "BLUE"
   

🚀 总结：TypeScript 核心价值

• 类型安全：减少运行时错误，提升代码健壮性。

• 开发体验：IDE 智能提示与重构支持。

• 渐进式：可逐步迁移 JavaScript 项目。

• 工程化：适用于大型项目与团队协作。

💎 推荐工具链：

• 编译配置：tsconfig.json 启用 strict: true

• 静态检查：ESLint + @typescript-eslint

• 演练场：TypeScript Playground

掌握以上语法体系，可高效构建类型安全的现代前端/Node.js 应用！