对象字面量的增强

对象中属性与方法的简洁表示法
1.对象字面量是什么?创建对象的一种方式
const person={ name:‘zhangsan’, age:34 }

2.属性的简洁表达式==>键名和变量或常量名一样的时候,可以只写一个
const age=23;
const person={ name:‘zhangsan’, // age:age, //这里可以简写 age }
console.log(person)

3.方法的简洁表示法==>方法可以省略冒号和function 关键字
const person={
// speak:function(){
} speak(){
console.log(‘这是方法的简写形式’)
}
}person.speak();//方法的调用

对象中[]方括号语法
1.方括号语法的用法
const prop=‘age’;
const person={}; //之前的写法
person[prop]=23;//将age属性添加到了person对象中
console.log(person)//{age:23}

2.增强以后:方括号语法可以写到对象字面量中
const prop=‘age’;
const person={
[prop]:12//prop为一个变量
}
console.log(person);//{age:23}

3.方括号中可以放什么
${} 模板字符串
[值或通过计算可以得到值得(表达式)]
const attr=‘age’;
const func=()=>‘age2’;
const people={
[prop]:23,//[] 里面可以是常量
[func()]:45,//[] 可以是一个计算的结果
[‘sex’+‘3’]:34//[]里面也可以是 字符串拼接
}
console.log(people);

4.方括号语法和点语法的区别
点语法是方括号语法的特殊形式, 当我们的属性名为合法标识符的时候 可以使用点语法,特殊的属性名
需要使用方括号语法。

### TypeScript 对象字面量仅允许已知属性 为了确保对象字面量只包含预定义的属性,在 TypeScript 中可以通过接口或类型别名来严格限定对象的结构。当创建的对象超出这些预定义的属性范围时,TypeScript 编译器将会报错。 #### 使用接口定义对象结构 通过定义一个接口并基于此接口创建对象实例,可以有效控制对象所拥有的属性: ```typescript interface Person { name: string; age?: number; // 可选属性 } const person1: Person = { name: "李四", }; // 下列代码将引发错误,因为 `height` 不属于 `Person` 接口的一部分 const person2: Person = { name: "王五", height: 175, // 错误:对象文字只能指定已知属性,但 'height' 并不属于类型 'Person' }; ``` 上述例子展示了如何利用接口约束对象字面量中的属性[^1]。对于尝试给对象添加未声明过的额外字段,则会被视为非法操作而阻止编译成功[^3]。 #### 利用类型别名达到相同效果 除了接口之外,也可以采用类型别名的方式来达成同样的目的: ```typescript type Product = { id: number; title: string; }; const productA: Product = { id: 1, title: "Apple" }; // 尝试加入未知属性也会失败 const productB: Product = { id: 2, title: "Banana", color: "yellow", // 类型 '{ id: number; title: string; color: string; }' 的字面量隐式转换为类型 'Product' 失败。 }; ``` 这种方式同样遵循了 TypeScript 结构化类型系统的规则,即只要对象满足特定形状的要求即可被接受作为相应类型的实例[^2]。 #### 联合类型进一步增强属性限制 如果希望更精确地规定某些具体取值的情况,还可以借助联合类型配合字符串字面量类型一起工作: ```typescript type Role = 'admin' | 'editor'; interface User { username: string; role: Role; } const userAdmin: User = { username: "root", role: "admin" // 正确 }; const userEditor: User = { username: "guest", role: "editor" // 正确 }; // 这里会触发错误提示:“error TS2322” const userInvalidRole: User = { username: "unknown", role: "moderator" // Type '"moderator"' is not assignable to type 'Role'. }; ``` 这里不仅限定了可存在的键名称,还对键对应的值进行了严格的枚举限制[^5]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值