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

总结

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

相关推荐
德尔塔A5 小时前
中文全文检索加向量,我用 SQLite 做到零依赖
typescript
wflynn5 小时前
GitHub 今日推荐|rea:用 MCP 把反编译器和 AI agent 接到一起的逆向工具
typescript·开源·github·agent·agent-skills·binary-analysis
德尔塔A5 小时前
AI 改了 300KB 的文件,我让浏览器一屏都不多拿
typescript
德尔塔A6 小时前
给 Agent 写终端界面,我一个 UI 库都没装
typescript
德尔塔A6 小时前
同一条命令,在 Windows 上炸了三种方式
typescript
德尔塔A6 小时前
同一个会话,终端和浏览器同时开着会发生什么
typescript
咚咚咚小柒8 小时前
【前端】LangChain.js学习
前端·javascript·人工智能·typescript·langchain·vue·ai编程
螺丝钉tina14 小时前
[Playwright][01] 从 Puppeteer 到 Playwright:为什么选择 Playwright + TypeScript?
前端·javascript·typescript
miofly1 天前
GitHub 今日推荐|rea:用 MCP 把反编译器和 AI agent 接到一起的逆向工具
typescript·开源·github
ZoeLandia2 天前
React11:数据请求与 TanStack Query
前端·react.js·typescript·react