D3.js 用于键入的Dart JS互操作函数重载

我已经定义了一个D3 Dart JS互操作，我正在使用它来设置D3对象的值并调用它们，它工作得很好。不幸的是，D3对setter和getter都使用相同的函数，并且依赖于参数的数量来区分它们

例如，Arc对象能够设置和获取如下所示的内半径（在JavaScript中）：

我定义的省道包装器如下所示：

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external Arc();
}

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external num innerRadius();
  external Arc();
}

function arcInnerRadius(d) {
    return d.innerRadius;
}

function constant$1(x) {
    return function constant() {
        return x;
    }
}

function arc() {
    var innerRadius = arcInnerRadius;

    function arc() {
        var r0 = +innerRadius.apply(this, arguments);
        //calculate and return path
    }

    arc.innerRadius = function(_) {
        if(arguments.length) {
            if(_ === "function") {
                innerRadius = _;
            } else {
                innerRadius = constant$1(+_);
            }
            return arc;
        }
        return innerRadius;
    }

    return arc;
}

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";


@JS("arc")
class Arc {
    external Arc();
    external innerRadius([num innerRadius]);
}

Arc arc = new Arc()
    ..innerRadius(25);
num radius = arc.innerRadius();

我想定义这样一个包装器：

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external Arc();
}

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external num innerRadius();
  external Arc();
}

function arcInnerRadius(d) {
    return d.innerRadius;
}

function constant$1(x) {
    return function constant() {
        return x;
    }
}

function arc() {
    var innerRadius = arcInnerRadius;

    function arc() {
        var r0 = +innerRadius.apply(this, arguments);
        //calculate and return path
    }

    arc.innerRadius = function(_) {
        if(arguments.length) {
            if(_ === "function") {
                innerRadius = _;
            } else {
                innerRadius = constant$1(+_);
            }
            return arc;
        }
        return innerRadius;
    }

    return arc;
}

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";


@JS("arc")
class Arc {
    external Arc();
    external innerRadius([num innerRadius]);
}

Arc arc = new Arc()
    ..innerRadius(25);
num radius = arc.innerRadius();

但它抱怨名称已经被定义。如何定义省道包装器，以便在键入值的同时设置和调用该值

D3定义了如下弧：

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external Arc();
}

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external num innerRadius();
  external Arc();
}

function arcInnerRadius(d) {
    return d.innerRadius;
}

function constant$1(x) {
    return function constant() {
        return x;
    }
}

function arc() {
    var innerRadius = arcInnerRadius;

    function arc() {
        var r0 = +innerRadius.apply(this, arguments);
        //calculate and return path
    }

    arc.innerRadius = function(_) {
        if(arguments.length) {
            if(_ === "function") {
                innerRadius = _;
            } else {
                innerRadius = constant$1(+_);
            }
            return arc;
        }
        return innerRadius;
    }

    return arc;
}

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";


@JS("arc")
class Arc {
    external Arc();
    external innerRadius([num innerRadius]);
}

Arc arc = new Arc()
    ..innerRadius(25);
num radius = arc.innerRadius();

因此，getter和setter语法没有正确地包装它。设置innerRadius时，将设置代码未调用的函数，而不是指定的内部值

有一个丑陋的解决方案，如果您放弃键入并将参数设置为可选，则允许您同时执行这两项操作。因此，我当前的解决方案是如下定义包装器：

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external Arc();
}

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external num innerRadius();
  external Arc();
}

function arcInnerRadius(d) {
    return d.innerRadius;
}

function constant$1(x) {
    return function constant() {
        return x;
    }
}

function arc() {
    var innerRadius = arcInnerRadius;

    function arc() {
        var r0 = +innerRadius.apply(this, arguments);
        //calculate and return path
    }

    arc.innerRadius = function(_) {
        if(arguments.length) {
            if(_ === "function") {
                innerRadius = _;
            } else {
                innerRadius = constant$1(+_);
            }
            return arc;
        }
        return innerRadius;
    }

    return arc;
}

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";


@JS("arc")
class Arc {
    external Arc();
    external innerRadius([num innerRadius]);
}

Arc arc = new Arc()
    ..innerRadius(25);
num radius = arc.innerRadius();

您可以这样称呼它：

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external Arc();
}

@JS("arc")
class Arc {
  external Arc innerRadius(num innerRadius);
  external num innerRadius();
  external Arc();
}

function arcInnerRadius(d) {
    return d.innerRadius;
}

function constant$1(x) {
    return function constant() {
        return x;
    }
}

function arc() {
    var innerRadius = arcInnerRadius;

    function arc() {
        var r0 = +innerRadius.apply(this, arguments);
        //calculate and return path
    }

    arc.innerRadius = function(_) {
        if(arguments.length) {
            if(_ === "function") {
                innerRadius = _;
            } else {
                innerRadius = constant$1(+_);
            }
            return arc;
        }
        return innerRadius;
    }

    return arc;
}

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";


@JS("arc")
class Arc {
    external Arc();
    external innerRadius([num innerRadius]);
}

Arc arc = new Arc()
    ..innerRadius(25);
num radius = arc.innerRadius();

这是可行的，但有一个缺点，就是我们失去了一些输入的价值，因为我不能强制输入半径为一个数字。也就是说，这同样有效：

Point<num> radius = arc.innerRadius();

点半径=弧内半径（）；

直到运行时它才会爆炸

---

因此，这与它映射的函数相匹配，并且可以工作，但我真正想要的是能够使用类型进行映射，从而使用相同的名称定义一个可以返回相同类型的函数。

如果我正确理解您的问题，您希望能够设置innerRadius（值）并获取innerRadius。为此，我将做以下工作

external Arc set innerRadius(num value);
external num get innerRadius;

以上内容几乎完全符合您的要求，除了getter将按以下方式使用

num radius = arc.innerRadius;

---

我们不再需要定义自己的JavaScript定义文件，因为Dart有一个从TypeScript文件定义JavaScript的工具。这个 有关在上使用此功能的更多信息

---

多亏了，几乎可以肯定有一个TypeScript文件可以让您这样做。如果没有，请编写其中一个，它将对Dart和TypeScript社区都有帮助。

我已经尝试过这个方法，但由于D3的实现方式，它不起作用。我已经更新了问题，解释了为什么这不起作用。不过谢谢你的建议。：）