reactjs 如何让d3形状构造函数在typescript中正确地返回类型字符串？

dxxyhpgq 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(88)

我真的被如何正确地使用@types/d3卡住了。所有的返回类型都很混乱，甚至console.logging也没有帮助。
实际上，当我调用arc（）构造时，我会得到一个错误：未提供'd'的参数。但当我运行console.log时，它只返回正确的路径字符串，而不是错误或无效值。
我似乎找不到在构造函数中把什么作为参数作为d值。还有，我见过的很多js代码都没有任何输入，typescript需要有一个附加值的具体原因是什么？

const Test = () => {
      // ...........
     // causes error if mArc is not mArc: any
     const mArc = arc() // how to not force any as a type here
        .innerRadius(radius)
        .outerRadius(width + radius)
        .startAngle(Math.PI / 2)
        .endAngle((Math.PI * 3) / 2)
      
     console.log(mArc()); // returns a string...
     // but typescript throws an error, An argument for 'd' was not provided.
     return <path d={mArc()} />;
      
}

对不起，我可能没有正确理解这个软件工程。当我在types.d文件中查找d3-shape时，它说没有找到'Datum'的定义，这是'd'类型应该是

reactjs

来源：https://stackoverflow.com/questions/68675897/how-to-get-d3-shape-constructors-to-return-the-type-string-properly-in-typescrip

2条答案

按热度按时间

siv3szwd1#

我也在努力让d3的类型安全工作。有两种方法可以使用arc方法，通过链接（这似乎是最流行的）或通过对象。d3类型定义似乎不能（完全）使用链接。问题是不带参数调用mArc（）函数（尽管它能工作）。
一个问题是cornerRadius似乎不在对象的类型定义中（padAngle确实有效），但是可以通过链接在mArc函数上设置它。
下面的代码段将在没有类型错误的情况下工作。

import * as d3 from "d3";
const Test = () => {

  const radius = 100;
  const width = 5;

  const mArc = d3.arc();

  return (
    <path
      d={
        mArc({
          innerRadius: radius,
          outerRadius: width + radius,
          startAngle: Math.PI / 2,
          endAngle: (Math.PI * 3) / 2,
        }) || ""
      }
    />
  );
};

赞(0）回复(0）举报 2022-12-12

hzbexzde2#

答得恰到好处：

const Test = () => {
     const mArc = arc<void, void>()
        .innerRadius(radius)
        .outerRadius(width + radius)
        .startAngle(Math.PI / 2)
        .endAngle((Math.PI * 3) / 2)
      
     console.log(mArc());
     return <path d={mArc() || ""} />;
      
}

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs 如何让d3形状构造函数在typescript中正确地返回类型字符串？

2条答案

相关问题

热门标签

最新问答