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

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

相关推荐
To_OC11 小时前
LC 131 分割回文串:刚学回溯时,我连怎么切字符串都想不明白
javascript·算法·leetcode
咩咩啃树皮12 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构
java·前端·架构
阳光是sunny12 小时前
LangGraph中的Reducer是什么
前端·人工智能·后端
触底反弹12 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
阳光是sunny13 小时前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
To_OC13 小时前
LC 42 接雨水:暴力超时卡半天?前后缀数组一用就通了
javascript·算法·leetcode
小林ixn13 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker14 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
এ慕ོ冬℘゜14 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
武子康14 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端