知识库

Appearance

Return to top
On this page

TypeScript 基础概念

TypeScript 是 JavaScript 的超集，添加了可选的静态类型。它编译为纯 JavaScript，可以在任何浏览器、服务器或系统上运行。

什么是 TypeScript

TypeScript 是由 Microsoft 开发的开源编程语言，旨在解决 JavaScript 在大型项目中的局限性。它提供了一种更安全、更可维护的开发方式。

核心特性

  • 静态类型检查：在编译时检测类型错误
  • 类型推断：自动推断变量类型
  • 面向对象编程：支持类、接口、继承等
  • 函数式编程：支持高阶函数、泛型等
  • 现代 JavaScript 特性：支持 ES6+ 特性

为什么使用 TypeScript

  • 提高代码质量和可维护性
  • 更好的 IDE 支持和自动补全
  • 更早发现错误（编译时而非运行时）
  • 更好的代码文档化
  • 适合大型项目开发

安装与设置

bash
# 全局安装 TypeScript
npm install -g typescript

# 或者在项目中安装
npm install --save-dev typescript

# 初始化 TypeScript 配置
npx tsc --init

基本类型

TypeScript 提供了 JavaScript 的所有基本类型，并添加了一些扩展：

typescript
// 布尔值
let isDone: boolean = false;

// 数字
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;

// 字符串
let color: string = "blue";

// 数组
let list: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

// 元组
let x: [string, number] = ["hello", 10];

// 枚举
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 任意类型
let notSure: any = 4;
notSure = "maybe a string";

// 空值
let unusable: void = undefined;

// Null 和 Undefined
let u: undefined = undefined;
let n: null = null;

// Never
function error(message: string): never {
    throw new Error(message);
}

// 对象
declare function create(o: object | null): void;
create({ prop: 0 });

变量声明

TypeScript 支持 ES6+ 的变量声明方式：

typescript
// 使用 let 和 const
let someValue: string = "hello";
const maxValue: number = 100;

// 解构
let input = [1, 2];
let [first, second] = input;

// 展开运算符
let defaults = { food: "spicy", price: "$10" };
let search = { ...defaults, food: "rich" };

函数

TypeScript 中的函数可以指定参数和返回值类型：

typescript
// 函数声明
function add(x: number, y: number): number {
    return x + y;
}

// 函数表达式
let myAdd: (x: number, y: number) => number = 
    function(x: number, y: number): number { return x + y; };

// 可选参数和默认参数
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + " " + lastName;
    } else {
        return firstName;
    }
}

// 剩余参数
function multiply(factor: number, ...values: number[]) {
    return values.map(x => x * factor);
}

小结

TypeScript 通过添加类型系统，为 JavaScript 提供了更好的开发体验。掌握这些基础概念是进一步学习 TypeScript 的关键。