在当下的前端开发圈，React 18、Vue3、Webpack 5热度居高不下，而TypeScript作为提升代码健壮性的得力助手，同样备受关注。不少前端工程师在使用TypeScript时，常常被类型报错、复杂类型定义等问题搞得头大。别担心！今天就带来 6 个超实用的实战技巧，助你轻松驾驭TypeScript，告别开发 “踩雷”！

痛点一：对象属性不确定，类型怎么写？

开发中经常遇到从接口获取的数据，其属性并非固定存在。比如获取用户信息，部分字段可能为空。若直接用常规类型定义，很容易出现类型错误。

// 定义用户接口，部分属性可能不存在，使用可选属性?
interface User {
id: number;
name: string;
age?: number; // age属性可能不存在
address?: string; // address属性可能不存在
}
// 假设从接口获取到的数据
const userData: User = {
id: 1,
name: '前端小王'
};
// 安全访问可能不存在的属性，避免报错
if (userData.age) {
console.log(`用户年龄是 ${userData.age}`);
}

痛点二：函数参数类型多样，如何适配？

有时函数需要接收不同类型的参数，比如一个处理数据的函数，参数可能是数组，也可能是对象，这时候就需要灵活定义参数类型。

// 定义函数，参数data可以是数组或者对象
function processData(data: any[] | object) {
if (Array.isArray(data)) {
console.log(`处理数组数据，长度为 ${data.length}`);
} else {
console.log(`处理对象数据，属性个数为 ${Object.keys(data).length}`);
}
}
const arrData = [1, 2, 3];
const objData = { a: 1, b: 2 };
processData(arrData);
processData(objData);

痛点三：复杂数据结构，类型难以推导？

遇到嵌套多层的数组、对象等复杂数据结构，TypeScript的类型推导往往不准确，需要手动定义类型。

// 定义多层嵌套的接口
interface Book {
title: string;
author: string;
}
interface Library {
[key: string]: Book[]; // 以字符串为键，值为Book数组
}
// 定义复杂数据
const myLibrary: Library = {
fiction: [
{ title: '三体', author: '刘慈欣' },
{ title: '百年孤独', author: '加西亚·马尔克斯' }
],
nonFiction: [
{ title: '人类简史', author: '尤瓦尔·赫拉利' }
]
};
// 安全访问数据
console.log(myLibrary.fiction[0].title);

痛点四：泛型用不好，代码重复又臃肿？

泛型能让代码更具通用性，但如果使用不当，反而会增加代码的复杂性。掌握常见的泛型使用场景，能有效提升代码质量。

// 定义一个通用的交换函数
function swap<T>(a: T, b: T): [T, T] {
return [b, a];
}
const num1 = 10;
const num2 = 20;
const [newNum1, newNum2] = swap(num1, num2);
console.log(newNum1, newNum2);
const str1 = 'hello';
const str2 = 'world';
const [newStr1, newStr2] = swap(str1, str2);
console.log(newStr1, newStr2);

痛点五：类型兼容性模糊，赋值总出错？

在进行类型赋值、函数参数传递时，由于对类型兼容性规则不熟悉，经常会出现类型错误。

// 定义两个接口
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
let shape: Shape;
let square: Square;
// Square类型兼容Shape类型
shape = square;
// 但Shape类型不兼容Square类型，因为Shape缺少sideLength属性
// square = shape; // 这行会报错

痛点六：类型别名和接口分不清，该怎么选？

类型别名和接口都能用于定义类型，但它们的使用场景有所不同，选错可能导致代码不够清晰。

// 使用类型别名定义字符串数组类型
type StringArray = string[];
const myStrings: StringArray = ['a', 'b', 'c'];
// 使用接口定义用户信息
interface UserInfo {
name: string;
age: number;
}
const user: UserInfo = { name: '前端小张', age: 25 };
// 一般来说，当需要扩展、合并类型时，接口更合适；
// 简单类型定义、联合类型等，类型别名更方便

以上就是 6 个TypeScript的实战技巧，希望能帮你在开发中少走弯路。不过，在实际项目中，不同的团队对TypeScript的使用习惯和规范也不一样。有的团队追求极致严格的类型检查，有的团队则更倾向于灵活使用。那么问题来了：你所在的团队是更偏向严格使用TypeScript，还是灵活运用呢？欢迎在评论区分享你的看法，一起讨论交流！