TypeScript 基础:数据类型、接口与类型推论

TypeScript 基础:数据类型、接口与类型推论

TypeScript 的核心不是"给每个变量都写类型",而是让类型系统准确描述数据结构,并在代码修改时尽早暴露不兼容问题。本篇从常用类型开始,介绍接口、数组、函数以及类型推论。

原始数据类型

常见原始类型包括 booleannumberstringbigintsymbolnullundefinedvoid 通常用于表示函数没有返回值。

typescript 复制代码
const enabled: boolean = true;
const count: number = 10;
const title: string = 'TypeScript';

function logMessage(message: string): void {
  console.log(message);
}

在开启 strictNullChecks 后,nullundefined 不会被随意赋值给其他类型,这可以减少大量空值错误。

对象与接口

接口用于描述对象应该具备哪些属性:

typescript 复制代码
interface Person {
  name: string;
  age: number;
  nickname?: string;
}

const tom: Person = {
  name: 'Tom',
  age: 25
};

这里的 nickname? 是可选属性。对象缺少必需属性、属性类型不匹配,或在对象字面量中出现未知属性时,编译器都会给出提示。

数组类型

数组可以使用 类型[]Array<类型> 表示:

typescript 复制代码
const fibonacci: number[] = [1, 1, 2, 3, 5];
const names: Array<string> = ['Tom', 'Jerry'];

两种写法含义相同,团队保持风格一致即可。

函数类型

函数可以约束参数和返回值:

typescript 复制代码
function sum(x: number, y: number): number {
  return x + y;
}

const multiply: (x: number, y: number) => number = (x, y) => x * y;

TypeScript 还会检查参数数量、可选参数和返回值是否符合声明,从而避免调用方式发生意外变化。

类型推论

没有显式标注类型时,TypeScript 会根据初始值推断类型:

typescript 复制代码
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// TS2322: Type 'number' is not assignable to type 'string'.

上面的变量会被推断为 string,效果近似于:

typescript 复制代码
let myFavoriteNumber: string = 'seven';

如果变量声明时没有初始值,后续推断行为会受到 TypeScript 版本、控制流和编译选项影响。不要简单认为它会永久变成 any;更稳妥的做法是为这类变量写出明确类型,并开启 noImplicitAnystrict

typescript 复制代码
let result: string | number;
result = 'success';
result = 200;

少用 any

any 会绕过大部分类型检查,适合迁移旧项目时临时使用,但不应成为默认选择。类型未知时优先考虑 unknown,在使用前进行类型收窄:

typescript 复制代码
function printValue(value: unknown): void {
  if (typeof value === 'string') {
    console.log(value.toUpperCase());
  }
}

总结

类型标注负责表达约束,类型推论负责减少重复,两者并不冲突。实际开发中应让编译器推断简单局部变量,为函数边界、公共接口和复杂数据结构提供清晰类型,这样既简洁又可靠。

相关推荐
flash俊杰11 小时前
Zod Schema 驱动的 IPC 契约:从入参校验到状态机一致性的三层防御
javascript·typescript
愛芳芳16 小时前
基于 Electron + Vue3 的仿 PC 微信客户端项目实战
前端·javascript·css·elementui·typescript·electron·vue
神秘的猪头1 天前
TypeScript 高级用法全解析:从泛型到 infer,把类型系统真正用起来
前端·typescript
FYKJ_20102 天前
【毕设分享】基于Web的校园兼职信息发布与申请系统07059
前端·vue.js·spring boot·mysql·typescript·spark·课程设计
ynchyong3 天前
TS 基础
typescript·ts
西瓜太郎4993 天前
别再手算 Token 成本:用 React 状态机做一个可追溯的模型费用计算器
react.js·typescript
右耳朵猫AI3 天前
Web前端周刊2026W37 | Shopify 转原生、React 编译 Rust 化、Vitest 5.0、Rslib 1.0
前端·javascript·react.js·typescript·node.js
晚安日记wanna4 天前
TS const 类型参数一道面试题的四层追问
前端·面试·typescript
掰头战士4 天前
你说你折这玩意干什么-agent工作的核心,还真得好好考虑怎么折叠上下文
typescript·llm·agent