Skip to main content

TypeScript 详解

TypeScript 是 JavaScript 的超集，添加了类型系统和编译时检查功能，可以在开发阶段捕捉错误，提升代码可维护性和开发效率。

🔍 TypeScript 与 JavaScript 的本质区别​

特性JavaScriptTypeScript
类型检查无✅ 静态类型检查
编译阶段无✅ 编译成 JavaScript
面向对象支持基础支持✅ 接口、泛型、装饰器支持更完善
IDE 支持基本补全✅ 强类型提示与重构
tip

TS 不替代 JS，而是 JS 的超集。最终所有 TS 代码都会编译成原生 JavaScript。

📑 基础语法示例​

let name: string = "张三";
let age: number = 25;
let isAdmin: boolean = true;

function greet(user: string): string {
  return `Hello, ${user}`;
}

🎯 常用类型定义​

// 数组
let list: number[] = [1, 2, 3];

// 元组
let tuple: [string, number] = ["年龄", 18];

// 枚举
enum Role {
  Admin,
  User,
  Guest
}

// 任意类型
let something: any = "string";
something = 5;

🧱 接口与类型别名​

interface User {
  name: string;
  age: number;
  isAdmin?: boolean;
}

const user: User = {
  name: "李四",
  age: 30
};
type Point = {
  x: number;
  y: number;
};
接口和类型别名的区别
  • interface 支持继承与合并声明
  • type 更适合联合类型、交叉类型等表达式组合

🌀 泛型与函数定义​

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

const result = identity<string>("Hello");

🔁 map/filter 等高阶函数用法​

const nums: number[] = [1, 2, 3];
const squared = nums.map(n => n * n);
// [1, 4, 9]

📦 模块化与导入导出​

// utils.ts
export function sum(a: number, b: number): number {
  return a + b;
}
// main.ts
import { sum } from './utils';
console.log(sum(2, 3));

🧠 常见配置（tsconfig.json）​

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

✅ 总结​

  • TypeScript 提供静态类型支持，提高代码质量和协作效率；
  • 所有 JavaScript 都是合法的 TypeScript；
  • 利用接口、泛型、类型别名可以构建强健的业务模型；
  • 可无缝对接 React、Vue、Node 等技术栈。

📚 推荐资源​