当前位置：首页 > news >正文

【TypeScript】TypeScript的应用实例

news 来源：原创 2025/6/9 17:19:30

一、TypeScript 简介

二、快速开始

1. 安装 TypeScript

2. 编写第一个 TypeScript 文件

3. 编译并运行

三、TypeScript基础

四、TypeScript 配置（tsconfig.json）

五、在 React 框架中使用

六、常见问题

Q1: TypeScript 和 JavaScript 有什么区别？

Q2: 如何处理第三方库没有类型定义？

Q3: 如何逐步迁移 JavaScript 项目到 TypeScript？

七、应用

1.前端应用

1.类型安全的组件Props

2. 状态管理（Redux + TypeScript）

2.后端应用

1.类型安全的Express路由

2. 数据库操作（TypeORM + TypeScript）

3.通用工具开发

1. 类型安全的配置管理

2.泛型工具函数

4.高级类型操作

1.类型守卫（TypeGuard）

2.条件类型与映射类型

5。测试与调试

1.类型安全的测试（Jest + TypeScript）

6.常见场景解决方案

1.处理第三方库无类型定义

2.动态属性对象

7.资源推荐

一、TypeScript 简介

是什么：TypeScript 是 JavaScript 的超集，添加了静态类型系统。

优势：

类型检查：在编码阶段发现潜在错误。

更好的代码提示：IDE 智能补全。

适合大型项目：代码可维护性高。

环境要求：Node.js（建议 v14+）

二、快速开始

1. 安装 TypeScript

npm install -g typescript  # 全局安装编译器
tsc --version             # 查看版本

2. 编写第一个 TypeScript 文件

新建 hello.ts：

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}
greet("World");

3. 编译并运行

tsc hello.ts    # 生成 hello.js
node hello.js   # 输出 "Hello, World!"

三、TypeScript基础

本文在此简单介绍TypeScript相关基础，关于TypeScript更详细基础知识点可观看博主前端基础的 TypeScript相关博文。

1.基础类型

let isDone: boolean = false;
let count: number = 42;
let name: string = "Alice";

// 数组
let list: number[] = [1, 2, 3];
let words: Array<string> = ["hello", "world"];

// 元组（固定长度和类型）
let tuple: [string, number] = ["Alice", 30];

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

// any 和 unknown
let notSure: any = 4;
notSure = "maybe a string";

// void（函数无返回值）
function log(): void {
  console.log("No return");
}

2.接口（Interface）

定义对象的结构

interface User {
  name: string;
  age: number;
  email?: string;  // 可选属性
}

function printUser(user: User): void {
  console.log(`Name: ${user.name}, Age: ${user.age}`);
}

const alice: User = { name: "Alice", age: 30 };
printUser(alice);

3.类（class）

面向对象编程支持

class Animal {
  private name: string;  // 私有属性

  constructor(name: string) {
    this.name = name;
  }

  public move(distance: number = 0): void {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

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

const dog = new Dog("Buddy");
dog.move(10);  // 输出 "Buddy moved 10m."
dog.bark();

4.函数类型

定义函数参数和返回值的类型

// 函数类型注解
type AddFunc = (a: number, b: number) => number;

const add: AddFunc = (a, b) => a + b;
console.log(add(2, 3));  // 5

// 可选参数和默认参数
function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}!`;
}
console.log(greet("Alice"));  // "Hello, Alice!"

5.泛型（Generics）

编写可复用的类型安全代码

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>("hello");  // 显式指定类型
let output2 = identity(42);             // 类型推断为 number

// 泛型接口
interface KeyValuePair<K, V> {
  key: K;
  value: V;
}
const pair: KeyValuePair<number, string> = { key: 1, value: "Apple" };

6.联合类型与类型守卫

处理多种可能得类型

// 联合类型
type ID = string | number;

function printId(id: ID) {
  if (typeof id === "string") {
    console.log(`ID is a string: ${id.toUpperCase()}`);
  } else {
    console.log(`ID is a number: ${id.toFixed(2)}`);
  }
}

printId("abc123");  // "ID is a string: ABC123"
printId(3.1415);    // "ID is a number: 3.14"