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

巧用 TypeScript(三)

对于对象字面量的类型,TypeScript 有一个被称之为 「Freshness 」的概念,它也被称为更严格的对象字面量检查,如下例子: let someThing: { name: string }...someThing = { name: 'hello' }; // ok someThing = { name: 'hello', age: 123 }; // Error, 对象字面量只能指定已知属性...; // ok TypeScript 认为创建的每个对象字面量都是 「 fresh 」 状态;当一个 「 fresh 」 对象字面量赋值给一个变量时,如果对象的类型与变量类型不兼容时...,会出现报错(如上例子中 someThine = { name: 'hello', age: 123 }; 的错误);当对象字面量的类型变宽,对象字面量的 「 fresh 」 状态会消失(如上例子中 someThing...logName({ name: 'matt', job: 'being awesome' }); // Error: 对象字面量只能指定已知属性,`job` 属性在这里并不存在。

17710

巧用 TypeScript(三)

对于对象字面量的类型,TypeScript 有一个被称之为 「Freshness 」的概念,它也被称为更严格的对象字面量检查,如下例子: let someThing: { name: string }...someThing = { name: 'hello' }; // ok someThine = { name: 'hello', age: 123 }; // Error, 对象字面量只能指定已知属性...; // ok 复制代码 TypeScript 认为创建的每个对象字面量都是 「 fresh 」 状态;当一个 「 fresh 」 对象字面量赋值给一个变量时,如果对象的类型与变量类型不兼容时...,会出现报错(如上例子中 someThine = { name: 'hello', age: 123 }; 的错误);当对象字面量的类型变宽,对象字面量的 「 fresh 」 状态会消失(如上例子中 someThing...logName({ name: 'matt', job: 'being awesome' }); // Error: 对象字面量只能指定已知属性,`job` 属性在这里并不存在。

1.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

如何利用 TypeScript 的判别联合类型提升错误处理与代码安全性

TypeScript中的魔法衣橱整理术 在TypeScript中,判别联合类型(Discriminated Unions)使用一个共同的属性,称为判别属性(discriminant),来区分联合类型中的不同类型...: '看这张不同的裤子' }); // TypeScript 类型错误对象文字可能只能指定已知属性,且 `src` 不存在于 `{ type: "system"; event: string; }`...然而,在第二个用法中,TypeScript会报错,因为缺少content属性,而content属性对于文本消息来说是必需的。...最后,在第三个例子中,我们错误地将系统消息的属性与图片消息的属性混淆,导致类型错误。 在handleMessage函数中,TypeScript像一个敏锐的分类器。...就像确保你不会意外地给照片加上文字描述或给文本消息加上图片描述一样,保持整洁和无错误! 进阶示例:服务器端错误处理 现在,让我们看看一个更高级的解决方案:在服务器端应用程序中的错误处理。

12110

【TS 演化史 -- 13】字符串枚举 和 弱类型(Weak Type)探测

PrettierConfig的所有属性都是可选的,所以完全可以不指定它们。相反,咱们的prettierConfig对象有一个semicolons 属性,它在prettierConfig类型中不存在。...从 TypeScript 2.4 开始,当属性没有重叠时,给弱类型赋值是一个错误,带有以下消息的类型检查器错误 类型“{ semicolons: boolean; }”与类型“PrettierConfig...对象文字可以只指定已知属性,并且“semicolons”不在类型“PrettierConfig”中。...另一个好处是 TypeScript 语言可以给咱们自动完成建议,因为类型注释告诉它咱创建的对象的类型。 弱类型的解决方法 如果出于某种原因,咱们就是不想从特定弱类型的弱类型检测中获得错误,该怎么办?...一旦指定了弱类型中定义的一个或多个属性,编译器将不再引发类型错误 interface PrettierConfig { printWidth?: number; tabWidth?

1.6K10

JSX_TypeScript笔记17

所以在.tsx中只能使用as type形式的类型断言: // as type let strLength: number = (someValue as string).length; P.S.关于 TypeScript...(即Props)类型的查找方式不同 固有元素的属性已知的,而自定义组件可能想要指定自己的属性集 形式上,要求自定义组件必须首字母大写,以此区分两种 JSX 元素 P.S.实际上,固有元素/基于值的元素与内置组件.../自定义组件说的是一回事,对 TypeScript 编译器而言,内置组件的类型已知,称之为固有元素,自定义组件的类型与组件声明(值)有关,称之为基于值的元素 固有元素 固有元素的类型从JSX.IntrinsicElements...基于值的元素属性类型:元素实例类型上特定属性类型上对应属性的类型,这个特定属性通过JSX.ElementAttributesProperty指定 P.S.如果未声明JSX.ElementAttributesProperty...子组件的类型来自元素属性类型上的children属性,类似于用ElementAttributesProperty指定props,这里用JSX.ElementChildrenAttribute来指定children

2.3K30

typescript 的数据类型有哪些

一、typescript是什么 typescript 是 javascript的超集,在javascript基础上提供了更加实用的类型供开发使用; 支持ES6语法,支持面向对象编程的概念,如类、接口、继承...,在编程阶段还不清楚类型的变量指定一个类型,不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查,这时候可以使用any类型 使用any类型允许被赋值为任意类型,甚至可以调用其属性、方法 let...never 类型一般用来指定那些总是会抛出异常、无限循环 let a:never; a = 123; // 错误的写法 a = (() => { // 正确的写法 throw new Error(...); } object 对象类型,非原始类型,常见的形式通过{}进行包裹 let obj:object; obj = {name: 'Wang', age: 25}; 三、typescript 和 javascript...而TypeScript引入了静态类型系统,允许开发人员在编译时声明变量的类型,并进行类型检查。这有助于在开发阶段发现和预防潜在的类型错误,提高代码的健壮性和可维护性。

10910

Typescript 的数据类型总结

typescript就能在编译阶段进行类型检查,当类型不合符预期结果的时候则会出现错误提示 二、有哪些 typescript 的数据类型主要有如下: boolean(布尔类型) number(数字类型)...一样,typescript的数值类型都是浮点数,可支持二进制、八进制、十进制和十六进制 let num:number = 123; // num = '456'; // 错误 num = 456; /...56']; 方式二:使用数组泛型,Array: let arr:Array = [1, 2]; arr = ['45', '56']; tuple 元祖类型,允许表示一个已知元素数量和类型的数组...,在编程阶段还不清楚类型的变量指定一个类型,不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查,这时候可以使用any类型 使用any类型允许被赋值为任意类型,甚至可以调用其属性、方法 let...never 类型一般用来指定那些总是会抛出异常、无限循环 let a:never; a = 123; // 错误的写法 a = (() => { // 正确的写法 throw new Error(

1.1K10

Typescript 的数据类型总结

typescript就能在编译阶段进行类型检查,当类型不合符预期结果的时候则会出现错误提示 二、有哪些 typescript 的数据类型主要有如下: boolean(布尔类型) number(数字类型)...一样,typescript的数值类型都是浮点数,可支持二进制、八进制、十进制和十六进制 let num:number = 123; // num = '456'; // 错误 num = 456; /...56']; 方式二:使用数组泛型,Array: let arr:Array = [1, 2]; arr = ['45', '56']; tuple 元祖类型,允许表示一个已知元素数量和类型的数组...,在编程阶段还不清楚类型的变量指定一个类型,不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查,这时候可以使用any类型 使用any类型允许被赋值为任意类型,甚至可以调用其属性、方法 let...never 类型一般用来指定那些总是会抛出异常、无限循环 let a:never; a = 123; // 错误的写法 a = (() => { // 正确的写法 throw new Error(

2.1K31

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

06、TypeScript 中元组与常规数组的区别是什么? 答案:TypeScript 中的元组是一个数组,其中元素的类型、顺序和数量已知。...答案:可区分联合(也称为标记联合)是一种结合了联合类型、文字类型和类型保护的模式。 当一个对象可以有多个形状但共享一个公共属性(通常是文字类型)时,可以使用它们,该属性可用于缩小其确切形状。...派生类还可以重写继承的方法或属性,甚至用新的方法或属性扩展对象结构。 13、装饰器在 TypeScript 中扮演什么角色?...答案:keyof 运算符生成给定类型的已知公共属性名称的并集,这对于限制可能的字符串值或创建映射类型很有用。...typeof 运算符在类型上下文中使用时,获取变量、常量或对象文字的类型,这对于基于现有对象的形状创建类型非常有用,而无需手动重复其结构。

65430

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

答案:TypeScript 中的静态类型可以在开发过程中指定变量、函数参数和返回值的数据类型。这有助于及早捕获与类型相关的错误,从而提高代码质量和可维护性。...答案:TypeScript 中的接口定义了对象结构的契约,指定属性和方法的名称和类型。它们促进强大的类型检查并实现更好的代码组织。...答案:TypeScript 中的“keyof”关键字是一个类型运算符,它返回表示对象键的文字类型的联合。它允许您对对象键执行类型安全操作。...答案:TypeScript 条件类型中的“keyof T extends K”构造用于使用“extends”关键字根据指定条件过滤对象类型的键。...答案:TypeScript 接口中的索引签名允许您根据属性的名称定义属性的类型。它们用于定义具有动态属性名称的对象

51130

TypeScript】超详细的笔记式教程【上】

前言 之前了解过TypeScript,也学习过,但是项目中没有具体的使用过,导致忘得差不多了,最近公司不是很忙,学习的时间比较多,趁这个机会,快快的过一遍,然后准备用SolidJs + TypeScript.../dist", // 指定输出目录 "rootDir": "./", // 指定输出文件目录(用于输出),用于控制输出目录结构 "declaration": true, // 生成声明文件,开启后会自动生成声明文件...,因为new T返回的是一个T对象, 任意值 Any表示你的变量可以是任何值,Ts -> Js。。。...比如我们在变量alice添加属性address,那么就会抛出错误不能将类型“{ name: string; age: number; address: string; }”分配给类型“Person”。...\ 对象文字可以只指定已知属性,并且“address”不在类型“Person”中。

1.1K30

TypeScript 中使用类型守卫的 5 种方式,你都知道吗

TypeScript使用了一些内置的JavaScript操作符,比如typeof、instanceof和in操作符,这些操作符用于确定一个对象是否包含属性。...类型守卫可以让你指导TypeScript编译器在特定的上下文中推断出变量的特定类型,确保参数的类型与你指定的一致。 类型守卫非常类似于特征检测,允许您检测值原型和属性。...它通常返回一个布尔值,表示该属性是否存在于该对象中。它用于其缩小范围,以及检查浏览器支持。...如果一个变量的类型未知,但它等于另一个具有精确类型的变量,那么Typescript会使用该已知变量提供的信息来缩小第一个变量的类型: function getValues(a: number | string...但是,如果自定义类型保护被错误地编写,它可能会带来很多错误。因此,精度是关键。

2K30

4000字讲清 《深入理解TypeScript》一书 【基础篇】

让我们用最初的代码做为示例,如果你没有按约定添加属性TypeScript 编译器并不会对此发出错误警告: interface Foo { bar: number; bas: string; }...Freshness 为了能让检查对象字面量类型更容易,TypeScript 提供 「Freshness」 的概念(它也被称为更严格的对象字面量检查)用来确保对象字面量在结构上类型兼容。...} logName({ name: 'matt' }); // ok logName({ name: 'matt', job: 'being awesome' }); // Error: 对象字面量只能指定已知属性...WARNING 请注意,这种错误提示,只会发生在对象字面量上 允许分配而外的属性: 一个类型能够包含索引签名,以明确表明可以使用额外的属性: let x: { foo: number, [x: string...实际上,我们可以明确的指定索引签名。

1.9K30

TypeScript 终极初学者指南

元组是具有固定大小和已知数据类型的数组,它比常规数组更严格。...中的对象 TypeScript 中的对象必须拥有所有正确的属性和值类型: // 使用特定的对象类型注释声明一个名为 person 的变量 let person: { name: string;...这是因为当我们将一个对象传递给 addID 时,我们并没有指定这个对象应该有什么属性 —— 所以 TypeScript 不知道这个对象有什么属性。...因此,TypeScript 知道的唯一属性返回对象的 id。 那么,我们怎么将任意对象传递给 addID,而且仍然可以告诉 TypeScript对象具有哪些属性和值?...当我们传入一个字符串时,TypeScript 没有发现任何问题。只有我们尝试访问 name 属性时才会报告错误

6.8K20

深入学习下 TypeScript 中的泛型

假设您有一个存储限制,您只能存储所有属性都具有字符串值的对象。为此,您可以创建一个函数,它接受任何对象并返回另一个对象,该对象具有与原始对象相同的键,但所有值都转换为字符串。...keyof T 运算符用于返回具有 T 中所有可用属性名称的联合。然后使用 K in 语法指定新类型的属性是返回的联合类型中当前可用的所有属性 T键。...,因此将此代码编译到您的 TypeScript 环境中会重新声明 Readonly 并引发错误。...类型 A 是字符串文字“abc”的类型,而类型 B 是具有名为 name of type string 属性对象的类型。...这将是您要从中省略属性对象的类型。 第二个类型参数叫做KeysToOmit,必须是字符串类型。您将使用它来指定要从类型 T 中省略的键。

38.9K30

如何在TypeScript中使用基本类型

TypeScript 中声明变量类型 使用纯动态语言 JavaScript 编写代码时,我们无法指定变量的数据类型。...我们创建变量并为其分配一个值,但不指定类型,如下所示: const language = { name: "JavaScript" }; 在此代码块中,语言是一个对象,其中包含属性名称的字符串值。...语言及其属性的值类型没有明确设置,如果未来的开发人员不知道语言引用了哪种值,这可能会在以后引起混淆。 TypeScript 的主要优点是严格的类型系统。静态类型语言是一种在编译时就知道变量类型的语言。...我们在 TypeScript 中编写的任何代码在某种程度上都已经在使用类型系统,即使我们没有指定任何类型。...String string字符串用于文本数据类型,如字符串文字或模板字符串。

3.7K10
领券