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

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

相关推荐
A923A17 分钟前
【从零开始学 React | 第四章】useEffect和自定义Hook
前端·react.js·fetch·useeffect
ZC跨境爬虫21 分钟前
批量爬取小说章节并优化排版(附完整可运行脚本)
前端·爬虫·python·自动化
ZC跨境爬虫24 分钟前
海南大学交友平台登录页开发实战day4(解决python传输并读取登录信息的问题)
开发语言·前端·python·flask·html
来一颗砂糖橘27 分钟前
pnpm:现代前端开发的高效包管理器
前端·pnpm
前端摸鱼匠27 分钟前
Vue 3 的defineProps编译器宏:详解<script setup>中defineProps的使用
前端·javascript·vue.js·前端框架·ecmascript
木斯佳28 分钟前
前端八股文面经大全: 美团财务科技前端一面 (2026-04-09)·面经深度解析
前端·实习面经·前端初级
天外天-亮29 分钟前
Vue2.0 + jsmind:开发思维导图
javascript·vue.js·jsmind
LIO31 分钟前
React 零基础入门,一篇搞懂核心用法(适合新手)
前端·react.js
TeamDev1 小时前
JxBrowser 8.18.2 版本发布啦!
java·前端·跨平台·桌面应用·web ui·jxbrowser·浏览器控件
netkiller-BG7NYT1 小时前
yoloutils - Openclaw Agent Skill
前端·webpack·node.js