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

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

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

30040

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基本类型、接口和类,以及类型推断。

    11521

    遇到这些 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类型是什么

    类型 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 中是通过结构体来判断兼容性,如果两个结构体一致,就直接兼容了,但如果不一致,Typescript...注意:原函数如果被修改成了另一个函数,但他类型是不会改变,ts 还是会按照原函数类型去做类型检查!...•ReturnType,获取函数返回类型。•InstanceType,获取构造函数类型实例类型。 我们也可以编写自定义映射类型

    2.9K10

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

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

    1.5K20

    深入浅出 TypeScript

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

    2.9K30

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

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

    77830

    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.7K41

    TypeScript逆变、协变和双向协变

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

    1.1K20

    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(); }

    8110

    深入学习下 TypeScript泛型

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

    15310

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

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

    4.1K30

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

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

    72530
    领券