首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TypeScript基础(三)扩展类型-接口和类型兼容性

接口--TypeScript的接口:用于约束类、对象、函数的契约(标准)和类型别名一样,接口,不出现在编译结果中在TypeScript中,接口(Interface)用于定义对象的结构和类型。...该函数接受两个参数 x 和 y,并返回一个数字类型的结果。我们可以使用该接口来声明变量 add,并将其赋值为一个函数。...总结一下,TypeScript中的接口用于定义对象的结构和类型。它可以描述对象的属性、方法、函数类型、可选属性和只读属性等特性。接口可以提高代码的可读性、可维护性和可重用性。...类型兼容性TypeScript的类型兼容性是指在类型检查过程中,允许某些类型之间的赋值操作或函数参数传递,即使它们的具体类型不完全匹配。...结构化类型:如果两个类型具有相同的属性和方法,并且它们的属性和方法具有相同的名称和类型,那么它们是兼容的。这种规则被称为“鸭子类型”或“结构化子类型”。

31640

TS 进阶 - 类型系统

TypeScript 比较两个类型并非通过类型的名称,而是比较两个类型上实际拥有的属性与方法。Cat 与 Dog 类型上的方法是一致的,所以虽然是名字不同的类型,但仍然被视为结构一致。...# 标称类型系统 标称类型系统,是基于类型名进行兼容性判断的类型系统,要求两个可兼容的类型,其名称必须完全一致。...、类型系统与类型检查 类型 限制数据的可用操作、意义、允许的值的集合,即访问限制与赋值限制 在 TypeScript 中即原始类型、对象类型、函数类型、字面量类型等基础类型,以及类型别名、联合类型等经过类型编程后得到的类型...类型系统 一组为变量、函数等结构分配、实施类型的规则,通过显式地指定或类型推导来分配类型 同时类型系统定义了如何判断类型之间的兼容性:在 TypeScript 中即结构化类型系统 类型检查 确保类型遵循类型系统下的类型兼容性...的模式匹配,即对一个既有类型特定位置类型的提取 如提取函数类型签名中的返回值类型 模板字符串工具类型 模板字符串专属的工具类型 如将一个对象类型中所有属性名转换为大驼峰形式 # 属性修饰工具类型 主要使用

1.2K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    TypeScript入门秘籍:快速掌握静态类型编程

    `;}const name = "World";console.log(sayHello(name));在这个例子中,我们定义了一个sayHello函数,它接受一个字符串参数name并返回一个字符串。...void:表示没有返回值的函数。never:表示永远不会发生的值,通常用于抛出异常或无限循环的函数。object:表示非原始类型的值,如对象、数组等。...类型注解示例// 定义一个函数,参数和返回值都带有类型注解function add(a: number, b: number): number { return a + b;}// 调用函数并传入两个数字..., 5);console.log(rect.getArea()); // 输出: 50泛型示例// 定义一个泛型函数,用于交换两个变量的值function swap(a: T, b: T): [T...九、总结通过这篇博客,你已经学会了如何安装和使用TypeScript,了解了TypeScript的基本类型、接口和类,以及类型推断。

    13921

    遇到这些 TS 问题你会头晕么?

    创建了一个“重学TypeScript”的微信群,想加群的小伙伴,加我微信 “semlinker”,备注重学TS。 一、可以为数字枚举分配越界值?...此外,还定义了 eatEgg 和 drinkMilk 两个函数来实现吃鸡蛋和喝牛奶的功能。...子类型和赋值兼容性要求源类型相对于其目标类型没有多余的属性。此检查的目的是检测对象字面量中是否包含多余或拼写错误的属性。 如果满足以下条件,则认为源类型 S 相对于目标类型 T 含有多余的属性。...(3) 是因为对象字面量类型被扩展(widened),而 (4) 是因为类型断言使得对象字面量的新鲜度消失,这就破坏了 “源类型 S 相对于目标类型 T 含有多余的属性” 中的第一个条件,即 S 类型是一种...除了破坏第一个条件之外,我们也可以通过破坏第二个条件,即 “S 类型包含 T 类型中不被期望的一个或多个属性” 这个条件来解决报错问题: const obj3: { [key: string]: any

    5.3K20

    【TypeScript 演化史 — 第十章】更好的空值检查 和 混合类

    ,该签名描述了可以构造通用类型T的对象的类型,并且其构造函数接受任意数量的任何类型的参数。...咱们可以选择添加一个名称,它将是类主体的本地名称,并允许类引用自己 function Timestamped(Base: TBase) { return...class Timestamped extends Base { timestamp = Date.now(); }; } 现在已经介绍了两个类型别名和mixin函数的声明,接下来看看如何在另一个类中使用...在咱们的例子中,它初始化 tag 属性。 混合构造函数类型指仅有单个构造函数签名,且该签名仅有一个类型为 any[] 的变长参数,返回值为对象类型....比如, 有 X 为对象类型, new (...args: any[]) => X 是一个实例类型为 X 的混合构造函数类型。

    2.6K10

    【文末送书】Typescript 使用日志

    ,构造函数类型 接口中除了可以定义常规属性之外,还可以定义可选属性、索引类型等。...类型兼容性是我认为 Typescript 中最难理解的一个部分,我们来分析一下。...•对象中的兼容•函数返回值兼容•函数参数列表兼容•函数参数结构兼容•类中的兼容•泛型中的兼容 在 Typescript 中是通过结构体来判断兼容性的,如果两个的结构体一致,就直接兼容了,但如果不一致,Typescript...注意:原函数如果被修改成了另一个函数,但他的类型是不会改变的,ts 还是会按照原函数的类型去做类型检查!...•ReturnType,获取函数返回值类型。•InstanceType,获取构造函数类型的实例类型。 我们也可以编写自定义的映射类型。

    2.9K10

    从两个角度理解 TypeScript 中的类型是什么

    类型 Type1、Type2 和 Type3 的类型联合是定义它们集合的集合理论 union。 观点2:类型兼容性关系 从这个角度来看,我们不关心值本身以及在执行代码时它们是如何流动的。...TypeScript 规范通过所谓的类型关系(https://github.com/microsoft/TypeScript/blob/master/doc/spec.md#3.11)定义类型兼容性。...静态类型系统的职责之一是确定两种静态类型是否兼容: 实际参数的静态类型 U(例如,通过函数调用提供) 对应形式参数的静态类型 T(在函数定义中指定) 这通常意味着检查 U 是否为 T 的子类型。...大致有两种检查方法: 在名义类型系统中,两个静态类型如果具有相同的标识(“名称”)则相等。如果明确声明了它们的子类型关系,则一种类型是另一种类型的子类型。...名义类型的语言为 C ++、Java、C#、Swift 和 Rust。 在结构类型系统中,两个静态类型具有相同的结构(如果它们具有相同的名称和相同的类型)则相等。

    1.5K00

    深入浅出 TypeScript

    定义函数类型 一般来说,TypeScript 编译器是能『感知』到函数的类型,这也就是「类型推断」。...」:「函数项名称相同」但输入输出类型或个数不同的「子程序」,它可以简单地称为一个单独功能可以执行多项任务的能力。...「TypeScript 的函数重载」:为同一个函数提供「多个函数类型定义」来进行函数重载,目的是重载的 函数在调用的时候会进行「正确的类型检查」。...函数参数兼容性 x 的每个参数必须能在 y 里找到对应类型的参数。注意:只看类型,不看参数名称。...interface只能用于「定义对象类型」,而 type的声明方式除了对象之外还可以「定义交叉、联合、原始类型」等,类型声明的方式适用范围显然更加广泛。

    2.9K30

    从两个角度看 Typescript 中的类型是什么?

    每个角度都从这三个问题来解释 以下三个问题对于理解类型是如何工作的非常重要,需要从这两个角度中的每一个角度来回答。 myVariable 的类型 MyType 意味着什么?...类型 Type1、 Type2和 Type3的联合类型是定义它们的集合在集合论中的并集。 3. 角度 2:类型兼容关系 从这个角度来看,我们不关心值以及它们在执行代码时如何流动。...当源位置通过赋值、函数调用等方式连接到目标位置时,源位置的类型必须与目标位置的类型兼容。Typescript 规范通过所谓的类型关系定义类型的兼容性。...标准类型系统和结构类型系统 静态类型系统的职责之一是确定两个静态类型是否兼容: 实际参数的静态类型 U(例如,通过函数调用提供) 对应形式参数的静态类型 T(指定为函数定义的一部分) 这通常意味着要检查...这种检查的两种方法(大致)是: 在标准类型中,如果两个静态类型具有相同的标识(“名称”) ,则它们是相等的。一种类型是另一种类型的子类型,它们的子类型关系是显式声明的。

    1.5K20

    分享 30 道 TypeScript 相关面的面试题

    另一方面, === 是一个严格的相等运算符,它检查值和类型,使其在类型敏感的上下文中更安全、更可预测。 15、如何在 TypeScript 中声明只读数组,以及为什么要使用它?...,它允许读取位于连接对象链深处的属性值,而无需检查链中的每个引用是否有效。如果任何引用为 null 或未定义,则表达式会与未定义的值短路。 空合并运算符 (??)...答案:映射类型允许通过转换属性在现有类型的基础上创建新类型。它们遵循一种模式,您可以在其中迭代对象类型的属性并生成新类型。...上下文输入等功能有助于函数表达式等场景。 27、什么是类型防护,如何创建自定义类型防护? 答案:类型保护是执行运行时检查并缩小条件块内类型范围的表达式。...30、解释在高级类型场景中如何以及为何使用 keyof 和 typeof 运算符。 答案:keyof 运算符生成给定类型的已知公共属性名称的并集,这对于限制可能的字符串值或创建映射类型很有用。

    1K30

    【TypeScript 演化史 -- 10】更好的空值检查 和 混合类

    ,该签名描述了可以构造通用类型T的对象的类型,并且其构造函数接受任意数量的任何类型的参数。...咱们可以选择添加一个名称,它将是类主体的本地名称,并允许类引用自己 function Timestamped(Base: TBase) { return...class Timestamped extends Base { timestamp = Date.now(); }; } 现在已经介绍了两个类型别名和mixin函数的声明,接下来看看如何在另一个类中使用...在咱们的例子中,它初始化 tag 属性。 混合构造函数类型指仅有单个构造函数签名,且该签名仅有一个类型为 any[] 的变长参数,返回值为对象类型....比如, 有 X 为对象类型, new (...args: any[]) => X 是一个实例类型为 X 的混合构造函数类型。

    2.8K20

    TypeScript 4.7 beta 发布:NodeJs 的 ES Module 支持、新的类型编程语法、类型控制流分析增强等

    这是因为对于这一类深度嵌套的情况,TypeScript 会使用启发式的递归检查,即,执行一定深度的展开检查,如果还没完事就判定这是一个无限循环,则认为两个类型是兼容的,此策略称为启发式的递归类型检查。...4.7 beta 主要包含以下部分的更新: NodeJS 中的 ES Module 支持 模块检查控制 计算属性的类型控制流分析支持 对象内函数类型推导增强 泛型实例化表达式 infer 关键字的 extends...,TypeScript 能够从 produce 函数的返回值推导出泛型参数 T 的类型,并应用到 consume 函数的入参类型中。...Setter与 Setter之间的类型兼容性是如何的?...在过去,我们只能通过已经确定的固定规律来判断协变与逆变分别在哪种情境下发生(参数逆变,返回值协变,部分内置方法双变(Bivariant),接口内部使用 property 方式定义的函数执行严格的协变与逆变检查

    5.9K30

    会写 TypeScript 但你真的会 TS 编译配置吗?

    tsc 实际就是将 TS 转为 JS 的编译(器)脚手架工具,如果是一个 TS 的前端工程项目,那么就可以通过项目中的 tsconfig.json 文件来自定义配置 TS 编译相关规则。...(6). baseUrl & paths baseUrl:设置基本目录以解析非绝对模块名称(定义一个根目录,以此进行绝对文件路径解析) paths:用于设置模块名或路径映射列表,这样就可以简写项目中自定义模块的文件路径...": true, // 启用严格的 null 检查 "noImplicitThis": true, // 当 this 表达式值为 any 类型的时候,生成一个错误 "alwaysStrict...中只会对 TS 代码转为 JS 代码(通过 parse TS 文件为 AST,并直接移除类型信息,然后打印目标代码),不会去做 TS 类型检查,所以 Babel 编译 TS 文件相较于 TSC 的速度更快...五、总结 针对 TypeScript 项目的类型检查和编译流程算是完整过了一遍,相信已足以支撑大家在工作中自定义化配置 TS 前端项目!

    3.8K41

    TypeScript 中的逆变、协变和双向协变

    and extends子句的情况下也是如此 基础 TypeScript中的类型兼容性可以用于确定一个类型是否可以赋值给其他类型。...不会出错,但是在java等语言中就会报错,因为Man类没有明确的说明实现了IName 接口 结构化 在基于名义类型的类型系统中,数据类型的兼容性或等价性是通过明确的声明和/或类型的名称来决定的。...而结构性类型系统是基于类型的组成结构,且不要求明确地声明。 TS 是结构性的类型系统。所谓结构化就是对值所具有的结构进行类型检查。...简单来说,要判断两个类型是否是兼容的,只需要看两个类型的结构是否兼容就可以了,不需要关心类型的名称是否相同。...可赋值性 assignable assignable 是类型系统中很重要的一个概念,当你把一个变量赋值给另一个变量时,就要检查这两个变量的类型之间是否可以相互赋值。

    1.2K20

    【TypeScript 演化史 — 第八章】字面量类型扩展 和 无类型导入

    image.png 上一篇更好的类型推断的文章中,解释了 TypeScript 如何用 const 变量和 readonly 属性的字面量始化来推断字面量类型。...咱们可以选择添加一个名称,它将是类主体的本地名称,并允许类引用自己 function Timestamped(Base: TBase) { return...class Timestamped extends Base { timestamp = Date.now(); }; } 现在已经介绍了两个类型别名和mixin函数的声明,接下来看看如何在另一个类中使用...在咱们的例子中,它初始化 tag 属性。 混合构造函数类型指仅有单个构造函数签名,且该签名仅有一个类型为 any[] 的变长参数,返回值为对象类型....比如, 有 X 为对象类型, new (...args: any[]) =X 是一个实例类型为 X 的混合构造函数类型。

    4.6K10

    深入学习下 TypeScript 中的泛型

    在今天的内容中,我们将尝试 TypeScript 泛型的真实示例,并探索它们如何在函数、类型、类和接口中使用。...,该函数遍历keys数组并使用数组中指定的键创建一个新对象。...为此,您可以创建一个函数,它接受任何对象并返回另一个对象,该对象具有与原始对象相同的键,但所有值都转换为字符串。这个函数将被称为 stringifyObjectKeyValues。...本节介绍了将泛型与函数一起使用的多种方法,包括直接分配类型参数以及为参数形状设置默认值和约束。 接下来,您将通过一些示例来了解泛型如何使接口和类适用于更多情况。...这将创建一个名为 K 的新类型,它绑定到当前属性的名称。这可用于使用语法 T[K] 访问原始类型中此属性的类型。在这种情况下,您将属性的类型设置为布尔值。

    39K30

    深入浅出TypeScript | 青训营笔记

    定义: TS定义函数类型时要定义输入参数类型和 输出类型 输入参数: 参数支持可选参数和默认参数 输出参数: 输出可以自动推断,没有返回值时,默认为void 类型 函数重载: 名称相同 但是参数不同,...中,interface 是一种用于描述对象类型的语法,它定义了一个对象应该具有哪些属性和方法。...Add 的接口,它描述了一个接受两个参数并返回一个数字类型的函数。...就是临时占个位置, 之后通过传递过来的参数进行推导 使用泛型时,我们需要在函数、类或接口名称后面加上尖括号 ,其中 T 代表泛型类型参数名。...如何使用 下面是一个简单的泛型函数示例,它将传入的数组反转并返回: function reverse(array: T[]): T[] { return array.reverse(); }

    8410

    深入学习下 TypeScript 中的泛型

    在今天的内容中,我们将尝试 TypeScript 泛型的真实示例,并探索它们如何在函数、类型、类和接口中使用。...,该函数遍历keys数组并使用数组中指定的键创建一个新对象。...为此,您可以创建一个函数,它接受任何对象并返回另一个对象,该对象具有与原始对象相同的键,但所有值都转换为字符串。这个函数将被称为 stringifyObjectKeyValues。...本节介绍了将泛型与函数一起使用的多种方法,包括直接分配类型参数以及为参数形状设置默认值和约束。 接下来,您将通过一些示例来了解泛型如何使接口和类适用于更多情况。...这将创建一个名为 K 的新类型,它绑定到当前属性的名称。这可用于使用语法 T[K] 访问原始类型中此属性的类型。在这种情况下,您将属性的类型设置为布尔值。

    17810

    分享 40 道关于 Typescript 的面试题及其答案

    答案:TypeScript 中的接口定义了对象结构的契约,指定其属性和方法的名称和类型。它们促进强大的类型检查并实现更好的代码组织。...TypeScript 中的类型保护是什么?它们如何工作?举个例子。 答案:类型防护是 TypeScript 表达式,它在运行时检查变量的类型,并允许您根据类型执行不同的操作。...答案:条件类型中的“keyof”关键字用于获取对象类型的键的并集。它允许您以类型安全的方式使用对象的键。“in”关键字检查属性键是否存在于从“keyof”获得的键的并集中。...答案:TypeScript 接口中的索引签名允许您根据属性的名称定义属性的类型。它们用于定义具有动态属性名称的对象。...在此示例中,isString 函数是一个类型谓词,用于检查值是否为字符串。

    87930

    掌握 TypeScript:20 个提高代码质量的最佳实践

    它们就像是对象的蓝图,概述了你将要使用的数据的结构和属性。 在 TypeScript 中,接口定义了对象的形状的约定。它指定了该类型的对象应具有的属性和方法,并且可以用作变量的类型。...这意味着,当你将一个对象分配给带有接口类型的变量时,TypeScript 会检查对象是否具有接口中指定的所有属性和方法。...类型别名和接口(interface)的主要区别在于,类型别名为类型创建一个新名称,而接口为对象的形状创建一个新名称。...T>(obj: T, key: K) { return obj[key]; } 这将允许你在编译时检查 key 是否为对象 T 的键之一,并返回该键对应的值。...最佳实践11:使用枚举 枚举(Enums)是 TypeScript 中定义一组命名常量的一种方式。它们可以用于创建更具可读性和可维护性的代码,通过给一组相关的值赋予有意义的名称。

    4.2K30
    领券