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

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

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

原始数据类型

常见原始类型包括 boolean、number、string、bigint、symbol、null 和 undefined。void 通常用于表示函数没有返回值。

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

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

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

对象与接口

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

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;更稳妥的做法是为这类变量写出明确类型,并开启 noImplicitAny 与 strict。

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());
  }
}

总结

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

相关推荐
Duang007_2 小时前
生产可观测性:从“系统慢“到“根因“的完整链路(Go / TypeScript)
后端·python·golang·typescript·prometheus
IllegalCreed1 天前
用 TypeScript 从零重写《仙剑奇侠传》:能通关的浏览器版,和一个给它做内容的可视化编辑器
typescript
_zxd1 天前
TypeScript 类型树
前端·typescript
Flynt1 天前
SvelteKit 3 升级实录:sv migrate 改完 6 个源文件,还给我留了张任务清单
typescript·前端框架·svelte
光影少年3 天前
Taro 是如何解析入口配置 app.config.ts 和页面配置的?
微信小程序·小程序·typescript·reactjs·百度小程序·taro
AI情绪识别开源4 天前
HFpEF 心房-心室耦联效率无创监测方向(AVCEI)
typescript·laravel·perl
凤城老人4 天前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
zhousenshan5 天前
TypeScript 入门到精通
typescript
花旗蜕变5 天前
前端转 NestJS 全栈实践:从表单页面到微信业务系统
前端·typescript·nestjs
艺杯羹5 天前
Anthropic突袭发布Claude Code Mods!用TypeScript编写智能体中间件:告别AI误删与失控
人工智能·typescript·系统架构