Арман's questions

描述

有一个特定的类MachineState<T>，T这是它“接受”的类型。我创建了一个函数，可以同时将多个数据点“馈送”给多个 MachineState：

await context.runFunctionsParallel(sign(5), [
    [this.#stateBettingOnSport, { id: 3 }], /// [MachineState<A>, A]
    [this.#stateBettingOnCasino, { code: "cb12" }], /// [MachineState<B>, B]
]);

实际上，我创建了这个函数：

async runFunctionsParallel<T extends readonly [MachineState<object>, object][]>(signature: SignatureGenerator, values: {
    -readonly [K in keyof T]:
    T[K] extends [MachineState<infer P>, infer V]
    ? P extends V
    ? V extends P
    ? [MachineState<P>, P]
    : never
    : never
    : never;
}): Promise<unknown[]> {
    ...
}

问题

该函数不会产生错误，但也无法工作。我没有得到典型的提示和检查。

问题

我的错误在哪里？

补充1

一个不使用数组即可工作的函数定义示例：

async runFunction<T extends {}>(signature: SignatureFunction, state: MachineState<T>, data: T): Promise<unknown> {
    ...
}

描述

我写了一个简单的附录：

declare global {
    interface Promise<T> {
        isFulfilled: Promise<boolean>;
    }
}

Object.defineProperty(Promise.prototype, "isFulfilled", {
    async get<T>(this: Promise<T>): Promise<boolean> {
        const symbol = Promise.resolve(Symbol());
        try {
            const result = (await Promise.race([this, symbol]) !== symbol);
            console.log("after promise");
            return result;
        } catch {
            console.log(`catch`);
            return true;
        }
    }
});

const promise = new Promise<void>(async (resolve) => {
    throw new Error(`Test error`);
});
console.log(await (promise.isFulfilled));

export { };

我们看到，Promise 的执行发生在 try 中，并没有超越它。这种情况下，如果出现错误，try应该捕获它，并去catch。
我收到一个错误并且尝试继续：

问题

为什么会发生这种情况？
我该如何修复我的功能？

描述

我正在尝试制作一个选择性列表，当您单击其中的某个元素时，它应该平滑地移动到中心。我正在尝试使用溢出和滚动条来实现这一点。

const divScrollPicker = document.querySelector(`div#scroll-picker`);
divScrollPicker?.querySelectorAll(`button`).forEach((button, index) => {
    button.addEventListener(`click`, event => button.scrollIntoView({ behavior: `smooth`, block: `center` }));
});

body {
  position: fixed;
  inset: 0;
  max-width: 100vmin;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  align-content: center;
}

div#scroll-picker {
  display: flex;
  flex-direction: column;
  max-height: 30px;
  overflow-y: visible;
  scroll-snap-type: y mandatory;
  scroll-snap-align: center;
  scroll-padding: 0;

  &>* {
    min-height: 100%;
    max-height: 100%;
  }
}

div#scroll-picker,
div#picker-container {
  border: 1px solid black;
}

<div id="scroll-picker">
  <button type="button" title>Button 1</button>
  <button type="button" title>Button 2</button>
  <button type="button" title>Button 3</button>
  <button type="button" title>Button 4</button>
  <button type="button" title>Button 5</button>
  <button type="button" title>Button 6</button>
  <button type="button" title>Button 7</button>
  <button type="button" title>Button 8</button>
</div>
<div id="picker-container"></div>

问题

1. 为了让元素滑动，我必须启用滑块，即overflow: scroll或auto。
2. 如果我启用滑块，则不会显示块之外的元素。
3. 如果块外的元素未显示，我无法单击它们以使它们滑动到中心。

我仍然找不到摆脱这个恶性循环的方法。

问题

你有解决办法吗？
或者你能建议另一种方式吗？

描述

我创建了一个带有静态 FPS 的简单“引擎”。

class StaticEngine extends EventTarget {
    constructor() {
        super();

        let previous = 0;
        /**
         * @param {DOMHighResTimeStamp} current 
         * @returns {void}
         */
        const callback = (current) => {
            const difference = current - previous;
            for (let index = 0; index < difference / this.#gap; index++) {
                if (this.#focus && this.launched) this.dispatchEvent(new Event(`update`));
                previous = current;
            }
            requestAnimationFrame(callback);
        };
        requestAnimationFrame(callback);

        window.addEventListener(`focus`, (event) => this.#focus = true);
        window.addEventListener(`blur`, (event) => this.#focus = false);
    }
    /** @type {boolean} */
    launched = false;
    /** @type {number} */
    #gap = 1000 / 120;
    /** @type {boolean} */
    #focus = document.hasFocus();
}

它有一个大问题：如果选项卡的焦点丢失，则dispatchEvent不会发生调用，但计数器requestAnimationFrame会累积，当焦点返回时，引擎将不得不一次处理数千个周期。即使我创建了检查焦点的逻辑这一事实也不能确保 100% 的可靠性，因为，例如，在 Edge 中，当处理程序不起作用时打开时，或者当我们使用+在选项卡之间切换时
，会出现错误。 另外，我希望能够在 Workers 中使用该引擎，但它们在那里不可用。当然，我可以通过 发送焦点状态，但这会违反类的完整性，并且是一个拐杖而不是解决方案。Inspect elementblurAltTab
documentwindowmessage

问题

基本问题：当选项卡未聚焦时如何停止计时器？
如果主要问题无法解决：我应该如何替换焦点逻辑，使其至少在 Workers 中正常工作？

描述

情况很混乱，我会尽力详细解释一下。

第 1 部分

首先，我创建一个创建者Promise函数AbortSignal：

/**
 * @template T
 * @param {(signal: AbortSignal, resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} callback
 * @returns {Promise<T>}
 */
Promise.withSignal = async function (callback) {
    const controller = new AbortController();
    const { promise, resolve, reject } = Promise.withResolvers();
    try {
        callback(controller.signal, resolve, reject);
        return await promise;
    } finally {
        controller.abort();
    }
};

请注意，该函数保证完成后Promise，signal状态将为aborted.

第2部分

然后我创建一个异步确认：

const dialogConfirm = document.querySelector(`dialog.pop-up.confirm`);
dialogConfirm.addEventListener(`click`, (event) => {
    if (event.target === dialogConfirm) dialogConfirm.close();
});

/**
 * @returns {Promise<boolean>} 
 */
Window.prototype.confirmAsync = async function () {
    dialogConfirm.showModal();

    const buttonAccept = dialogConfirm.querySelector(`button.highlight`);
    const buttonDecline = dialogConfirm.querySelector(`button.invalid`);

    try {
        return await Promise.withSignal((signal, resolve, reject) => {
            buttonAccept.addEventListener(`click`, (event) => resolve(true), { signal });
            buttonDecline.addEventListener(`click`, (event) => resolve(false), { signal });
            dialogConfirm.addEventListener(`close`, (event) => resolve(false), { signal });
        });
    } finally {
        dialogConfirm.close();
    }
};

我们假设 HTML 附加到页面上

第三部分

下面我创建一个“生成”的类Promise：

/**
 * @template T
 */
class PromiseFactory {
    /**
     * @param {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} executor 
     */
    constructor(executor) {
        this.#executor = executor;
    }
    /** @type {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} */
    #executor;
    /**
     * @returns {Promise<T>}
     */
    async run() {
        const { promise, resolve, reject } = Promise.withResolvers();
        await this.#executor.call(promise, resolve, reject);
        return promise;
    }
    /**
     * @param {(value: T) => boolean} predicate 
     */
    async runUntil(predicate) {
        while (true) {
            try {
                const result = await this.run();
                if (!predicate(result)) continue;
                return result;
            } catch {
                continue;
            }
        }
    }
}

第 4 部分

最后我把它们放在一起：

/** @type {PromiseFactory<boolean>} */
const factory = new PromiseFactory(async (resolve) => resolve(await window.confirmAsync()));

factory.runUntil(result => {
    console.log(result);
    return result;
});

这个设计的重点是创造一些可以“重复”Promise直到达到预期结果的东西。好像这段代码到现在为止还应该打开对话框，直到您单击“接受”。

完整的工作示例：

/**
 * @template T
 * @param {(signal: AbortSignal, resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} callback
 * @returns {Promise<T>}
 */
Promise.withSignal = async function (callback) {
  const controller = new AbortController();
  const { promise, resolve, reject } = Promise.withResolvers();
  try {
    callback(controller.signal, resolve, reject);
    return await promise;
  } finally {
    controller.abort();
  }
};

const dialogConfirm = document.querySelector(`dialog.pop-up.confirm`);
dialogConfirm.addEventListener(`click`, (event) => {
  if (event.target === dialogConfirm) dialogConfirm.close();
});

/**
 * @returns {Promise<boolean>} 
 */
Window.prototype.confirmAsync = async function () {
  dialogConfirm.showModal();

  const buttonAccept = dialogConfirm.querySelector(`button.highlight`);
  const buttonDecline = dialogConfirm.querySelector(`button.invalid`);

  try {
    return await Promise.withSignal((signal, resolve, reject) => {
      buttonAccept.addEventListener(`click`, (event) => resolve(true), { signal });
      buttonDecline.addEventListener(`click`, (event) => resolve(false), { signal });
      dialogConfirm.addEventListener(`close`, (event) => resolve(false), { signal });
    });
  } finally {
    dialogConfirm.close();
  }
};

/**
 * @template T
 */
class PromiseFactory {
  /**
   * @param {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} executor 
   */
  constructor(executor) {
    this.#executor = executor;
  }
  /** @type {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} */
  #executor;
  /**
   * @returns {Promise<T>}
   */
  async run() {
    const { promise, resolve, reject } = Promise.withResolvers();
    await this.#executor.call(promise, resolve, reject);
    return promise;
  }
  /**
   * @param {(value: T) => boolean} predicate 
   */
  async runUntil(predicate) {
    while (true) {
      try {
        const result = await this.run();
        if (!predicate(result)) continue;
        return result;
      } catch {
        continue;
      }
    }
  }
}

/** @type {PromiseFactory<boolean>} */
const factory = new PromiseFactory(async (resolve) => resolve(await window.confirmAsync()));

factory.runUntil(result => {
  console.log(result);
  return result;
});

<dialog class="pop-up confirm">
  <button class="highlight">Accept</button>
  <button class="invalid">Decline</button>
</dialog>

问题

问题是，如果按 Decline，就会开始无限循环，尽管程序是异步的并且不会冻结，但它仍然是错误的。
我只是不明白为什么我有一个无限循环。
我仍然不知道如何解决它。

描述

我创建了简单的类来在 TypeScript 中处理 1D 和 2D 向量。在其中我还添加了带有重载的“operator +”，以使其更方便工作：

class Vector1 {
    static ["+"](vector: Readonly<Vector1>, scalar: number): Vector1;
    static ["+"](first: Readonly<Vector1>, second: Readonly<Vector1>): Vector1;
    static ["+"](arg1: Readonly<Vector1>, arg2: Readonly<Vector1> | number): Vector1 {
        // Код не важен
        return new Vector1();
    }
    x: number;
}

class Vector2 extends Vector1 {
    static ["+"](vector: Readonly<Vector2>, scalar: number): Vector2;
    static ["+"](first: Readonly<Vector2>, second: Readonly<Vector1>): Vector2;
    static ["+"](first: Readonly<Vector2>, second: Readonly<Vector2>): Vector2;
    static ["+"](arg1: Readonly<Vector2>, arg2: Readonly<Vector2> | Readonly<Vector1> | number): Vector2 {
        // Код не важен
        return new Vector2();
    }
    y: number;
}

这没有任何问题，它可以完美编译。但是，如果我尝试使用 JavaScript + JSDoc 编写相同的代码并启用类型检查......

class Vector1 {
    /**
     * @overload
     * @param {Readonly<Vector1>} vector 
     * @param {number} scalar 
     * @returns {Vector1} 
     */
    /**
     * @overload
     * @param {Readonly<Vector1>} first 
     * @param {Readonly<Vector1>} second 
     * @returns {Vector1} 
     */
    /**
     * @param {Readonly<Vector1>} arg1 
     * @param {Readonly<Vector1> | number} arg2 
     * @returns {Vector1} 
     */
    static ["+"](arg1, arg2) {
        return new Vector1();
    }
    /** @type {number} */
    x;
}

class Vector2 extends Vector1 {
    /**
     * @overload
     * @param {Readonly<Vector2>} vector 
     * @param {number} scalar 
     * @returns {Vector2} 
     */
    /**
     * @overload
     * @param {Readonly<Vector2>} first 
     * @param {Readonly<Vector1>} second 
     * @returns {Vector2} 
     */
    /**
     * @overload
     * @param {Readonly<Vector2>} first 
     * @param {Readonly<Vector2>} second 
     * @returns {Vector2} 
     */
    /**
     * @param {Readonly<Vector2>} arg1 
     * @param {Readonly<Vector2> | Readonly<Vector1> | number} arg2 
     * @returns {Vector2} 
     */
    static ["+"](arg1, arg2) {
        return new Vector2();
    }
    /** @type {number} */
    y;
}

...然后编译器有强烈的情绪：

类静态端“typeof Vector2”错误地扩展了基类静态端“typeof Vector1”。

属性“[”+”]”的类型不兼容。

类型 '{ （向量：只读，标量：数字）：Vector2； （第一个：只读，第二个：只读）：Vector2； （第一个：只读<...>，第二个：只读<...>）：Vector2； }' 不可分配给类型 '{ （向量：只读，标量：数字）：Vector1; （第一个：只读，第二个：只读）：Vector1； }'。

参数“向量”和“向量”的类型不兼容。

“Readonly”类型中缺少属性“y”，但“Readonly”类型中需要属性“y”。ts(2417)

问题

• 到底有什么区别呢？毕竟，这两种情况的检查都是由 TS 编译器执行的。
• 如何解决这个问题呢？尽管如此，我还是不想放弃超载。

此外

配置：

{
    "javascript.format.semicolons": "insert",
    "javascript.inlayHints.enumMemberValues.enabled": true,
    "javascript.inlayHints.variableTypes.enabled": true,
    "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "javascript.referencesCodeLens.enabled": true,
    "javascript.referencesCodeLens.showOnAllFunctions": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.suggest.classMemberSnippets.enabled": false

    "typescript.format.semicolons": "insert",
    "typescript.preferences.importModuleSpecifier": "project-relative",
    "typescript.implementationsCodeLens.enabled": true,
    "typescript.referencesCodeLens.enabled": true,
    "typescript.referencesCodeLens.showOnAllFunctions": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "typescript.inlayHints.enumMemberValues.enabled": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
    "typescript.inlayHints.variableTypes.enabled": true

    "js/ts.implicitProjectConfig.checkJs": true,
    "js/ts.implicitProjectConfig.target": "ESNext",
    "js/ts.implicitProjectConfig.experimentalDecorators": true,
}

描述

我编写了一个带有动态覆盖的简单类Symbol.toPrimitive：

interface PrimitiveHintsMap {
    "number": number;
    "boolean": boolean;
    "string": string;
}

class Timespan {
    #duration = 0;
    [Symbol.toPrimitive]<K extends keyof PrimitiveHintsMap>(hint: K): PrimitiveHintsMap[K] {
        switch (hint) {
            case `number`: return this.#duration;
            case `boolean`: return Boolean(this.#duration);
            case `string`: return this.toString();
            default: throw new TypeError(`Invalid '${hint}' primitive hint`);
        }
    }
}

...就像对内置 DOM 侦听器所做的那样：

return该函数每次都会抱怨

类型“number”不可分配给类型“PrimitiveHintsMap[K]”。
类型“number”不可分配给类型“never”。ts(2322)

问题

我哪里错了？
你从哪里找到它的never？

描述

我想使用 CSS - 网格创建类似的东西：

实际上我创建：

div.container {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: 'menu-area -1- toolkit-area' 1fr 'menu-area status-area toolkit-area' auto / auto 1fr minmax(auto, 30vmin);
}

div.menu {
  grid-area: menu-area;
  background-color: red;
}

div.status {
  grid-area: status-area;
  background-color: green;
}

div.toolkit {
  grid-area: toolkit-area;
  background-color: blue;
}

<div class="container">
  <div class="menu">
    <img alt="Icon">
  </div>
  <div class="status">
     <img alt="Icon">
  </div>
  <div class="toolkit"></div>
</div>

问题是toolkit-area（蓝色区域）默认需要30vmin，但是里面没有内容。
既然我问了minmax(auto, 30vmin)，出于某种原因他决定30vmin即使没有内容他也应该接受它。

问题

我希望它的宽度与内部内容所需的宽度一样宽，但不能更大30vmin，也不是30vmin默认值。但我无法控制默认大小。诸如minmax(0, 30vmin)或 之类的选项不起作用minmax(min-content, 30vmin)。 如何解决这个问题？minmax(max-content, 30vmin)

澄清

由于该区域中可以存在完全不同的面板toolkit-area，即不能设置其大小auto和设置面板的最大宽度max-width: 30vmin。
我们不要再深入，只是接受这不是一个选择。 :)

描述

我有一个特定的班级Limiter：

class Limiter
{
    public uint Index = 0;
    public Limiter GetSublimiter()
    {
        Limiter sublimiter = new();
        return sublimiter;
    }
}

正如你所看到的，她可以通过 创造像她一样的人GetSublimiter。我需要确保通过GetSublimiter索引创建的每个实例都发送到与“父级”相同的索引。那是：

static void Main(string[] args)
{
    Limiter limiter1 = new(); // limiter1.Index: 0
    Limiter sublimiter11 = limiter1.GetSublimiter(); // limiter1.Index: 0, sublimiter11.Index: 0
    sublimiter11.Index++; // limiter1.Index: 1, sublimiter11.Index: 1

    Limiter limiter2 = new(); // limiter2.Index: 0, limiter1.Index: 1, sublimiter11.Index: 1
}

请注意 Indexlimiter1和是limiter2不同的，因为它们是通过构造函数创建的，而不是GetSublimiter.

问题

事实上，有哪些选择呢？

此外

我尝试这样：

class Limiter
{
    public ref uint Index = 0;
    public Limiter GetSublimiter()
    {
        Limiter sublimiter = new();
        sublimiter.Index = ref this.Index;
        return sublimiter;
    }
}

已收到：

ref 字段只能在 ref 结构中声明。

描述

我想将某种类型的类传递给函数参数，并期望结果是该类的实例。
在 TypeScript 中，它看起来像这样：

class Node {
    evaluate<T extends typeof Node>(type: T): InstanceType<T> {
        throw new Error(`Unable to evaluate ${type} from ${this}`);
    }
}

但我无法在 C# 中实现它。互联网上的在线转换器和教科书建议这样做：

class Node
{
    public T Evaluate<T>(T type) where T : Node, new()
    {
        throw new Exception($"Unable to evaluate {type.Name} from {this.Name}");
    }
}

但在这种情况下，编译器不会考虑type类型并且不会找到type.Name：

“T”不包含“Name”的定义，并且找不到接受类型“T”的第一个参数的可访问扩展方法“Name”（您是否缺少 using 指令或程序集引用？）

问题

如何在 C# 中实现所描述的功能？

此外

我的总体目标是创建一个具有继承性的抽象类，它可以重写此方法，以便在使用它时，可以将实例转换为 Node 的另一个后代的类型。
用人类的话来解释：

abstract class Node()
{
    public virtual T Evaluate<T>(T type) where T : Node, new()
    {
        throw new Exception($"Unable to evaluate {type.Name} from {this.GetType().Name}");
    }
}
class ValueNode(double value) : Node()
{
    public readonly double Value = value;
    public override T Evaluate<T>(T type)
    {
        if (type != ValueNode) throw new Exception($"Unable to evaluate {type.Name} from {this.GetType().Name}");
        return this;
    }
}
class IdentifierNode(string name) : Node()
{
    private static readonly Dictionary<string, double> Memory = new();
    public readonly string Name = name;
    public override T Evaluate<T>(T type)
    {
        if (type != ValueNode) throw new Exception($"Unable to evaluate {type.Name} from {this.GetType().Name}");
        if (!Memory.TryGetValue(this.Name, out double? value)) throw new Exception($"Identifier '{this.Name}' does not exist");
        return new ValueNode(value);
    }
}

class Program
{
    static void Main(string[] args)
    {
        { // Example 1
            ValueNode value = new(3.5);
            ValueNode result = value.Evaluate(ValueNode);
        }
        { // Example 2
            IdentifierNode identifier = new("Name");
            ValueNode result = identifier.Evaluate(ValueNode);
        }
    }
}

如果您对我正在尝试做的事情有更好的想法，我很乐意听到。

描述

我有一个正则表达式结果Match match，我想将其组解析为如下部分：

• 跳过第一组，
• 将第二组分配给变量instruction,
• 将其他所有内容分配给变量args。

在 JavaScript 中，它看起来像这样：

const match = /example/.exec(`example`);
if (match === null) return;
const [, instruction, ...args] = match;

我想在 C# 中进行相同的解构：

Match match = new Regex(@"example").Match("example");
if (!match.Success) return;
(_, Group instruction, Group[] ..args) = match.Groups;

问题

我听说最新版本的 C# 添加了很多语法糖，甚至...我尝试了一下，到处都是错误。
如何才能完成这种解构呢？

问题

当尝试在 Node 中输入内容时，VSCode 中的 IntelliSense 会给出来自 DOM 的提示（例如document、HTMLElement、EventTarget...）。

使用 Node 时如何禁用 DOM 提示？

描述

我做了这个“补充”...

Promise.withSignal = function (callback) {
    const abortController = new AbortController();
    const promise = new Promise((resolve, reject) => callback(abortController.signal, resolve, reject));
    promise.catch(Function).finally(() => abortController.abort());
    return promise;
};

...在侦听器中使用 Promise 时让您的生活更轻松。
现在我正在为其编写一个测试：

Promise.withSignal = function (callback) {
    const abortController = new AbortController();
    const promise = new Promise((resolve, reject) => callback(abortController.signal, resolve, reject));
    promise.catch(Function).finally(() => abortController.abort());
    return promise;
};

// Promise.withSignal should create a controllable promise
void async function () {
    const body = document.body;
    let counter = 0;
    const promise = Promise.withSignal((signal, resolve) => {
        body.addEventListener(`click`, (event) => resolve(++counter), { signal });
    });
    body.click();
    if (counter !== 1) console.warn(`Expected 1 for first time`);
    await promise;
    body.click();
    if (counter !== 1) console.warn(`Expected 1 for subsequent times`);
}();

测试发现该功能根本不起作用。

问题

我不知道问题出在哪里。
另外，大约半小时前它可以工作，但它显示出不同的问题，这就是为什么我纠正了一点。

额外1

这是一个最小的使用示例：

Promise.withSignal = function(callback) {
  const abortController = new AbortController();
  const promise = new Promise((resolve, reject) => callback(abortController.signal, resolve, reject));
  promise.catch(Function).finally(() => abortController.abort());
  return promise;
};

void async function () {
  const buttonTrue = document.querySelector(`button#true`);
  const buttonFalse = document.querySelector(`button#false`);

  const choice = await Promise.withSignal((signal, resolve) => {
    buttonTrue.addEventListener(`click`, (event) => resolve(true), { signal });
    buttonFalse.addEventListener(`click`, (event) => resolve(false), { signal });
  });
  console.log(`Your choice is ${choice ? `'true'` : `'false'`}. You can't change it anymore`);
}();

<button id="true">True</button>
<button id="false">False</button>

描述

我正在尝试创建一个我的图标。用这样的代码...

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

...结果是这样的：

现在，为了去除切出的圆形部分中的线条，我在它们上使用与大圆圈相同的蒙版。如果我在对角线
上使用蒙版，那么一切都会正常：

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

如果我在非对角线上使用遮罩，它们会完全消失：

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

据我了解，我正确配置了掩码......

问题

为什么会发生这种情况？
如何修复它？

描述

首先，我给你看这张图：

所以......
我有一个主（黑色）顶点，一个零（黑色）角和与其相关的其他顶点。
主顶点有一个属性palette: Map<number, Color>，它是按类型与其关联的顶点列表[Угол вершины считая с основной линии, цвет вершины]，如图所示。我需要使用相邻顶点为主顶点着色，如下所示：

灰色平分线。[0, 2π) 范围内的所有角度

还

为了方便起见，我创建了一个以指定角度绘制的函数：

function fillSector(beginAngle: number, endAngle: number, color: Color): void;

问题

三个小时以来，我一直无法正确计算出应该从哪里开始绘制以及某种颜色的绘制位置，主要是因为黑线部分被切割了。就在这条线上方，我的角度更接近 0，并且略低于 2π。

问题

我需要知道计算绘画扇区的算法的正确方法。

例子

上面例子的结果应该是这样的：

function aWonderfulFunction(palette: Map<number, Color>): Map<number, Color>;

const palette = new Map([
    [1 / 4 * PI, Color.RED], // От угла 1/4π приходит красный цвет
    [5 / 6 * PI, Color.GREEN], // От угла 5/6π приходит зеленый цвет
    [3 / 2 * PI, Color.BLUE], // От угла 3/2π приходит синий цвет
]);

const result = aWonderfulFunction(palette);

console.log(result);
// new Map([
//  [13 / 24 * PI, Color.RED], // От начала (0π) до биссектрисы красно-зеленого (которая под углом 13/24π) красим красным цветом
//  [14 / 12 * PI, Color.GREEN], // От биссектрисы красно-зеленого (13/24π) до биссектрисы зелено-синего (которая под углом 14/12π) красим зеленым цветом
//  [15 / 8 * PI, Color.BLUE], // От биссектрисы зелено-синего (14/12π) до биссектрисы сине-красного (которая под углом 15/8π) красим синим цветом
//  [2 * PI, Color.RED], // От биссектрисы сине-красного (14/12π) до конца (2π) красим красным цветом
// ]);

描述

在采访中，他们提出了以下问题：

— 控制台将输出什么parseInt(0.000003)？
“嗯，当然。” - 0！。
- 美好的。它会带来什么parseInt(0.0000003)？
- 有什么不同？0！

答案被杀：

- 3！

console.log(parseInt(0.0000003));

为什么？

描述

那些使用 JavaScript + JSDoc 而不是 TypeScript 的人经常会遇到类型定义的问题。例如，interface从 TypeScript 中，您可以在 JSDoc 中实现它，如下所示：

• 类型脚本

interface Type {
    property1: number;
    property2: number;
}

• JS文档

/**
 * @typedef {object} Type
 * @property {number} property1
 * @property {number} property2
 */

问题始于继承。还有两个大的：

简单的继承。

最常见的继承应该使用一些额外的类型和拐杖来实现：

• 打字稿

interface Base {
    baseProperty: number;
}

interface Derived extends Base {
    derivedProperty: number;
}

• JS文档

/**
 * @typedef {object} Base
 * @property {number} baseProperty
 */

/**
 * @typedef {object} DerivedExtension
 * @property {number} derivedProperty
 */

/**
 * @typedef {Base & DerivedExtension} Derived
 */

继承不变

如果你继承了一个类型并且不改变其中的任何内容，编译器也会崩溃：

• 打字稿

interface Base {
    property: number;
}

interface Derived extends Base { }

• JS文档

/**
 * @typedef {object} Base
 * @property {number} baseProperty
 */

/**
 * Этот вариант приведет к ошибке
 * @typedef {object} DerivedExtension // Получаем any
 * 
 * @typedef {Base & DerivedExtension} Derived // А тут Base & any = any
 */

/**
 * А вот это уже 👍
 * @typedef {{ }} DerivedExtension // Типа пустой объект
 * 
 * @typedef {Base & DerivedExtension} Derived // А тут Base & { } = Base
 */

虽然第二个选项不是最好的，因为它根本不表明存在继承：

此外

我知道这不完全是继承，但由于标签@extends或@implements不起作用，我别无选择。

问题

有什么办法可以修复这些拐杖吗？也许您知道更有效的
使用方法？@typedef

描述

您经常需要从类型变量中T获取某些类型的属性U。
有时，像 之类的变量会发生这种情况T | null。在这种情况下，如果null我们返回一个值null，否则我们将得到一个类型为 的变量U。也就是说，结果可能是U | null。

执行

现在我正在尝试将相同的逻辑实现为函数。这是真的吗？

function map<T, U>(value: T, callback: (object: NonNullable<T>) => NonNullable<U>): U

...好吧，就好像这样使用它：

type Nullable<T> = T | null;

let text: Nullable<string> = `Hello world`;
const size: Nullable<number> = map<Nullable<string>, Nullable<number>>(text, nonNullableText => nonNullableText.length);

在这种情况下，我做了最简单的实现：

function map<T, U>(value: T, callback: (object: NonNullable<T>) => NonNullable<U>): U {
    if (value === null || value === undefined) return value; // null | undefined
    else return callback(value); // NonNullable<U>
} // NonNullable<U> | null | undefined тот же самый U

Type 'T' is not assignable to type 'U'.我在 中遇到错误return value。

问题

嗯，理论上这个错误是逻辑上的，但是我在逻辑的哪一部分犯了错误呢？
如何...

function map<T, U>(value: T, callback: (object: NonNullable<T>) => NonNullable<U>): U

...正确实施了吗？

此外

您可以更改标题。我无法正确描述错误。

描述

我有一个特定的函数（为了清楚起见，我们称之为foo），如果用户将光标移动到某个元素上，应该执行该函数。由于我不知道用户拥有什么设备，因此我附加了所有可能的处理程序：

element.addEventListener(`mousedown`, (event) => {
    foo();
});
element.addEventListener(`pointerdown`, (event) => {
    foo();
});
element.addEventListener(`touchstart`, (event) => {
    foo();
});

现在我需要确保当其中一个处理程序同时开始工作时，其余处理程序保持沉默，以便该函数执行 1 次，而不是 3 次。我这样做：

const controller = new AbortController();
await new Promise((resolve) => {
    element.addEventListener(`mousedown`, (event) => {
        resolve();
    }, { signal: controller.signal });
    element.addEventListener(`pointerdown`, (event) => {
        resolve();
    }, { signal: controller.signal });
    element.addEventListener(`touchstart`, (event) => {
        resolve();
    }, { signal: controller.signal });
});
foo();
controller.abort();

它运作良好，但只能运作一次。为了让它再次工作，我需要创建一个函数，每次完成后都会生成相同的结构。

问题

好吧，解决方案就是解决方案的工作原理。但如果我们考虑到除了mousedown、之外pointerdown，touchstart我们还添加mousemove、pointermove和touchmove一堆其他类似的处理程序，那么在我看来，它看起来很乏味。

问题

有替代的、更好的解决方案吗？
或者这个设计可以简化吗？

常问问题

— 为什么不只使用pointer...监听器？它们也是通用的。- 它们有时无法正常工作。例如，pointermove在移动设备上使用时，放下鼠标后会冻结 24-30 帧。

— 为什么不为每个设备使用正确的处理程序？- 我很乐意。但如何才能 100% 知道处理程序是否“正确”呢？处理程序无处不在，但不做出反应。navigator.userAgent提供不正确的信息。我还应该尝试哪些其他方法？

描述

vmin我需要的与 和非常相似vmax，但不一样。
例如，它返回最小屏幕vmin尺寸的百分比（更准确地说，视口，无法准确翻译）。我需要返回父尺寸 中最小尺寸的百分比的东西。

问题

有没有不用拐杖的路？
嗯……最后的选择是有没有拐杖的办法？

此外

最小的例子

div#parent {
  position: fixed;
  inset: 0;
  display: flex;
  place-content: center;
}

div#child {
  aspect-ratio: 1;
  max-width: 100%;
  max-height: 100%;
}

<div id="parent" style="background-color: rgb(200, 200, 200);">
  <div id="child" style="background-color: rgb(100, 100, 100);"> </div>
</div>