[TS手册学习] 04_对象类型

这篇具有很好参考价值的文章主要介绍了[TS手册学习] 04_对象类型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

TS官方手册:TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org)

匿名与具名

对象类型的声明可以是匿名的,也可以使用interfacetype进行具名声明。

function greet(person: { name: string; age: number }) {
  return "Hello " + person.name;
}
interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}
type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}

可选属性 optional

使用?标记:

interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}

注:使用PaintOptions声明的对象,它的xPos属性会被初步推断为number | undefined类型。

可以使用条件语句或者解构+默认值的方式收束类型,排除undefined的情况:

function paintShape(opts: PaintOptions) {
    let xPos = opts.xPos === undefined ? 0 : opts.xPos;
    // xPos 的类型为number
}
function paintShape({ shape, xPos = 0, yPos = 0 }: PaintOptions) {
	// xPos 的类型为number,因为undefined会被默认值0取代
    console.log("x coordinate at", xPos);
}

只读属性 readonly

interface SomeType {
    readonly prop: string;
}

注:如果有一个属性的值是引用值,例如一个对象或数组,且这个属性被标记为只读(readonly),我们不能修改它的引用值,但是可以修改它的内部属性。

interface Home {
  readonly resident: { name: string; age: number };
}

function visitForBirthday(home: Home) {
  // 我们可以读取并且更新'home.resident'里的属性
  console.log(`Happy birthday ${home.resident.name}!`);
  home.resident.age++;
}
 
function evict(home: Home) {
  // 但我们不能更新'home.resident'本身
  home.resident = {
Cannot assign to 'resident' because it is a read-only property.
    name: "Victor the Evictor",
    age: 42,
  };
}

索引签名 index signatures

interface StringArray {
  [index: number]: string;
}
 
const myArray: StringArray = getStringArray();
const secondItem = myArray[1];

索引的类型只能是:stringnumbersymbol,以及与这些类型相关的联合类型。

通常只会考虑stringnumber类型的索引。

:可以同时支持stringnumber两种类型的索引器,但数字索引器返回的类型必须是字符串索引器返回类型的子类型。这是因为当使用数字进行索引时,JS 实际上会在索引到对象之前将其转换为字符串。于是使用100"100"进行索引的结果是一样的。

当指定string类型索引的类型为S后,所有属性的类型都需要是S的子集。

interface NumberDictionary {
    [index: string]: number;

    length: number; // ok
    name: string; // NOT ok
}

这是因为当我们访问obj.a的时候,其实也是在访问obj["a"]

在上面这个例子中,string类型索引被声明为number类型,这意味着这个对象的所有属性都是number类型,而下方name却被声明为string类型,矛盾了。

可以使用联合类型解决这个问题:

interface NumberDictionary {
    [index: string]: number | string;

    length: number; // ok
    name: string; // ok
}

同时,索引签名也可以设置为只读:

interface ReadonlyStringArray {
  readonly [index: number]: string;
}

类型继承

使用extends,支持多继承:

interface Colorful {
    color: string;
}
 
interface Circle {
    radius: number;
}
 
interface ColorfulCircle extends Colorful, Circle {}
 
const cc: ColorfulCircle = {
    color: "red",
    radius: 42,
};

交集类型 intersection types

使用&运算符获取已知的两个类型的交集。

interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}
 
type ColorfulCircle = Colorful & Circle;

将两个基本数据类型取交集会得到never

类型继承 VS 交集类型

二者都可以产生更复杂的类型。

前者是在原有的类型的基础上添加可能未有的属性形成新属性,而后者将已有的类型进行组合。

泛型对象类型 Generic Object Types

interface Box<Type> {
  contents: Type;
}

let box: Box<string>;

也可以与泛型函数结合使用:

function setContents<Type>(box: Box<Type>, newContents: Type) {
  box.contents = newContents;
}

除了使用interface,也可以使用type别名定义泛型类型。interface一般用来声明对象类型,而type更灵活,可以组合多种类型:文章来源地址https://www.toymoban.com/news/detail-747568.html

type OrNull<Type> = Type | null;
type OneOrMany<Type> = Type | Type[];

// type OneOrManyOrNull<Type> = OneOrMany<Type> | null
type OneOrManyOrNull<Type> = OrNull<OneOrMany<Type>>;

// type OneOrManyOrNullStrings = OneOrMany<string> | null
type OneOrManyOrNullStrings = OneOrManyOrNull<string>;

到了这里,关于[TS手册学习] 04_对象类型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [TS手册学习] 02_类型收窄 Narrowing

    TS官方手册:TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org) 一个变量如果声明为联合类型,而后续操作需要针对其具体的单一类型做不同处理,这个过程就叫做类型收窄( Narrowing )。 常见的做法或情形有以下: typeof 类型保护(type guards) typeof 是 JS 中的操作符,需要注意

    2024年02月05日
    浏览(36)
  • [TS手册学习] 01_基础、常见类型与概念

    TS官方Handbook: TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org) 相关概念 运行时错误:JS 的大多数错误都只能在运行的过程中被发现。 静态类型系统:TS 可以在运行代码之前发现错误。 非异常失败:例如在 JS 中访问一个对象不存在的属性,不会导致异常,而是返回 undef

    2024年02月05日
    浏览(42)
  • 前端TypeScript学习day04-交叉类型与泛型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)            目录 交叉类型 泛型 创建泛型函数 调用泛型函数: 简化调用泛型函数: 泛型约束  指定更加具体的类型 添加约束  泛型接口  泛型类 泛型工具类型  Partial 

    2024年02月08日
    浏览(43)
  • 【TypeScript】TS类型守卫(六)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域优质创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 📢资料领取:前端进阶资料以及文中源码可以

    2024年02月22日
    浏览(42)
  • 【TypeScript】TS类型声明(二)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 TypeScript从入门到实践专栏 是博

    2024年01月20日
    浏览(40)
  • 【TypeScript】TS条件类型(十)

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源

    2023年04月11日
    浏览(44)
  • 【TypeScript】TS类型断言-类型的声明和转换(五)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 📢资料领取:前端进阶资料以

    2024年02月22日
    浏览(37)
  • 【TypeScript】TS接口interface类型(三)

    一、前言 TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。这些方法都应该是抽象的,需要由具体的类去实现,然后第三方

    2024年02月14日
    浏览(43)
  • TypeScript基础篇 - TS日常类型 上篇

    目录 TS的常见用法介绍  example01.ts 逃避类型检查:any 思考一下~:不知道类型 类型标注 函数(参数和返回值) 匿名函数 TS如何知道匿名函数的类型? TS是一种标注式语言,不侵入JS的设计 文章内容 基础类型、数组 any/unkown 类型标注 函数 对象类型 联合 别名 接口 断言 字面

    2024年02月16日
    浏览(56)
  • ts 终于搞懂TS中的泛型啦! | typescript 入门指南 04

    大家好,我是王天~ 这篇文章是 ts入门指南系列中第四篇,主要讲解ts中的泛型应用,泛型在ts中是比较重要的概念,我花挺长时间才搞明白的,希望能帮助到大家 ~ ** ts 入门指南系列 ** Ts和Js 谁更适合前端开发?| typescript 入门指南 01 详解tsconfig.json 配置文件 | 02 ts入门指南

    2024年02月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包