Oliver Patterson's questions

我不知道如何更正确地描述我的意思。

我需要一个像这样的接口（它在当前的实现中不起作用），但另外我想为 添加额外的值id，但在这种情况下value必须有一个类型unknown

interface IColumn<T extends object, AdditionalKeys extends string = never, U = keyof (T & Record<AdditionalKeys, any>)>
{
  id: U;
  format(value: T[U]): any;
}

预期行为：

interface IColumn<T extends object, AdditionalKeys extends string = never, U = keyof (T & Record<AdditionalKeys, any>)>
{
  id: U;
  format(value: T[U]): any;
}

interface ITest
{
  key1: number;
  key2: string;
  key3: Date;
}

const columns: IColumn<ITest, "test">[] = [
  {
    id: "key1",
    format(value) // должен быть тип number
    {
      return value;
    }
  },
  {
    id: "key2",
    format(value) // должен быть тип string
    {
      return value;
    }
  },
  {
    id: "key3",
    format(value) // должен быть тип Date
    {
      return value;
    }
  },
  {
    id: "test",
    format(value) // должен быть тип unknown
    {
      return value;
    }
  },
  {
    id: "another", // Должна быть ошибка
    format(value)
    {
      return value;
    }
  }
]

TypeScript 游乐场

我正在使用 MUI 中的 LineChart，当将鼠标悬停在标记（点）上时，我需要制作自定义工具提示，但由于某种原因，即使我们直接指向该点，它并不总是出现。大多数情况下，正下方和侧面的点不会显示工具提示。

此外，我希望只突出显示所指向的点，而不是列中的所有点。看起来triger: "item"它应该确实这样做。

import { Box } from "@mui/material";
import { LineChart } from "@mui/x-charts/LineChart";

const graph = {
  columns: ["col 1", "col 2", "col 3", "col 4", "col 5"],
  data: [
    [8000, 17000, 40000, 9000, 32000],
    [23000, 21000, 1000, 6000, 4000],
  ],
};

export default function BasicArea() {
  return (
    <LineChart
      height={300}
      tooltip={{ trigger: "item" }}
      slots={{
        itemContent({ itemData, series }) {
          if (itemData.dataIndex === undefined) {
            return null;
          }

          return (
            <Box
              sx={{
                padding: "10px",

                backgroundColor: "#FFFFFF",
                boxShadow: "0 1px 7px 0 rgba(73, 70, 70, 0.15)",

                display: "flex",
                flexDirection: "column",
                gap: "5px",
              }}
            >
              value: {series.data[itemData.dataIndex]?.toString()}
              <br />
              column: {graph.columns[itemData.dataIndex]}
            </Box>
          );
        },
      }}
      series={[
        {
          BasicArea: "",
          curve: "linear",
          id: "left-branch",
          data: graph.data[0],
          color: "orange",
        },
        {
          curve: "linear",
          id: "right-branch",
          data: graph.data[1],
          color: "green",
        },
      ]}
      axisHighlight={{ x: "none" }}
      xAxis={[
        {
          data: graph.columns,
          scaleType: "point",
          tickPlacement: "middle",
          tickLabelPlacement: "tick",
        },
      ]}
      sx={{
        "& .MuiLineElement-root": {
          strokeWidth: "3px",
        },
      }}
    />
  );
}

这就是我尝试使用我的组件的方式User：

<User
    component="a"
    href="test"
    user="User"
/>

这是该组件的原型实现：

import { Box, BoxProps } from "@mui/material";

export interface IUserProps extends BoxProps
{
    user: string;
}

export default function User({ user, sx = [], ...props }: IUserProps)
{
    return (
        <Box sx={[{}, ...Array.isArray(sx) ? sx : [ sx ]]} {...props}>
            {user}
        </Box>
    );
}

我收到以下错误：

类型“{ component: "a"; user: string; href: string; }”不能分配给类型“IntrinsicAttributes & IUserProps”。
类型“IntrinsicAttributes & IUserProps”上不存在属性“href”。您指的是 “ref” 吗? TS(2322)

我不明白为什么按钮的大小24x27，如果内容（图标）的大小24x24？

button
{
  padding: unset;
  background-color: unset;
  border: unset;
}

<button>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M12,18.0254424 C11.172,18.0254424 10.5,17.3534424 10.5,16.5254424 C10.5,15.6974424 11.172,15.0254424 12,15.0254424 C12.829,15.0254424 13.5,15.6974424 13.5,16.5254424 C13.5,17.3534424 12.829,18.0254424 12,18.0254424 Z M12,6 C12.5522847,6 13,6.44771525 13,7 L13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,7 C11,6.44771525 11.4477153,6 12,6 Z"/>
  </svg>
</button>

我有类型：

type TaskType = "return professions";

并且在界面中有一个描述的功能：

interface IInterfaceName
{
    getReponse(message: string, task?: TaskType): string | string[];
}

我的任务是让函数返回 not string | string[]，而是一个更广为人知的类型。对于当前任务，如果我们传入taksvalue "return professions"，函数应该返回string，但如果我传递undefined（或调用函数而不传递参数），我想得到类型string。

我听说过infer，也许这将是解决方案。但是我不明白怎么写。

getResponse("test") // return type: string
getResponse("test", "return professions") // return type: string[]

我有一个数组，假设它将是：

const testArray = [
    "test1",
    "test2",
    "test3",
    "test4"
] as const;

我可以获取类型的关键索引吗？类似keyof对象的东西：

type arrayIndex = keyof typeof testArray; // arrayIndex: 0 | 1 | 2 | 3

我将尝试更好地解释我想用文字开始的内容。

我们有一个块，假设它height: 150px是，它里面可能有（嗯，更准确地说，会有）几个未知高度的块和一个应该占据剩余空间并具有滚动功能的块。

代码很可能会更具描述性，我遇到过：

body { margin: 15px; }

.block
{
  height: 150px;
  width: 500px;
  
  padding: 5px;
  
  border: 1px solid #000;
}

.block div:not(:last-child)
{
  margin-bottom: 10px;
}

.block-overflow
{
  border: 1px solid #DC4242;
  overflow-y: auto;
  
  height: 100%;
}

<div class="block">
  <div>Test</div>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Sint, blanditiis corrupti perferendis nobis tempora
  </div>
  
  <div class="block-overflow">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, dolores! Ratione facilis nam sint delectus laudantium. Delectus itaque esse quaerat voluptatibus provident reiciendis mollitia enim, tenetur vitae inventore aliquam exercitationem ut ratione dignissimos. Molestias saepe eum vitae quisquam iste excepturi cum et ipsa incidunt. Eum facere dolorum aspernatur perferendis voluptates, unde alias officiis quas illo blanditiis. In, repudiandae beatae. Deleniti nihil eos delectus soluta unde consequatur maiores mollitia expedita accusantium aperiam nam quas omnis id optio a error vitae iusto natus consequuntur, quos voluptate modi. Magni expedita natus suscipit non veritatis amet, quo accusantium tenetur odio eveniet blanditiis officia corrupti!
  </div>
<div>

帮我解决一个困扰我很久的问题。

谢谢你的时间。

有一张带渐变的照片，我需要一个 CSS 渐变。你能帮忙吗？有什么工具可以做到这一点吗？（在布局中，插入了照片）

使用 poke 方法，我能够得到一个渐变，但它不是很相似。（由于某种原因，它无法在片段中正确显示）

body
{
  background: linear-gradient(-35deg, #7889B0  0%, #7FA9D0 75%, #CACFCC 100%);
}

所需渐变：

我有一个这样的manifest.json：

{
    "name": "Theme",
    "description": "Theme",
    "version": "1",
    "manifest_version": 3,
    "theme": {
        "images": {
            "theme_toolbar": "/images/theme_toolbar.png"
        },
        "colors": {
            "background_tab": [30, 30, 30],
            "background_tab_inactive": [30, 30, 30],
            "background_tab_incognito": [30, 30, 30],
            "background_tab_incognito_inactive": [30, 30, 30],

            "tab_background_text": [170, 170, 170],
            "tab_background_text_inactive": [170, 170, 170],
            "tab_background_text_incognito": [170, 170, 170],
            "tab_background_text_incognito_inactive": [170, 170, 170],

            "tab_text": [220, 66, 66],
            "toolbar_text": [220, 66, 66],

            "bookmark_text": [150, 150, 150],

            "frame": [10, 10, 10],
            "frame_inactive": [10, 10, 10],
            "frame_incognito": [10, 10, 10],
            "frame_incognito_inactive": [10, 10, 10],

            "ntp_background": [10, 10, 10],
            "ntp_header": [10, 10, 10],
            "ntp_link": [6, 55, 116],
            "ntp_text": [0, 0, 0],

            "omnibox_background": [25, 25, 25],
            "omnibox_text": [190, 190, 190],

            "toolbar": [35, 35, 35],
            "toolbar_button_icon": [220, 66, 66]
        }
    }
}

theme_toolbar.png：

由于某种原因，它看起来像这样：

我试着换了一个主题，但最后这行也出现了，虽然我是逐行添加的，但删除最后的更改后，该行仍然存在，不想离开。
如何将其移除？

我有代码：

// slider имеет тип HTMLInputElement

slider.addEventListener('input', (e: InputEvent) =>
{
    video.playbackRate = parseFloat(e.target.value);
});

你能解释一下为什么我会收到这样的错误：

应该是这样吗？

slider.addEventListener('input', ({ target }: Event) =>
{
    if (target === null)
    {
        return;
    }

    video.playbackRate = parseFloat((target as HTMLInputElement).value);
});

我可以提交对特定行的更改吗？也就是说，我在不同的部分写了很多不同的代码，我需要在某行/行中提交更改并在上面写注释。
在 VSCode 更新中，我看到可以选择多行并为它们添加注释。怎么做？还是我将它与其他一些功能混淆了？

似乎这个文本是粗体的，但是在使用的另一个主题中，当前参数以不同的颜色突出显示，这是什么原因？

以：Dark+（默认深色）为例

我不知道如何在标题中正确描述这一点，但我想理解这一点..
为什么要声明这样的函数：

const funcName = () => {};

...或像这样：

const funcName = function () {};

...而不是这样：

function funcName() {};

如果我们在全局范围内。
我知道前两个函数只能在代码中调用后才能调用，最后一个函数可以在代码中之前调用。
但他们一开始宣布的意义是什么？方便吗，因为您必须永远滚动它们才能转到“主要”代码。

实际上问题本身：网格可以代替表格吗？有必要吗？
我从不喜欢桌子，我不知道为什么。当网格出现时，你想对它们做很多事情。我想做一个简单的盘子，但是包装器本身里面的块，也就是说，实际上你不能为内容做一个相同宽度的列，好吧，更准确地说，你可以，但它会是一个其他列的固定高度。据我了解，subgrid 可以解决这个问题，但支持仅在 FF 中。

实现网格表的方法有哪些：

• 悬停时可以突出显示该行；
• 列将根据列中的最大内容进行拉伸，但可以具有最大宽度；

使用 Grid 这样做是否值得？像以前那样通过 Table 这样做是否更正确，事实上，不是重新发明轮子？

我不知道如何用语言来描述我想要实现的目标，但我可以用代码展示我想要的东西。
我想这样调用方法：

const test = new Vk('...');
test.messages.getDialogs();
test.status.set('...');

如何检查？是否做了这样的事情：

class Vk
{
    constructor(token, version = 5.95)
    {
        this.token = token;
        this.version = version;

        this.messages = new VkMessages();
        this.status = new VkStatus();
    }
}

class VkMessages
{
    getDialogs()
    {
        /* тут должно использоваться this.token, this.version взятое из класса Vk */
    }
}

class VkStatus
{
    set()
    {
        /* тут должно использоваться this.token, this.version взятое из класса Vk */
    }
}

...或其他方式？

以前，在旧版本的 Windows 上，我在任务栏上显示时间和日期，并启用任务栏上的小图标。现在只显示时间，虽然在我看来日期有一个地方，也许是字体大小。

我需要这个，但只有小图标（否则任务栏太大）。

窗户信息：

我正在创建一个范围类型的输入。

slider           = document.createElement('input');
slider.type      = 'range';
slider.min       = 0.25;
slider.max       = 2.5;
slider.step      = 0.05;
slider.value     = playbackSpeed; // переменная хранит 1.5
slider.className = 'sliderSpeed';

然后我把听众挂在上面：

slider.addEventListener('wheel', (e) =>
{
    console.log(e.deltaY, Math.sign(e.deltaY));

    if (Math.sign(e.deltaY) == 1)
    {
        console.log(slider.value, '-=', slider.step);
        slider.value -= slider.step;
    }
    else
    {
        console.log(slider.value, '+=', slider.step);
        slider.value += slider.step;
    }

    slider.dispatchEvent(new Event('input', { bubbles: true }));

    e.preventDefault();
});

slider.addEventListener('input', (e) =>
{
    video.playbackRate = parseFloat(e.target.value);
});

也就是说，当向下滚动滚轮时，我们从 value 中减去一个 step。有用。但由于某种原因，向上滚动时，值总是设置为 1.4。

slider           = document.createElement('input');
slider.type      = 'range';
slider.min       = 0.25;
slider.max       = 2.5;
slider.step      = 0.05;
slider.value     = 1.5; // переменная хранит 1.5
slider.className = 'sliderSpeed';
document.body.append(slider);

slider.addEventListener('wheel', (e) =>
{
    console.log(e.deltaY, Math.sign(e.deltaY));

    if (Math.sign(e.deltaY) == 1)
    {
        console.log(slider.value, '-=', slider.step);
        slider.value -= slider.step;
        console.log('new value', slider.value);
    }
    else
    {
        console.log(slider.value, '+=', slider.step);
        slider.value += slider.step;
        console.log('new value', slider.value);
    }

    slider.dispatchEvent(new Event('input', { bubbles: true }));

    e.preventDefault();
});

//slider.addEventListener('input', (e) =>
//{
//  video.playbackRate = parseFloat(e.target.value);
//});

咳咳......问题的解决方案原来是 parseFloat 的值和步骤。估计埋在什么地方了。。

你能解释一下为什么每个人都认为这样写是正确的：

if (true) {
    // ...
}

if (true) {
    // ...
} else {
    // ...
}

代替：

if (true)
{
    // ...
}

if (true)
{
    // ...
}
else
{
    // ...
}

毕竟，第二个选项更容易阅读。

而且我还经常看到他们在后面写了一个空行if (true) {（尽管这不被接受，Source），因为我理解它是为了代码可读性：

if (true) {

   // ...
}

这只是消除了对第二种选择的需要。

有其他人的站点，根据控制台的消息，它使用 Angular。在这个网站上，我需要改变input，以便他看到这一点。也就是说，如果你手动写一些东西input，按钮就会变为活动状态，但如果通过 JS 则不是。
通过 JS 我在以下方面进行了更改：

document.querySelector('input').setAttribute('value', '1');

document.querySelector('input').value = '1';

我将添加，我从控制台执行此代码。

我有此代码适用于路线：

const langAccess = ['en', 'ru'];

// ...

router.use('/test', (req, res, next) =>
{
    let langGet = req.query.lang;
    let langCookie = req.language?.substr(0, 2);

    let lang = langAccess.find(lang => lang == langGet) || langAccess.find(lang => lang == langCookie) || 'en';

    if (langGet != lang)
    {
        let newSeach = new URLSearchParams(req._parsedUrl.search);
            newSeach.set('lang', lang);

        res.redirect(`?${newSeach.toString()}`);
    }
    else
    {
        next();
    }
});

它检查和/或将页面的语言添加到 get 参数，它不是在所有路由中使用，而是在许多路由中使用。并且每次代码本质上是重复的，相同的语言数组。
而且我不知道这个功能最好在哪里取出，请告诉我。

这段代码有什么可以改进的？