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

TypeScript从类型中筛选出类型

TypeScript是一种静态类型检查的编程语言,它是JavaScript的超集,可以编译为纯JavaScript代码。在TypeScript中,可以使用类型系统来对变量、函数参数、返回值等进行类型注解和类型检查,从而提高代码的可靠性和可维护性。

在TypeScript中,可以使用一些特定的语法来从类型中筛选出类型。其中最常用的方式是使用条件类型(Conditional Types)和映射类型(Mapped Types)。

条件类型是一种基于条件判断的类型,可以根据不同的条件选择不同的类型。例如,可以使用条件类型来筛选出某个类型中满足特定条件的子类型。下面是一个示例:

代码语言:txt
复制
type Filter<T, U> = T extends U ? T : never;

type NumberOrString = number | string;
type OnlyNumbers = Filter<NumberOrString, number>; // 只保留number类型

const num: OnlyNumbers = 10; // 正确
const str: OnlyNumbers = "hello"; // 错误,类型不匹配

在上面的示例中,Filter类型接受两个参数,T表示待筛选的类型,U表示筛选条件。通过使用条件判断T extends U,如果T可以赋值给U,则返回T类型,否则返回never类型。通过这种方式,我们可以从NumberOrString类型中筛选出只包含number类型的OnlyNumbers类型。

映射类型是一种根据已有类型创建新类型的方式。可以使用映射类型来从一个类型中筛选出满足特定条件的属性。下面是一个示例:

代码语言:txt
复制
type Person = {
  name: string;
  age: number;
  email: string;
};

type FilteredPerson<T> = {
  [K in keyof T]: T[K] extends string ? T[K] : never;
};

type StringProperties = FilteredPerson<Person>; // 只保留string类型的属性

const person: StringProperties = {
  name: "John",
  age: "30", // 错误,类型不匹配
  email: "john@example.com"
};

在上面的示例中,FilteredPerson类型接受一个泛型参数T,通过使用映射类型[K in keyof T],遍历T类型的所有属性,并根据条件判断T[K] extends string来选择保留string类型的属性,其他属性的类型为never。通过这种方式,我们可以从Person类型中筛选出只包含string类型属性的StringProperties类型。

总结起来,TypeScript提供了条件类型和映射类型等特性,可以从类型中筛选出满足特定条件的子类型或属性。这些特性可以帮助开发者在编写代码时更加精确地定义类型,并提供类型检查的支持,从而减少潜在的错误和提高代码的可靠性。

腾讯云相关产品和产品介绍链接地址:

请注意,以上仅为腾讯云相关产品的示例,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

C#到TypeScript - 类型

C#到TypeScript - 类型 TypeScript和C#一样是微软搞出来的,而且都是大牛Anders Hejlsberg领导开发的,它们之间有很多共同点,现在尝试以C#程序员的角度来理解下TypeScript...TypeScript一门是JavaScript的超集语言,除了支持最新的JS语法外,TypeScript还会增加一些其他好用的语法糖,最重要的是它在兼顾JavaScript灵活的基础上增加了强类型系统,...现在来看下TypeScript基础类型: 数值 C#的数字类型有好几种:int, long, float, double, byte等,而TypeScript和JavaScript一样,所有的数字都是浮点数...数组还可以利用扩展操作符...来把数组解开再放入其他数组。...,后面会讲联合类型 tuple[4] = true; //不行 这一篇主要就讲这些基本类型,下一篇会讲TypeScript的高级类型

1.7K50

TypeScript类型断言

本文是关于 TypeScript 的 type assertions 的,它与其他语言中的类型强制转换有相似之处,并通过 as 运算符执行。...---- 类型断言 类型断言使我们可以覆盖 TypeScript 为存储位置计算的静态类型,这对于解决类型系统的限制很有用。...在 B 行,我们看到此类型不允许访问任何属性。 在 C 行,我们用类型断言(运算符 as)告诉 TypeScript data 是一个Array。现在就可以访问属性 .length 了。...类型断言是不得已的方法,应尽可能的避免。他们(暂时)删除了静态类型系统为我们提供的安全网。 注意,在 A 行,我们还覆盖了 TypeScript 的静态类型,不过是通过类型注释完成的。...类型断言的替代语法 TypeScript 对于类型断言有另一种“尖括号”语法: 1>data 该语法已经过时,并且与 React JSX 代码(在 .tsx 文件)不兼容。

3.7K40

TypeScript 的基础类型:原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型

TypeScript 是一种由微软开发的静态类型编程语言,它是 JavaScript 的超集,并且可以在编译时进行类型检查。...TypeScript 强大的类型系统使得开发者能够更轻松地编写可维护、可扩展的代码。本文将详细介绍 TypeScript 的基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型。...原始类型TypeScript ,有以下几种原始类型:数字类型数字类型用于表示整数或浮点数。可以使用 number 关键字来声明数字变量。...例如:enum Color { Red, Green, Blue,}let color: Color = Color.Green;在枚举类型,每个枚举成员都有一个与它关联的数字值,默认 0 开始...类型推断和类型断言TypeScript 具有强大的类型推断能力,它可以根据上下文自动推断变量的类型。例如,如果我们在定义变量时直接赋值,TypeScript 可以推断出变量的类型

32630

C#到TypeScript - 高级类型

C# vs TypeScript - 高级类型 上一篇讲了基础类型,基本上用基础类型足够开发了,不过如果要更高效的开发,还是要看下高级类型,这篇和C#共同点并不多,只是延用这个主题。...联合类型 可以字面上进行理解:其实就是多个类型联合在一起,用|符号隔开。 如: string | number, 表示希望这个类型既可以是string,又可以是number。...这个可以用在方法参数,用来限制参数的输入。...TypeScript可以根据赋值或上下文推论出变量的类型,所以有时可以不用明确标明变量或函数返回值的类型。...以上就是TypeScript类型了,比较灵活也比较难,可能要在实际项目中用用就会比较好掌握。

1K90

实现TypeScript的互斥类型

此时,你会怎么用TypeScript来定义这个类型?本文将带大家实现一个互斥类型来解决这个问题,欢迎各位感兴趣的开发者阅读本文。 前置知识 在实现之前,我们需要先来了解几个基础的知识。...: string }; never类型TypeScript它有一个特殊的类型never,它是所有类型的子类型,无法再进行细分,也就意味着除了其本身没有类型可以再分配给它。...接下来,我们来梳理下实现思路: 实现一个排除类型,用于A对象类型剔除B对象类型的属性,并将排除后的属性类型设为never,得到一个新对象类型。...实现代码 接下来,我们来看下代码的实现,如下所示: // 定义排除类型:将UT剔除, keyof 会取出T与U的所有键, 限定P的取值范围为T的所有键, 并将其类型设为never type Without...> & T); 注意:为了类型的可复用性,我们使用了泛型,对此不熟悉的开发者请移步:TypeScript中文网——泛型 测试用例 我们将文章开头所说的问题代入上述实现代码,看一下它能否将其解决,如下所示

3.1K40

TypeScript 的数组类型定义

TypeScript 声明和初始化数组也很简单,和声明数字类型和字符串类型的变量也差不多,只不过在指定数组类型时要在类型后面加上一个括号 [] 语法格式 const array_name: dataype...array: Array = ['孟浩然', 99]; 除了使用括号 [] 的方法来声明数组,你还可以使用 数组泛型 来定义数组 语法格式 const array_name..., val2, val3],[v1, v2, v3]]; // 等同于 const array_name: datatype[][] = [[val1, val2, val3]]; 多维数组类型 TypeScript...等同于 const test: string[][] = [['狮子头', '清蒸鲈鱼', '鲜椒牛蛙'], ['北京烤鸭'], ['地锅鸡', '饿了']]; 声明一个二维数组 注意: 以下示例类型在数组的...个 建议: 在定义数组类型的时候使用数组泛型定义,这样显得更直观一点 Tuple 元组类型(元组类型允许表示一个已知元素数量和类型的数组)

5.3K40

TypeScript类型推断

当我们在TypeScript声明变量但没有明确指定其类型时,TypeScript会尝试根据变量的值进行类型推断。这样可以帮助我们避免手动指定所有类型,使代码更简洁,同时也提供了更好的类型安全性。...TypeScript 推断 y 为 string 类型let z = true; // TypeScript 推断 z 为 boolean 类型在这个例子,我们没有显式地给变量x、y和z指定类型TypeScript...} 类型TypeScript会根据对象字面量的键值对进行类型推断。...函数返回值类型推断function add(a: number, b: number) { return a + b;}在这个例子,函数add的返回值没有显式地指定类型,但TypeScript会根据函数体的...通过这些案例,你可以更好地理解TypeScript类型推断的过程和机制。类型推断使得代码更灵活、简洁,同时还增加了代码的可读性和类型安全性。

32900

TypeScript类型守卫

类型守卫主要包括四种方式:intypeofinstanceof自定义类型1、in- 定义属性场景下内容的确认先写两个接口Teacher、Student,然后将这两个接口进行联合声明,使用in来判断属性是否在传递的参数...score; }}上面案例的传参都会基本类型,当传一个对象时候,我们也可以用对象的属性来进行判断,比如:interface A{ a:string;}interface B{ a:number...写法:a is b,意思是a是b类型,a是函数参数,也可以是this关键字,this关键字一般用在类判断,b可以是接口类型,b也可以是number、string等其他合法的TS类型。...(1)函数参数形式函数的参数类型为多个类型,通过is关键字自定义类型,将函数参数精确到某种类型,然后再执行相应的逻辑。...(cls: Teacher | Student) => { if(isTeacher(cls)) { return cls.courses; }}(2)this形式下面代码

34530

TypeScript类型声明

当我们使用TypeScript编写代码时,类型声明是非常重要的,它帮助我们定义变量、函数、类等的类型,从而提供更好的代码提示、类型检查和代码可读性。...以下是关于TypeScript类型声明的详细内容:基本类型声明在TypeScript,我们可以使用以下关键字来声明基本类型:let num: number = 42;let str: string =...(Type Assertion)类型断言允许我们手动指定变量的类型,并告诉TypeScript编译器我们知道更多关于变量的类型信息。...(Union Types)联合类型表示变量可以是多种类型的一种。...: number; readonly id: number;}以上是关于TypeScript类型声明的一些重要内容。通过合理使用类型声明,我们可以增强代码的可读性、类型安全性和可维护性。

23220

TypeScript 类型注解和类型推断

一、类型注解(Type annotation) 所谓类型注解,就是人为为一个变量指定类型,例如: const a: number = 123; 在 vscode 鼠标移入 a 出现提示,冒号后面就是类型注解...当不添加类型注解时,TypesScript 也能知道变量 a 是一个数字,这就是 TypeScript类型推断: ?...二、类型推断(Type inference) 所谓类型推断就是 TypeScript 可以通过变量值倒推变量类型,因此在绝大部分情况下,我们是不需要去写类型注解的 但有些情况类型推断是无法推断变量类型的...,例如函数的参数: function getSum(a, b) { return a + b; } const num = getSum(1, 2); 上面代码的参数 a,b 就无法类型: ?...; 这样 num 就可以推断出类型了: ?

1.1K30

TypeScript 基础类型

TypeScript 基础类型 TypeScript 包含的数据类型如下表: 数据类型 关键字 描述 任意类型 any 声明为 any 的变量可以赋予任意类型的值。...**注意:**TypeScript 和 JavaScript 没有整数类型。...---- Any 类型 任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。...而在TypeScript启用严格的空校验(--strictNullChecks)特性,就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型,示例代码如下: // 启用...这意味着声明为 never 类型的变量只能被 never 类型所赋值,在函数它通常表现为抛出异常或无法执行到终止点(例如无限循环),示例代码如下: let x: never; let y: number

61010

TypeScript 基础类型

一、TypeScript 的安装及使用 1、安装 npm i typescript -g // ts 全局包 npm i ts-node -g // 使用 ts-node 直接运行 ts...文件 2、使用 将 TypeScript 转换为 JavaScript 代码: tsc test.ts 使用 node 命令来执行 test.js 文件: $ node test.js 二、TypeScript...基础类型 1、任意类型 any 声明为 any 的变量可以赋予任意类型的值 let any1: any = 4 console.log(any1); // 4 any1 = false console.log...(包括 null 和 undefined)的子类型,代表从不会出现的值,这意味着声明为 never 类型的变量只能被 never 类型所赋值,在函数它通常表现为抛出异常或无法执行到终止点(例如无限循环...) let x: never; // 运行错误,数字类型不能转为 never 类型 x = 123;

1.3K30

TypeScript 元组类型

一、元组类型简介 众所周知,数组一般由同种类型的值组成,但有时我们需要在单个变量存储不同类型的值,这时候我们就可以使用元组。...在 JavaScript 是没有元组的,元组是 TypeScript 特有的类型,其工作方式类似于数组。 元组可用于定义具有有限数量的未命名属性的类型。每个属性都有一个关联的类型。...二、元组类型的解构赋值 通过前面的介绍,我们已经知道可以通过下标的方式来访问元组的元素,当元组的元素较多时,这种方式并不是那么便捷。...五、元组类型的展开表达式 在函数调用,若最后一个参数是元组类型的展开表达式,那么这个展开表达式相当于元组元素类型的离散参数序列。...六、只读的元组类型 TypeScript 3.4 还引入了对只读元组的新支持。我们可以为任何元组类型加上 readonly 关键字前缀,以使其成为只读元组。

1.5K20

TypeScript 枚举类型

TypeScript支持数字的和基于字符串的枚举。...一、数字枚举 在 TypeScript 可以通过 enum 关键字来定义枚举,比如: enum RequestMethod { Get, Post, Put, Delete, Options...因为 JavaScript 并没有存在枚举类型,因此为了能够在大多数浏览器中正常运行,上面定义的 RequestMethod 枚举会被编译成以下 ES5 代码: "use strict"; var RequestMethod...RequestMethod["Patch"] = 11] = "Patch"; })(RequestMethod || (RequestMethod = {})); 通过观察生成的 ES5 代码可知,默认还是...当一个表达式满足下面条件之一时,它就是一个常量枚举表达式: 一个枚举表达式字面量(主要是字符串字面量或数字字面量); 一个对之前定义的常量枚举成员的引用(可以是在不同的枚举类型定义的); 带括号的常量枚举表达式

1.4K10

TypeScript函数类型

声明式类型函数 通过如下代码我们实现了一个返回值为number类型的方法,同时我们也对返回值和参数进行了约束 function funcType(name:string,age:number):number..."张三",18) 对方法进行添加默认值 function funcType2(name:string="张三",age:number=18):number{ return age; } 表达式类型函数...number):number } var funcType6:funcType5=function(name:string,age:number):number{ return age; } 联合类型重载...通过如下代码我们可以实现一个联合类型函数,当然这可以采用重载的方式 当我们的参数是number类型时我们的返回值是number类型,当我们的参数是string类型时我们的返回值是string类型,这一块具体在我们实际业务可以根据实际需求进行相应修改

78220
领券