typescript中的筛选器获取错误'(string | null)[]‘不可赋值

在 TypeScript 中，筛选器获取错误 '(string | null)[]' 不可赋值是因为尝试将一个包含字符串和 null 值的数组赋值给一个筛选器变量，而筛选器变量只能接受字符串类型的值。

要解决这个问题，可以使用 TypeScript 中的类型断言或者类型守卫来确保筛选器变量只接受字符串类型的值。

类型断言：可以使用类型断言将数组中的每个元素都断言为字符串类型，排除 null 值。示例代码如下：

const filter: string[] = array.filter((item): item is string => item !== null);

在这个示例中，我们使用了 filter 方法来过滤数组中的元素，并使用类型断言 item is string 来断言每个元素都是字符串类型。这样就可以得到一个只包含字符串的新数组 filter。

类型守卫：可以使用类型守卫来在筛选器中排除 null 值。示例代码如下：

const filter: string[] = array.filter((item): item is string => item !== null);

在这个示例中，我们使用了 filter 方法来过滤数组中的元素，并使用类型守卫 item is string 来排除 null 值。这样就可以得到一个只包含字符串的新数组 filter。

推荐的腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
物联网开发平台（IoT）：https://cloud.tencent.com/product/iotexplorer
移动推送服务（TPNS）：https://cloud.tencent.com/product/tpns
腾讯云直播（CSS）：https://cloud.tencent.com/product/css

相关·内容

如何利用 TypeScript 的 Extract 提升类型定义与代码清晰度

它可以帮助我们从联合类型中筛选出我们需要的那一部分类型，大大简化了代码的复杂度。接下来，我们将通过几个简单的例子来了解它的用法和好处。...三、Extract 类型操作符 TypeScript 的联合类型就像我们类型工具箱中的瑞士军刀——多功能且必不可少。然而，在某些场景中，我们需要的却是一把手术刀：精确且锋利。...; // 错误的用法，尝试使用非文本类型会导致 TypeScript 类型错误 handleText(42); // TypeScript 类型错误: 参数类型 'number' 不能赋值给参数类型...TypeScript 类型错误 calculatePremiumCost(['color', 'size']); // TypeScript 类型错误: // 参数类型 '"color"' 不能赋值给参数类型...null userSettings: defaultSettings, notifications: null })); 在这个场景中，我们可能需要一个选择器（selector）来专门处理非

931 0

比较Go、Rust、Scala、Java、Kotlin、Python、Typescript 和 Elm中的编译器错误

开发人员的生产力受多种因素影响。我们比较了 Go、Rust、Python、Typescript、Scala 和 Java 中的编译器消息。...语言编译器消息 Java 非常简短的编译器错误，措辞令人困惑 Scala 良好的编译器错误，显示了有问题的数值 Kotlin 简短、不清楚的错误消息 Python 运行时错误，简短但比 Java 更清晰的措辞...更花哨的输出（带颜色），但与 Python 中的错误消息相同，如果你不是绝对的初学者，很容易找到问题。...最后，我们检查了著名的 Elm 的编译器错误。它有点不同，因为我没有使用类，以及 Elm 中函数的工作方式。就像 Rust 一样，它显示了它找到的类似内容，error1。...比较第一批编译器错误，我认为 Java 最糟糕，它的简短 cannot find symbol 与 Typescript 并列，因为它们没有显示有问题的源代码行。

1481 0

TypeScript 官方手册翻译计划【三】：类型收缩

它会查看这些特殊的检查语句（也就是“类型保护”）和赋值语句，并将声明的类型精炼为更具体的类型，这就是所谓的“类型收缩”。在很多编辑器中，我们可以观察到这些类型的变化。...} } 赋值正如我们先前提到的，当我们给任意变量赋值的时候，TypeScript 会查看赋值语句右部，对左部的变量类型进行合适的收缩。...如果我们赋值给 x 一个 boolean 类型的值，那么就会抛出一个错误，因为在声明类型中并不存在 boolean 类型。 let x = Math.random() < 0.5 ?...TypeScript 可以对这段代码进行分析，并发现函数体的剩余部分（return padding + input;）在 padding 为 number 的时候是不可达的。...我们不得不给类型检查器添加大量的非空值断言（!），让它确信 shape.radius 已经被定义好了，但如果把代码移除，这些断言就很容易造成错误。

2K2 0

【TypeScript 演化史 — 第二章】基于控制流的类型分析和只读属性

尽管如此，类型检查器在任何给定位置都为 command 变量使用最具体的类型在分配了字符串 “pwd” 之后，command 变量就不可能是字符串数组(联合类型中惟一的其他选项)。...在严格的 null 检查模式下，undefined 的类型会自动添加到可选属性的联合类型中，因此我们不必显式将其写出。明确赋值分析基于控制流的另一个新特性是明确赋值分析。...其思想是确保每个不可空的局部变量在使用之前都已正确初始化。只读属性在 TypeScript 2.0 中，readonly 修饰符被添加到语言中。...总结基于控制流的类型分析是 TypeScript 类型系统的一个强大的补充。类型检查器现在理解了控制流中赋值和跳转的语义，从而大大减少了对类型保护的需要。...总结基于控制流的类型分析是 TypeScript 类型系统的一个强大的补充。类型检查器现在理解了控制流中赋值和跳转的语义，从而大大减少了对类型保护的需要。

2K1 0

初识TypeScript -基础一 (持续更新)

作为一种解释型语言，只能在运行时发现错误强类型，支持静态和动态类型弱类型，没有静态类型选项最终被编译成 JavaScript 代码，使浏览器可以理解可以直接在浏览器中使用支持模块、泛型和接口...2、如果你跟着敲了代码，并且有其它的思想，你会发现当你预设了一个类型给到变量，那么后期再赋值时，只能赋值相同类型的值给到这个变量。例如: str = 123;这时候编辑器会报错。.../ 给元组错误赋值 x = [10, 'hello']; // Error 枚举,使用枚举类型可以为一组数值赋予友好的名字。...就是说你可以把 null和undefined赋值给number类型的变量。...；any不可以赋值给never。

1.1K1 0

TypeScript 黑魔法之编译选项设置

TypeScript中的所有类型。...let foo = undefined; foo = null; // 不可以假设有一个接口Member，如下所示。...一个非null的断言实质上意味着你在告诉编译器“我知道它不是null，但是请让我使用它，即使它不是null”。明确赋值断言操作符 TypeScript将会对类中未初始化的属性抛出错误。...class C { foo: number; // 可以，已经在构造器中初始化 bar: string = "hello"; // 可以，已经初始化...} 你可以使用明确赋值断言，在属性名后加后缀，来告诉TypeScript你已经在其他地方（不是在构造器中）对它进行了初始化。

8624 0

作为JavaScript的“超集”，感受一下TypeScript 的那些黑魔法

1let foo = undefined; 2foo = null; // 不可以假设有一个接口Member，如下所示。...一个非null的断言实质上意味着你在告诉编译器“我知道它不是null，但是请让我使用它，即使它不是null”。 ◆ 明确赋值断言操作符 TypeScript将会对类中未初始化的属性抛出错误。...1class C { 2 foo: number; // 可以，已经在构造器中初始化 3 bar: string = "hello"; // 可以，已经初始化...4 baz: boolean; 5 6// 错误：属性baz没有初始化，也没有在构造器中被赋值 7 constructor() { 8 this.foo...= 42; 9 } 10} 你可以使用明确赋值断言，在属性名后加后缀，来告诉TypeScript你已经在其他地方（不是在构造器中）对它进行了初始化。

1K2 0

TypeScript 3.9正式发布！平均编译时长从26秒缩短至10秒

由于 TypeScript 具有丰富的跨编辑器功能，因此其中的静态 type 检查能够在代码运行甚至文件保存之前快速指示代码中存在的错误。...除了错误检查之外，TypeScript 还允许用户在自己熟悉的编辑器中为 TypeScript 以及 JavaScript 代码提供补全、快速修复以及重构等功能。...而如果你已经在项目当中使用过 TypeScript，那么直接通过以下 npm 命令或者通过 NuGet 都能快速获取我们发布的本次新版本： npm install typescript 当然，你还可以通过以下方式获取编辑器支持...该函数的 type 声明需要两个 strings，以便其他 TypeScript 用户正常获取 type-checking 错误。...该规范要求将二者设定为不可枚举属性。因此，针对 ES5 与 ES2015 的 TypeScript 代码可能在实际执行中引发不同的行为。

1.6K2 0

【TypeScript】never 和 unknown 的优雅之道

2、TypeScript 中的 top type、bottom type 在类型系统设计中，有两种特别的类型： Top type：被称为通用父类型，也就是能够包含所有值的类型。...值会永不存在的两种情况：如果一个函数执行时抛出了异常，那么这个函数永远不存在返回值（因为抛出异常会直接中断程序运行，这使得程序运行不到返回值那一步，即具有不可达的终点，也就永不存在返回了）；函数中执行无限循环的代码...; // 错误 ne = undefined; // 错误 declare const an: any; ne = an; // 错误，any 也不可以 declareconst nev: never...4.2 never 的妙用 never 有以下的使用场景： Unreachable code 检查：标记不可达代码，获得编译提示。类型运算：作为类型运算中的最小因子。...通过深入了解 never 和 unknown 在 TypeScript 类型系统中的使用和地位，可以学习到不少类型系统设计和集合论的知识，在实际开发中合理 narrow 类型，组织起可靠安全的代码。

1.2K2 0

探索前端的三个强大符号：??、?. 和 !

defaultName; // finalName 将会是 "Anonymous" 在上面的例子中，name 是 null，所以 finalName 被赋值为 defaultName 的值，即 "Anonymous...如果 name 不为 null 或 undefined，则 finalName 会被赋值为 name 的值。...name; // userName 将会是 undefined，而不是抛出错误在第二个例子中，当 user 被设置为 null 时，尝试访问 user.profile.name 通常会导致运行时错误...是一个类型断言，它告诉 TypeScript 编译器某个表达式一定不是 null 或 undefined。这是一个在 TypeScript 中常用的操作符，用于在类型检查期间提供额外的信息给编译器。...使用非空断言时，开发者实际上是在告诉编译器：“我知道这个值不可能是 null 或 undefined，所以请相信我，不要在这里报错。”

3581 0

【TypeScript 演化史 — 第一章】non-nullable 的类型

在这篇文章中，我们将讨论发布于 TypeScript 2.0 中的 non-nullable 类型，这是对类型系统的一个重大的改进，该特性可对 null 和 undefined 的检查。...cannot read property 'x' of undefined 和 undefined is not a function 在 JS 中是非常常见的错误,non-nullable 类型可以避免此类错误...null 和 undefined 的值在 TypeScript 2.0 之前，类型检查器认为 null 和 undefined 是每种类型的有效值。...基本上，null 和 undefined 可以赋值给任何东西。...用联合类型构建可空性由于在启用严格的 null 检查时，类型在默认情况下是不可空的，所以我们需要显式指定可为空，并告诉类型检查器我们希望哪些变量为空。

2.4K2 0

【TS 演化史 -- 17】各文件的JSX工厂、有条件类型和映射类型修饰符

下面是一个在 TypeScript 的lib.es5.d.ts类型定义文件中预定义的有条件类型的例子 /** * Exclude null and undefined from T */ type...string和string[]都不能赋值给 null | undefined，这就是前两种类型选择string和string[]的原因。...} 实际上，这是咱们期望的类型:在User类型中，只有name属性不可空。...预定义的有条件类型 TypeScript 2.8 在lib.d.ts里增加了一些预定义的有条件类型： Exclude -- 从T中剔除可以赋值给U的类型。...Extract -- 提取T中可以赋值给U的类型。 NonNullable -- 从T中剔除null和undefined。

2.5K2 0

理解 TypeScript 类型拓宽

但是在静态分析时，当 TypeScript 检查你的代码时，变量含有一组可能的值和类型。当你使用常量初始化变量但不提供类型时，类型检查器需要确定一个。...换句话说，它需要根据你指定的单个值来确定一组可能的值。在 TypeScript 中，此过程称为拓宽。理解它可以帮助你理解错误并更有效地使用类型注释。...通过 TypeScript 的错误提示消息，我们知道是因为变量 x 的类型被推断为 string 类型，而 getComponent 函数期望它的第二个参数有一个更具体的类型。...(vec, x); // OK 因为 x 不能重新赋值，所以 TypeScript 可以推断更窄的类型，就不会在后续赋值中出现错误。...因为字符串字面量型 “x” 可以赋值给 “x”|”y”|”z”，所以代码会通过类型检查器的检查。然而，const 并不是万灵药。对于对象和数组，仍然会存在问题。

1.6K4 0

typescript 的数据类型有哪些

中 null 表示 “什么都没有”，是一个只有一个值的特殊类型，表示一个空对象引用，而undefined表示一个没有设置值的变量默认情况下null和undefined是所有类型的子类型，就是说你可以把...这有助于在开发阶段发现和预防潜在的类型错误，提高代码的健壮性和可维护性。 2.类型注解：在TypeScript中，可以使用类型注解来显式声明变量的类型，如let num: number = 10;。...而在JavaScript中，不需要显式声明变量的类型，可以直接赋值。...4.编译过程：TypeScript需要通过编译器将TypeScript代码转换为可执行的JavaScript代码，然后在浏览器或Node.js环境中运行。...而JavaScript代码可以直接在浏览器或Node.js中运行。 5.模块和导入：TypeScript支持使用CommonJS、AMD或ES6等模块系统，并提供了对第三方库的类型定义支持。

1411 0

深入浅出TypeScript | 青训营笔记

TS 进阶类型操作符在 TypeScript 中，有三种常见的类型操作符：交叉类型、联合类型和类型断言。 1....然后用 value1 和 value2 分别赋值为数字和字符串，都是合法的。但是尝试将 value3 赋值为布尔值时，会得到一个类型错误。 3....然后使用类型断言获取 value 的长度，并将结果赋值给变量 length1 和 length2。两种方式都可以实现类型转换，但是推荐使用 as 关键字的语法。 4....interface Kitten { purrs: boolean; } interface Kitten { colour: string; } // 与此同时，类型别名不可以在外部变更它的声明...// 启用严格的 null 检查 "noImplicitThis": true, // 当 this 表达式值为 any 类型的时候，生成一个错误 "alwaysStrict

811 0

TypeScript 学习笔记(一)

= 'Tom'; let sentence: string = `my name is ${aString}`; 空值 void void 类型的变量只能赋值为 undefined 和 null let...Tom'); } null 和 undefined undefined 类型的变量只能被赋值为 undefined，null 类型的变量只能被赋值为 null let u: undefined =...未手动赋值的 Wed 和手动赋值的 Thu 取值重复了，但是 TypeScript 并不会报错，该种情况可能会引起取值错误，所以使用的时候最好避免出现取值重复的情况。...中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。...private 私有属性或方法，不能在声明它的类的外部访问，也不可以在子类中访问 protected 受保护的属性或方法，它和 private 类似，区别是它可以在子类中访问 class Person

2.7K1 0

TypeScript 官方手册翻译计划【二】：普通类型

即使类型断言是错误的，也不会抛出异常或者产生 null TypeScript 只允许断言之后的类型比之前的类型更具体或者更不具体。...这个规则可以防止出现下面这样“不可能存在的”强制类型转换： const x = "hello" as number; // 类型 "string" 到类型 "number" 的转换可能是错误的，因为两种类型不能充分重叠...的属性赋值为 1 是一个错误。...因为在创建 req 和调用 handleRequest 之间可能会执行其它代码，req.method 也许会被赋值为类似 "GUESS" 这样的字符串，因此 TypeScript 会认为这样的代码是存在错误的...，可以有效地断言某个值不可能为 null 或者 undefined： function liveDangerously(x?

2.2K2 0

Typescript 严格模式有多严格？

OK const username = user.username.toLowerCase(); 通过向该username属性添加一个明确的赋值断言，我们告诉类型检查器：username，即使它自己无法检测到该属性..., [1, 2]) // 3 在你不记得参数类型时，非严格模式下不会校验参数类型和数量，运行代码时，Typescript和环境（可能是浏览器）都不会引发错误： // Typescript非严格模式 function...第一个赋值语句在默认的类型检查模式中是允许的，但是在严格函数类型模式下会被标记错误。...而严格函数类型模式将它标记为错误，因为它不能被证明合理。任何一种模式中，第三个赋值都是错误的，因为它永远不合理。...[3] TypeScript 严格函数类型[4] 在面试的过程中，常被问到为什么Typescript比JavaScript好用？

3K2 0

1.8W字|了不起的 TypeScript 入门教程（第二版）

不支持模块，泛型或接口社区的支持仍在增长，而且还不是很大大量的社区支持以及大量文档和解决问题的支持 1.2 获取 TypeScript 命令行的 TypeScript 编译器可以使用 npm 包管理器来安装...就是说你可以把 null 和 undefined 赋值给 number 类型的变量。...方法中的控制流程，这时候 else 分支的 foo 类型会被收窄为 boolean 类型，导致无法赋值给 never 类型，这时就会产生一个编译错误。...3.3 确定赋值断言在 TypeScript 2.7 版本中引入了确定赋值断言，即允许在实例属性和变量声明后面放置一个 ! 号，从而告诉 TypeScript 该属性会被明确地赋值。...: number; 确定赋值断言，TypeScript 编译器就会知道该属性会被明确地赋值。四、类型守卫类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。

10.2K5 1

TypeScript基础知识

可以赋值给其他类型，否则null和undefined只能给它们自己赋值。...//false 对象类型 object、Object 以及 { } object 看图可以发现，当赋值给object的类型为number、string、boolean时都会报错，而null和undefined...所以所有的原始类型、非原始类型都可以赋值给Object（严格模式下null和undefined不可以） let object: Object; object = 1;//正确 object = 'tiantian...unknown 任何类型的值都可以赋值给它，但它只能赋值给unknown和any 类型操作联合类型联合类型用|分隔，表示取值可以为多种类型中的一种 let status:string|number...; 语句可以通过 TypeScript 类型检查器的检查。但在生成的 ES5 代码中，! 非空断言操作符被移除了，所以在浏览器中执行以上代码，在控制台会输出 undefined。

2.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云