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自动补全属性

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

相关推荐
橙子家3 小时前
浏览器缓存之【基础键值存储】:Local storage 和 Session storage
前端
星星在线5 小时前
MusicFree:一个「All in One」的个人音乐服务器,让听歌回归简单
前端·后端
IT_陈寒6 小时前
Redis的SETNX并发问题让我加了三天班
前端·人工智能·后端
demo007x6 小时前
Docling 文档转换以及技术架构分析
前端·后端·程序员
京东云开发者7 小时前
京东市民服务又“上新”!这次是黑龙江“龙易办”
前端
袋鱼不重8 小时前
我的神奇同事,AI 用多了居然写了个 Open In Codex
前端·后端·ai编程
竹林8188 小时前
Web3表单签名验证:我用 wagmi 和 ethers 给 DApp 加了一个“免密登录”,踩坑记录全在这了
javascript
用户6990304848758 小时前
try catch使用场景 处理同步代码错误兼容用的
javascript·uni-app
雪碧聊技术8 小时前
Tree.js是什么?一文讲透
开发语言·javascript·ecmascript
Fireworks8 小时前
深入vue3源码解读 -- 1、响应式的基础概念
前端