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

dxxyhpgq  于 2022-12-12  发布在  React
关注(0)|答案(2)|浏览(87)

我真的被如何正确地使用@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'类型应该是

siv3szwd

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,
        }) || ""
      }
    />
  );
};
hzbexzde

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() || ""} />;
      
}

相关问题