如何解决 typescript 中 type 'unknown' is not assignable to type 错误
当我们尝试将类型为未知的值分配给不同类型的值时,会发生“type 'unknown' is not assignable to type”错误。 要解决该错误,请在赋值之前使用类型断言或类型保护来验证两个值是否具有兼容的类型。
下面是产生上述错误的示例。
const a: unknown = 'james';
// ⛔️ error: type 'unknown' is
// not assignable to type 'string'.ts(2322)
const b: string = a;
a
变量的类型未知。
这通常发生在从远程 api 获取数据时,因为 typescript 不知道我们正在使用的值的类型。
unknown
类型是 any
的类型安全类型。
如果我们确定特定值具有兼容类型,但 typescript 不知道,请使用类型断言,例如
value as righttype
。
const a: unknown = 'james';
const b: string = a as string;
当我们有关于 typescript 不知道的值类型的信息时,使用类型断言。
我们有效地告诉 typescript a 变量将是一个字符串,不用担心。
现在左侧和右侧的值具有兼容的类型,赋值不会导致错误。
另一种ag捕鱼王app官网的解决方案是使用类型保护。
const a: unknown = 'james';
let b = '';
if (typeof a === 'string') {
b = a;
}
console.log(b); // 👉️ "james"
在进行赋值之前,我们明确检查变量 a 是否存储了字符串类型的值。
typescript 知道一旦我们进入 if 块,变量 a 就保证是一个字符串。
当处理未知类型时,我们基本上告诉 typescript——我们将获得这个值,但我们不知道它的类型。 我们只是要检查几个 if 语句来跟踪它并安全地使用它。 在 if
块中,为我们提供对所检查的特定类型的支持。
下面是一个在处理对象时如何使用类型保护的例子。
const person: unknown = {
name: 'james',
country: 'chile',
};
type person = {
name: string;
country: string;
};
// 👇️ checks if obj has properties of person
function isperson(obj: any): obj is person {
return (
typeof obj === 'object' &&
obj !== null &&
'name' in obj &&
'country' in obj
);
}
let james: person;
if (isperson(person)) {
// 👉️ person has type of person here
james = person;
} else {
james = { name: '', country: '' };
}
console.log(james); // 👉️ {name: 'james', country: 'chile'}
我们使用用户定义的类型保护来检查对象是否具有 person 类型的所有属性。
obj is person
语法是一个类型谓词,其中 obj 必须是函数采用的参数的名称。
如果 isperson
函数返回 true,typescript 就知道传入的值是 person
类型,并允许我们将其分配给变量。
上面的示例只是检查传入的值是否是一个对象并包含名称和国家/地区属性。
我们还必须检查 null,因为在 javascript(和 typescript)中,typeof null
返回“object”。
如果 person 变量不存储兼容类型的值,我们将使用默认值。
我们还可以在初始化变量时设置默认值。
const person: unknown = {
name: 'james',
country: 'chile',
};
type person = {
name: string;
country: string;
};
// 👇️ set defaults upon initialization
let james: person = {
name: '',
country: '',
};
// 👇️ checks if obj has properties of person
function isperson(obj: any): obj is person {
return (
typeof obj === 'object' &&
obj !== null &&
'name' in obj &&
'country' in obj
);
}
if (isperson(person)) {
// 👉️ person is type person here
james = person;
}
// 👇️ {name: 'james', country: 'chile'}
console.log(james);
是否能够使用此方法取决于用例。
目标是确保分配的左侧和右侧的值具有兼容的类型。
下面是一个示例,说明如何使用类型保护来检查未知类型的值是否为数组。
const data: unknown = [
{
name: 'james',
country: 'chile',
},
{
name: 'alice',
country: 'germany',
},
];
type person = {
name: string;
country: string;
};
let people: person[] = [];
if (array.isarray(data)) {
people = data as person[];
}
// [
// { name: 'james', country: 'chile' },
// { name: 'alice', country: 'germany' }
// ]
console.log(people);
我们使用 array.isarray()
方法在赋值之前检查数据变量是否存储了一个数组。
我们可能必须更加严格并检查数组是否有任何元素以及它们是否包含特定属性等。
总结
当我们尝试将类型为未知的值分配给不同类型的值时,会发生“type 'unknown' is not assignable to type”错误。 要解决该错误,请在赋值之前使用类型断言或类型保护来验证两个值是否具有兼容的类型。
转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处
本文地址:
相关文章
在 angularjs 中设置 select from typescript 的默认选项值
发布时间:2023/04/14 浏览次数:132 分类:angular
-
本教程提供了在 angularjs 中从 typescript 中设置 html 标记选择的默认选项的解释性ag捕鱼王app官网的解决方案。
在 angular 中使用 typescript 的 getelementbyid 替换
发布时间:2023/04/14 浏览次数:259 分类:angular
-
本教程指南提供了有关使用 typescript 在 angular 中替换 document.getelementbyid 的简要说明。这也提供了在 angular 中 getelementbyid 的最佳方法。
在 typescript 中使用 try..catch..finally 处理异常
发布时间:2023/03/19 浏览次数:385 分类:
-
本文详细介绍了如何在 typescript 中使用 try..catch..finally 进行异常处理,并附有示例。
发布时间:2023/03/19 浏览次数:254 分类:
-
本教程指南通过特定的实现和编码示例深入了解了 typescript 中 declare 关键字的用途。
发布时间:2023/03/19 浏览次数:962 分类:
-
本篇文章演示了类的 get 和 set 属性以及如何在 typescript 中实现它。
在 typescript 中格式化日期和时间
发布时间:2023/03/19 浏览次数:269 分类:
-
本教程介绍内置对象 date() 并讨论在 typescript 中获取、设置和格式化日期和时间的各种方法。
在 typescript 中返回一个 promise
发布时间:2023/03/19 浏览次数:586 分类:
-
本教程讨论如何在 typescript 中返回正确的 promise。这将提供 typescript 中 returns promise 的完整编码示例,并完整演示每个步骤。
在 typescript 中定义函数回调的类型
发布时间:2023/03/19 浏览次数:1445 分类:
-
本教程说明了在 typescript 中为函数回调定义类型的ag捕鱼王app官网的解决方案。为了程序员的方便和方便,实施了不同的编码实践指南。