深入浅出 TypeScript：从入门到进阶

前端切图仔001

已于 2025-02-07 16:55:42 修改

阅读量746

点赞数 10

CC 4.0 BY-SA版权

文章标签： typescript javascript 前端

于 2025-02-07 16:51:38 首次发布

本文链接：https://blog.csdn.net/m0_62364592/article/details/145497744

本文将带你全面了解TypeScript，从基础概念到高级特性，再到实战应用。

前言

为什么要学TypeScript？

在JavaScript的世界里，我们经常会遇到这些问题：

运行时才能发现类型错误
难以进行大规模项目开发
IDE支持有限
重构代价高

TypeScript正是为解决这些问题而生。它不仅能让我们在开发阶段就发现潜在问题，还能提供更好的开发体验。

TypeScript的优势

静态类型检查
更好的IDE支持（代码补全、重构工具）
提前发现错误
更容易维护大型项目
支持最新的JavaScript特性

TypeScript简介

什么是TypeScript？

TypeScript是JavaScript的超集，它扩展了JavaScript，添加了可选的静态类型和基于类的面向对象编程。

TypeScript vs JavaScript

// JavaScript
function add(x, y) {
  return x + y;
}

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

环境搭建

安装TypeScript

# 全局安装
npm install -g typescript

# 查看版本
tsc --version

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

配置tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

开发工具推荐

VSCode
WebStorm
Sublime Text + TypeScript插件

基础类型系统

基础类型

// 字符串类型
let name: string = "Tom";

// 数字类型
let age: number = 25;

// 布尔类型
let isStudent: boolean = true;

// 数组
let list: number[] = [1, 2, 3];
let names: Array<string> = ["Tom", "Jerry"];

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

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

// void
function warnUser(): void {
  console.log("Warning!");
}

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

接口

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

// 实现接口
class Employee implements User {
  name: string;
  age: number;
  readonly id: number;

  constructor(name: string, age: number, id: number) {
    this.name = name;
    this.age = age;
    this.id = id;
  }
}

进阶类型使用

联合类型与交叉类型

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

// 交叉类型
interface BusinessPartner {
  name: string;
  credit: number;
}

interface Identity {
  id: number;
  email: string;
}

type Employee = BusinessPartner & Identity;

泛型

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}

// 泛型接口
interface GenericIdentityFn<T> {
  (arg: T): T;
}

// 泛型类
class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

高级特性

装饰器

// 类装饰器
function logger(target: any) {
  console.log(`Creating new instance of ${target.name}`);
}

@logger
class Example {
  // ...
}

类型守卫

function isString(test: any): test is string {
  return typeof test === "string";
}

function example(foo: number | string) {
  if (isString(foo)) {
    console.log(foo.length); // string类型特有属性
  }
}

工程实践

项目结构

my-project/
├── src/
│   ├── components/
│   ├── services/
│   ├── types/
│   └── utils/
├── tests/
├── package.json
└── tsconfig.json

Vue3项目示例

// 组件定义
interface Props {
  message: string;
  count?: number;
}

const MyComponent = defineComponent({
  props: {
    message: {
      type: String,
      required: true
    },
    count: Number
  },
  setup(props: Props) {
    const state = reactive({
      localCount: props.count || 0
    });

    return {
      state
    };
  }
});

API封装

// API类型定义
interface ApiResponse<T> {
  code: number;
  data: T;
  message: string;
}

// 请求封装
async function request<T>(url: string, options?: RequestInit): Promise<T> {
  const response = await fetch(url, options);
  const data = await response.json();
  return data;
}

// 使用示例
interface UserData {
  id: number;
  name: string;
}

async function getUser(id: number): Promise<UserData> {
  return request<ApiResponse<UserData>>(`/api/users/${id}`);
}

常见问题与解决方案

类型声明问题

// 问题：无法推断类型
const data = {}; // Type {}

// 解决方案1：显式类型注解
const data: Record<string, any> = {};

// 解决方案2：类型断言
const data = {} as Record<string, any>;

null检查

// 启用严格空值检查
function getName(user: User | null): string {
  // 使用类型守卫
  if (!user) {
    throw new Error("User is null");
  }
  return user.name;
}