32
4
I'm quite new to TS and would like to understand why I get a type error in the following code (simplified):
我是TS的新手，我想知道为什么我在以下代码中遇到类型错误(简化)：
个人中心
文章发布
退出"use client";
import { ArrowDownWideNarrow, Settings } from "lucide-react";
interface LinkItemProps {
name: string;
}
const iconMap = {
Categories: <ArrowDownWideNarrow />,
Admin: <Settings />,
};
export const LinkItem = ({ name }: LinkItemProps) => {
<div>
{iconMap[name]}
</div>
}
The error is in the `{iconMap[name]}:
错误在`{iconMap[名称]}中：
"Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ Categories: Element; Admin: Element; }'.
“元素隐式具有‘any’类型，因为‘字符串’类型的表达式不能用于索引类型‘{Categories：Element；Admin：Element；}’。
No index signature with a parameter of type 'string' was found on type '{ Categories: Element; Admin: Element; }'."
在类型‘{Categories：Element；Admin：Element；}’上未找到参数类型为‘STRING’的索引签名。“
The parent element has the following:
父元素具有以下内容：
const LINKS = [
{
href: "/admin",
name: "Admin",
id: "admin",
},
{
href: "/categories",
name: "Categories",
id: "categories",
},
];
export const Sidebar = async () => {
return (
<div>
{LINKS.map((link) => (
<div key={link.href}>
<LinkItem href={link.href} id={link.id} name={link.name} />
</div>
))}
</div>
)
}
You can narrow the type of name with interface LinkItemProps { name: keyof typeof iconMap } to make it work.
您可以使用接口LinkItemProps{name：keyof typeof iconMap}缩小名称类型以使其工作。
No index signature with a parameter of type 'string' was found on type '{ Categories: Element; Admin: Element; }'."
The string type is too wide, you could be more specific on the name prop type so it properly inherits the fields based on the iconMap object.
字符串类型太宽，您可以更具体地说明名称道具类型，以便它正确地继承基于图标映射对象的字段。
打字演示
interface LinkItemProps {
name: keyof typeof iconMap;
}
or a manual, strictly typed approach:
或者是一种手动、严格键入的方法：
interface LinkItemProps {
name: 'Categories' | 'Admin';
}
更新的打字演示
Thank you very much, kind user ;) But now I have an error in the parent element (I edited my question to include the parent). The error is there now saying: "Type 'string' is not assignable to type '"Categories" | "Admin"'." That's in property "name" in the LinkItem inside the map. Thank you, I understand my question must be quite basic :)
非常感谢，善良的用户；)但现在我在父元素中有一个错误(我编辑了我的问题以包括父元素)。现在出现的错误是：“类型‘字符串’不可分配给类型‘”类别“|”Admin“”。“它位于地图内LinkItem的属性“name”中。谢谢，我明白我的问题必须非常基本：)
@GuillermoBrachetta Check my "Updated typescript demo"
@GuillermoBrachetta查看我的“更新打字稿演示”
That indeed cleared all errors, thank you! Now I'll try to digest it :D
这确实清除了所有的错误，谢谢！现在我要试着去消化它：D
32
4
0
如何使用 SPListCollection.Add(String, String, String, String, Int32, String, SPListTemplate.QuickLaunchO
我刚刚开始使用 C++ 并且对 C# 有一些经验，所以我有一些一般的编程经验。然而，似乎我马上就被击落了。我试过在谷歌上寻找，以免浪费任何人的时间，但没有结果。 int main(int argc,
这个问题已经有答案了: In Java 8 how do I transform a Map to another Map using a lambda? (8 个回答) Convert a Map>
我正在使用 node + typescript 和集成的 swagger 进行 API 调用。我 Swagger 提出以下要求 http://localhost:3033/employees/sear
我是 C++ 容器模板的新手。我收集了一些记录。每条记录都有一个唯一的名称，以及一个字段/值对列表。将按名称访问记录。字段/值对的顺序很重要。因此我设计如下: typedef string
我需要这两种方法，但j2me没有，我找到了一个replaceall();但这是 replaceall(string,string,string); 第二个方法是SringBuffer但在j2me中它没
If string is an alias of String in the .net framework为什么会发生这种情况，我应该如何解释它: type JustAString = string
我有两个列表(或字符串):一个大，另一个小。 我想检查较大的(A)是否包含小的(B)。 我的期望如下: 案例 1. B 是 A 的子集 A = [1,2,3] B = [1,2] contains(A
我有一个似乎无法解决的小问题。 这里...我有一个像这样创建的输入... var input = $(''); 如果我这样做......一切都很好 $(this).append(input); 如果我
我有以下代码片段 string[] lines = objects.Split(new string[] { "\r\n", "\n" }, StringSplitOptions.No
这可能真的很简单，但我已经坚持了一段时间了。 我正在尝试输出一个字符串，然后输出一个带有两位小数的 double ，后跟另一个字符串，这是我的代码。 System.out.printf("成本:%.2
以下是 Cloud Firestore 列表查询中的示例之一 citiesRef.where("state", ">=", "CA").where("state", "= 字符串，我们在Stack O
我正在尝试检查一个字符串是否包含在另一个字符串中。后面的代码非常简单。我怎样才能在 jquery 中做到这一点？ function deleteRow(locName, locID) { if
这个问题在这里已经有了答案: How to implement big int in C++ (14 个答案) 关闭 9 年前。 我有 2 个字符串，都只包含数字。这些数字大于 uint64_t 的
我有一个带有自定义转换器的 Dozer 映射: com.xyz.Customer com.xyz.CustomerDAO customerName
这个问题在这里已经有了答案: How do I compare strings in Java? (23 个回答) 关闭 6 年前。 我想了解字符串池的工作原理以及一个字符串等于另一个字符串的规则是
我已阅读 this问题和其他一些问题。但它们与我的问题有些无关 对于 UILabel 如果你不指定 ? 或 ! 你会得到这样的错误: @IBOutlet property has non-option
这两种方法中哪一种在理论上更快，为什么？ (指向字符串的指针必须是常量。) destination[count] 和 *destination++ 之间的确切区别是什么？ destination[co
This question already has answers here: Closed 11 years ago. Possible Duplicates: Is String.Format a
我有一个Stream一个文件的，现在我想将相同的单词组合成 Map这很重要，这个词在 Stream 中出现的频率. 我知道我必须使用 collect(Collectors.groupingBy(..)
我是一名优秀的程序员,十分优秀！