TypeScript---对象:不自在但实在

目录

JavaScript的对象

TypeScript的意义

TypeScript的核心

TypeScript的判断逻辑


如果你写过JavaScript,一定对对象不陌生。

javascript 复制代码
const user = {
  name: "Tom",
  age: 18
}

你可能会觉得:

"对象?这不就是个装数据的袋子吗?"

但当你走进TypeScript,你会突然发现------

对象不再是"随便装",而是"必须对得上号"。

这一步,很多人都会卡住。

JavaScript的对象

过于自由

javascript 复制代码
const user = { name: "Tom" }
user.age = 18
user.isAdmin = true

想加就加,想删就删。写得很爽,但项目一大就开始出事。

你一定见过这些场景:

  • 后端说有age,结果前端拿到是undefined
  • 同一个对象,不同地方字段不一样
  • 代码能跑,但数据是错的

问题不是对象,而是"对象没有规则"。

TypeScript的意义

给对象"立规矩"

TypeScript干了一件很重要的事:

在你写代码的时候,就先帮你检查对象长得对不对。

于是,对象在TS里第一次有了"结构意识"。

TypeScript 复制代码
let user: { name: string; age: number }

user = {
  name: "Tom",
  age: 18
}

这时候TypeScript会说:

  1. name
  2. age
  3. 类型也对

你过关!!!

TypeScript的核心

瞅瞅模样

一句话概括:

TypeScript关心的不是"这个对象是谁",而是"这个对象长什么样"。

这就是TypeScript的灵魂设计之一。

举个非常有感觉的例子

TypeScript 复制代码
function printUser(u: { name: string }) {
  console.log(u.name)
}

你传什么不重要:

TypeScript 复制代码
printUser({ name: "Alice" })
printUser({ name: "Bob", age: 20 })
printUser({ name: "Carol", role: "admin" })

只要它 "看起来像一个有name的对象",就行。

这就是所谓的------鸭子类型(Duck Typing)

"像鸭子、叫起来也像鸭子,那它就是鸭子。"

TypeScript的判断逻辑

只看形状,不看身份

在真实项目里:

  • 数据来自接口
  • 对象来自JSON
  • 根本没有class、没有new

TypeScript选择了一个非常现实的路线:只要结构对,就认。

这让TypeScript对前端、后端接口、配置对象、数据模型异常友好**。**

TypeScript 复制代码
function createUser(user: { name: string; age: number }) {
  // ...
}

TypeScript在这里做的事非常贴心:

  • 少一个字段->直接报错
  • 多写错一个类型->编译就提醒
  • IDE自动补全属性

你不是"被限制",你是被保护。

相关推荐
aPurpleBerry几秒前
monorepo (Monolithic Repository) pnpm rush
前端
青茶3607 分钟前
php怎么实现订单接口状态轮询请求
前端·javascript·php
火车叼位32 分钟前
脚本伪装:让 Python 与 Node.js 像原生 Shell 命令一样运行
运维·javascript·python
VT.馒头32 分钟前
【力扣】2727. 判断对象是否为空
javascript·数据结构·算法·leetcode·职场和发展
鹏北海32 分钟前
micro-app 微前端项目部署指南
前端·nginx·微服务
发现一只大呆瓜35 分钟前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
css趣多多39 分钟前
add组件增删改的表单处理
java·服务器·前端
证榜样呀44 分钟前
2026 大专计算机专业必考证书推荐什么
大数据·前端
蓝帆傲亦1 小时前
前端性能极速优化完全指南:从加载秒开体验到丝滑交互
前端·交互
鱼毓屿御1 小时前
如何给用户添加权限
前端·javascript·vue.js