主页上有本教程:https://ant.design/docs/react/use-in-typescript,其中显示了一些未编译的示例代码。特别是,<Button type="primary">Button</Button>
不会编译,因为它应该是htmlType
而不是type
。有人可以确认这是真的吗?还是我的安装有问题?
我注意到的另一个问题是Button
的道具具有错误的类型声明。至少在我的电脑上。我刚刚安装了antd,并且我有这个NativeButtonProps
,它有htmlType?: ButtonHTMLType
,并且声明为:export declare type ButtonHTMLType = 'submit' | 'button' | 'reset';
这非常令人困惑,因为文档指出存在称为“ primary
”,“ dashed
”和“ danger
”的类型。声明也有问题吗?
我的安装是否有坏处,但我对此表示怀疑。我试图在没有安装node.js的计算机上从头开始安装所有内容。但是结果是一样的。我在做什么错了?
更新有关该问题的更多详细信息。如果我使用此代码:
<Button type="primary">Buttonka</Button>
然后我收到此编译错误,它将不会生成js代码:
C:/TypeScript/antd-demo-ts/src/App.tsx (10,10):键入'{children:string;类型:“主要”; }'不可分配为类型((IntrinsicAttributes&IntrinsicClassAttributes&Pick&Readonly&Pick,“ htmlType”>,“ color” | ... 258更多... |“ htmlType”>&Partial <...>&Partial <...>)| ...'。 输入'{children:string;类型:“主要”; }”不能分配给“ Pick&Readonly&Pick”,“ htmlType“>,“ color” | ... 262更多... | “值“>”。 类型'{children:string;类型中缺少属性'htmlType'类型:“主要”; }'。
如果我改用htmlType="primary"
,则会收到以下警告:
{ “ resource”:“ /c:/TypeScript/antd-demo-ts/src/App.tsx”, “ owner”:“打字稿”, “ code”:“ 2322”, “严重程度”:8 “ message”:“类型'{children:string; htmlType:\” primary \“;}'不能分配给类型'((IntrinsicAttributes&IntrinsicClassAttributes&Readonly <{children ?: ReactNode;}>&R ...'。 \ n类型'{children:string; htmlType:\“ primary \”;}'不能分配给'IntrinsicAttributes&IntrinsicClassAttributes&Readonly <{children ?: ReactNode;}>&Re ...'。\ n类型' {children:string; htmlType:\“ primary \”;}'不能分配给类型'Readonly'。\ n属性'htmlType'的类型不兼容。\ n Type'\“ primary \”'不能分配给类型'\“提交\” | \“按钮\” | \“重置\” |未定义“。”, “ source”:“ ts”, “ startLineNumber”:10, “ startColumn”:10, “ endLineNumber”:10, “ endColumn”:16 }
,在这种情况下,将编译TypeScript代码,但是按钮显示为不透明/白色,而不是主要/蓝色。
事实是,css已导入到App.tsx:
import './App.css';
以及ant设计css已导入App.css:
@import '~antd/dist/antd.css';
但是无论哪种方式,我都无法在按钮上设置主要(蓝色)样式。