Igor提出的问题

Igor

Asked: 2020-03-04 13:42:09 +0000 UTC

TS2322：类型 '* | ' 不能分配给类型 ' & *'。像类型'test1' | “test2”变成“test1”和“test2”？

0

有一个类构造函数

type Params = { social?: Social; seo?: SEO };

class Class {
  public seo?: SEO;
  public social?: Social;

  constructor(params: ParamsCreating) {
    const { title, content, dateTime, id, ...extra } = params;
    if (extra) {
      Object.keys(extra).forEach((key: keyof Params) => {
        this[key] = extra[key];
        ^----
      });
    }
  }
}

编译器输出以下错误：

TS2322：类型“社交 | SEO' 不可分配给类型 'Social & SEO'。“社交”类型不能分配给“社交和 SEO”类型。“社交”类型中缺少属性“标签”，但在“SEO”类型中是必需的。

如果我像这样手动重写它：

type Params = { social?: Social; seo?: SEO };

class Class {
  public seo?: SEO;
  public social?: Social;

  constructor(params: ParamsCreating) {
    const { title, content, dateTime, id, ...extra } = params;
    if (extra) {
      Object.keys(extra).forEach((key: 'seo' & 'social') => {
        this[key] = extra[key];
      });
    }
  }
}

顺利通过，没有错误。

如何重写此代码以用key: 'seo' & 'social'更灵活的方式替换构造？

Igor

Asked: 2020-01-17 18:02:47 +0000 UTC

一个数组类型，其中除了最后一个之外的所有内容都是一个字符串，最后一个元素是一个函数。打字稿

-1

我有一个读取文件的函数readFile，可以将多个参数传递给它：readFile('folder', 'target', e => console.error(e))

字符串参数是文件的路径，最后一个参数是错误处理函数。

该函数如下所示：

import * as p from 'path';

type ErrorHandler = (e: Error, path: string) => any | void;
type ReadFileParams = (Array<string> & ErrorHandler) | Array<string>;

export const readFile = (...params: ReadFileParams): object | null => {
  const source: Array<string> = params.filter(o => typeof o === 'string');
  const errorHandler =
    params.find(o => typeof o === 'function') ||
    ((e: Error) => {
      throw e;
    });
  const path = p.resolve(...source);
  try {
    const data = fs.readFileSync(path, 'utf8');
    return JSON.parse(data);
  } catch (e) {
    (<ErrorHandler>errorHandler)(e, path);
  }
  return null;
};

虽然我只用字符串参数调用 - ts 并不发誓。

一旦我将最后一个参数传递给函数，例如：

readFile(source, files[0].name, () => {});

显示以下错误消息：

TS2345: Argument of type '[string, string, () => void]' is not
assignable to parameter of type 'ReadFileParams'.   
Type '[string, string, () => void]' is not assignable 
to type 'string[] & ErrorHandler'.     
Type '[string, string, () => void]' is not assignable 
to type 'string[]'.
Type 'string | (() => void)' is not assignable 
to type 'string'.         
Type '() => void' is not assignable to type 'string'.

在给定情况下如何正确描述类型？

Igor

Asked: 2020-08-27 22:55:40 +0000 UTC

在打字稿中为一个变量使用两种类型

1

我正在将 js 移植到打字稿，我遇到了一个问题。下面描述的函数适用于两种数据类型，我看到以下错误：

Property 'dateTime' does not exist on type 'Operation | OperationCreated'. 
Property 'dateTime' does not exist on type 'OperationCreated'

type DateTime = {
  date: string;
};

type Operation = {
  dateTime: DateTime;
};

type OperationCreated = {
  createdDate: string;
};

const sortByDate = (o1: Operation | OperationCreated, o2: Operation | OperationCreated) =>
  stringToMillisecond(o1.createdDate || o1.dateTime.date) - stringToMillisecond(o2.createdDate || o2.dateTime.date);

Igor

Asked: 2020-02-19 15:39:23 +0000 UTC

如何从一个表单中获取所有值？

0

如果我们知道每个单独输入的名称，从表单中获取输入的值相对方便。是否有一种相对简单的方法可以从表单中获取任何输入的值，我的意思是通过本地方式。

const form = document.querySelector('form');

const submit = e => {
  e.preventDefault();
  console.log(e.currentTarget.name.value);
  console.log(e.currentTarget.name2.value);
  console.log(e.currentTarget.name3.value);
  console.log(e.currentTarget.values); // ??
}
form.addEventListener('submit', submit)

<form>
  <div>
    <input name="name" />
  </div>
  <div>
    <input name="name2" />
  </div>
  <div>
    <input name="name3" />
  </div>
  <button>GO</button>
</form>

Igor

Asked: 2020-11-15 17:32:26 +0000 UTC

如何制作高分辨率的静态地图图像？

0

img {
  width: 100%;
}

<img src="https://api-maps.yandex.ru/services/constructor/1.0/static/?um=constructor%3A9ee6a0e50b67ce405b5c4f6456fc1f24ca6d2fd7badf4dc9a27df3758a574915&amp;width=500&amp;height=342&amp;lang=ru_RU"
                    alt=""/>

您需要根据橡胶块的宽度制作卡片的图像。该块可以大于 650 像素，因此地图看起来很模糊。您需要高质量的图像。这里我们使用 500px 的地图，因此模糊已经可见。

这可以以某种方式解决吗？

Igor

Asked: 2020-11-07 22:47:38 +0000 UTC

如何通过在地址栏中输入地址来在 react-router 中呈现所需的路由器？

0

不幸的是，即使在这里，即使在 codepen 上，我也不知道如何演示这项工作react-router，所以我将尝试按原样解释它。

这是代码的样子：

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter} from 'react-router-dom';

import {Link, Route, Switch} from 'react-router-dom';
const Home = () => <p>Home page</p>;
const Search = () => <p>Search page</p>;

const App = () => (
    <div>
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/search">Search</Link></li>
        </ul>

        <hr />

        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/search" component={Search} />
        </Switch>

    </div>
);

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script>

结果如下所示：

我点击链接，去你想去的地方，一切正常。

但是，如果我想在地址栏中输入相同的路径：/search

这不起作用。

如何react-router从地址栏正确转换到所需的路由器

Igor

Asked: 2020-11-01 15:46:51 +0000 UTC

如何检查一个类是否是 React 组件？

2

我以为你可以检查，istanceof但它不起作用。

class Test extends React.Component {}

console.log(Test instanceof React.Component);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

告诉我如何检查一个类是否是 React 组件

Igor

Asked: 2020-10-25 22:07:13 +0000 UTC

为什么在应用 svg 过滤器时形状会移出以及如何修复它？

5

我想对形状做一个例外。这是我使用过滤器的地方：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">

  <defs>
    <filter id="myFilter1">
      <feImage href="#1" result="1"/>
      <feImage href="#2" result="2"/>
      <feComposite in="1" in2="2" operator="xor"/>
    </filter>
  </defs>
  
  <g filter="url(#myFilter1)">
    <circle id="2" cx="50" cy="50" r="50"/>
    <g id="1">
      <rect x="0" y="0" width="50" height="50" fill="#ccc"/>
      <rect x="50" y="50" width="50" height="50" fill="#ccc"/>
    </g>
  </g>
</svg>

这是没有过滤器的：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <g>
    <circle id="2" cx="50" cy="50" r="50"/>
    <g id="1">
      <rect x="0" y="0" width="50" height="50" fill="#ccc"/>
      <rect x="50" y="50" width="50" height="50" fill="#ccc"/>
    </g>
  </g>
</svg>

如您所见，应用过滤器时，形状会移出。为什么会发生这种情况以及如何解决？

偶然间，我发现这件事在feImage. 并且偏移量还取决于元素的数量及其位置。使元素的位置从鼠标的位置改变：

const value = (max = 100000000, min = 0) => Math.round(Math.random() * (max - min)) + min;

const createCircle = (size) => {
  const r = value(10, 3);
  const cx = value(size - r - 10, r + 10);
  const cy = value(size - r - 10, r + 10);
  return {
    r,
    cx,
    cy
  }
};

const createCircles = (counts, size) => Array(counts).fill().map(() => createCircle(size));


class App extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        position: {
          x: 0,
          y: 0,
        }
      };

      this.size = 300;

      this.circlesData = createCircles(100, this.size);

      const getCoords = (c, i) => c + (this.state.position.x * 0.002 * c * (i % 2 ? 1 : -1));

      this.circles = () => this.circlesData.map((item, i) => <circle key = {`circles_12dew1_${i}`} cx={getCoords(item.cx, i)} cy={getCoords(item.cy, i)} r={item.r}/>);

    }

    onMouseMove = e => {
      const position = {
        x: e.pageX,
        y: e.pageY,
      };
      this.setState({position});
    }

    render() {
      return (
      <div className = "App" >
        <svg onMouseMove={this.onMouseMove} ref = {elem => this.svg = elem} xmlns = "http://www.w3.org/2000/svg" width = {this.size} height = {this.size} viewBox={`0 0 ${this.size} ${this.size}`}>
          
          <defs>
            <filter id="myFilter1">
             <feImage href="#1" result="1"/>
             <feImage href="#2" result="2"/>
             <feComposite in ="1" in2="2" operator="xor"/>
            </filter>
 
          </defs>

          <g id = "3" filter = "url(#myFilter1)" >
            <circle id = "2" cx={this.size / 2 + 100} cy={this.size / 2 + 100} r={this.size / 3}/>
            <g id="1"> {this.circles()} </g> 
          </g>
        </svg> 
      </div>
    );
  }
}


ReactDOM.render( < App / > , document.getElementById('root'));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

大圆圈应该静止不动，但它会移动。

什么过滤器用于 svg 形状？或者如何在没有拐杖的情况下修复它feImage？

Igor

Asked: 2020-08-23 03:17:26 +0000 UTC

是否可以在节点上创建像 create-react-app 这样的控制台应用程序？

0

我一直在考虑创建类似 create-react-app 的东西，我使用了一些非标准的设置，并且将它们与每个项目连接起来不是很方便。我想创建一个命令来创建一个项目框架，连接我需要的所有模块，并创建某些现成的文件。

那些。我想准确地写入给定目录中的控制台，例如create-my-app name-app，并在那里创建一个项目。我可以创建一个类似的命令node create.js name-app PATH，它将在特定目录中工作，但我有兴趣完全按照我在第一句话中写的那样做。

这可以用 node.js 完成吗？我该怎么做？我会非常感谢一个提示，一篇文章，否则我找不到任何可以理解的东西。谢谢！

Igor

Asked: 2020-08-19 17:46:28 +0000 UTC

如何异步执行对服务器的请求。节点.js

1

我想创建一个服务器，当发出 GET 请求时，日期和时间将显示在服务器控制台中。并在一定的时间间隔后，完成服务器响应并将时间返回给客户端。

我这样做。

const http = require('http');
const port = 3000;
const getDateToUTC = () => (new Date).toUTCString();

const server = http.createServer((req, res) => {
    if (req.method === 'GET') {
        const interval = setInterval(() => console.log(getDateToUTC()), 1000);
        setTimeout(() => {
            clearInterval(interval);
            res.end(getDateToUTC());
        }, 5000)

    }
});

server.listen(port, () => {
    console.log(`Server running on port: ${port}`);
});

但！对于服务器的多次调用，该函数仅在所有先前的响应都已给出时才起作用。

那些。我在浏览器中打开两个选项卡并转到localhost:3000. 我尝试快速移动，好吧，请求之间可能会有 500 毫秒的差异。此外，我还希望以相同的时间间隔从服务器接收答案。

实际上，第二个请求只有在第一个请求完成后才开始处理，即在本例中 5 秒后。

如何使请求异步工作？

Igor

Asked: 2020-08-04 20:01:01 +0000 UTC

如何从类中访问类方法/变量？

0

假设我想在 Chindren 类中访问包含 Chindren 的类的变量。

我怎样才能做到这一点？

class Parent {
  constructor() {
    this.a = 3;
    
    this.Chindren = class {
      constructor() {
        // this.b = Parend.a; // Не работает
        this.b = this.a;
        console.log(this.b);
      }
    }
  }
}

let parent = new Parent();
let children = new parent.Chindren();

Igor

Asked: 2020-06-07 02:54:16 +0000 UTC

onUnload 事件及其反面

2

有一个滚动图片的滑块。

我遇到了一个非常有趣的行为：

一段时间后，当我定期返回该页面时，它开始不停地工作。那些。有一定的间隔，比如说5秒，在正常状态下，它会以这个间隔翻转图片。但是，如果您切换到其他选项卡一段时间，然后返回，滑块将连续工作，没有间隔。

很难捕捉，这种效果并不总是出现

这是我之前的问题，您可以在其中查看代码

我确信当你离开一个标签时，浏览器会自发地暂停页面上的进程，包括滑块程序。

我假设浏览器会以某种方式记住它必须翻转多少张幻灯片，当您返回页面时，它会快速执行所有操作。

一个想法诞生了：使用一个事件onUnload来暂停滑块，当用户返回标签页时，我想启动滑块。

但我不知道有这样的事件。是否有返回选项卡事件或如何解决所描述的问题？

Igor

Asked: 2020-05-09 07:37:16 +0000 UTC

可以不将数字转换为无穷大吗？或者如何在 JS 中进行农场简单性测试

1

有一个费马素数检验。写了这么一个函数。但是，从 17 开始，我得到任何素数 - 不是素数。我发现关键是js将大数转换为无穷大，然后除以模我得到NaN，因为算法不起作用。我能以某种方式解决这个问题吗？

    let checkingTheNumberForSimplicity = (number, amountTest = 100) => {
        for (let i = 0; i < amountTest; ++i) {
            let n = Math.round(Math.random() * (number - 2)) + 1;
            if ((n ** (number - 1)) % number !== 1) {
                console.log((n ** (number - 1)));
                console.log(n, i, (n ** (number - 1)) % number);
                return false;
            }
        }
        return true;
    };
    console.log(2, checkingTheNumberForSimplicity(2)); 
    console.log(20, checkingTheNumberForSimplicity(20)); 
    console.log(7, checkingTheNumberForSimplicity(7));
    console.log(419, checkingTheNumberForSimplicity(419));
    console.log(1123, checkingTheNumberForSimplicity(1123));

Igor

Asked: 2020-04-29 03:45:03 +0000 UTC

为什么将值分配给数组的所有“行”

1

当我单击一个元素时，我希望该元素上出现一个十字。但是十字架出现在所有的线上。在控制台中我显示了函数来的坐标，可以看出它们是正确的。

为什么会发生这种情况以及如何解决？

class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            data: Array(5).fill(Array(5).fill('О')),
        };
    }

    onClick = (i, j) => {
        return () => {
            let data = this.state.data;
            console.clear();
            console.log(i, j);
            
            data[i][j] = 'X';
            this.setState({data});

        }
    };


    render() {
        return (
            <div className="field">
                {this.state.data.map((item, i) => (
                   <div key={`row-${i}`} className="field__row">
                      {item.map((item, j) => <div key={`cell-${j}`} onClick={this.onClick(i, j)} className="field__cell">{item}</div>)}
                   </div>
                ))}
           </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

.field {
    font-size: 0;
}

.field__cell {
    position: relative;
    display: table-cell;
    width: 30px;
    height: 30px;
    border: 1px solid black;
    vertical-align: middle;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Igor

Asked: 2020-04-26 20:36:39 +0000 UTC

将 addEventListener 分配给变量。帮助弄清楚发生了什么[重复]

2

我遇到了这种情况，出于教育目的，了解它的工作原理很有趣。

我将它分配给this.button.addEventListener一个变量，并且多次addHandler调用导致当您单击文档中的任何位置时，都会触发事件，我在此设计的帮助下挂断了。addHandler

为什么它会以这种方式工作，我无法理解。告诉。

class Button1 {
  constructor(button, value) {
    this.button = button;
    this.value = value;

    this.init();
  }

  init() {
    this.button.addEventListener('click', () => {
      console.log(this.value)
    })
  }
}

class Button2 {
  constructor(button, value) {
    this.button = button;
    this.value = value;

    this.init();
  }

  init() {
    let addHandler = this.button.addEventListener;
    addHandler('click', () => {
      console.log(this.value)
    })
  }
}

let button1 = document.getElementById('button_1');
let button2 = document.getElementById('button_2');
let button3 = document.getElementById('button_3');
let button4 = document.getElementById('button_4');
let button5 = document.getElementById('button_5');
let button6 = document.getElementById('button_6');

let newButton1 = new Button1(button1, 'п');
let newButton2 = new Button1(button2, 'а');
let newButton3 = new Button1(button3, 'в');
let newButton4 = new Button2(button4, 1);
let newButton5 = new Button2(button5, 2);
let newButton6 = new Button2(button6, 3);

<p>Я думал сработает только событие кнопки, но срабатывает событие кнопки + события трех следующих кнопок. К тому же события трех кнопок срабатывае при клике на любом месте документа</p>
<button id='button_1'>п</button>
<button id='button_2'>а</button>
<button id='button_3'>в</button>
<p>При нажатии на одну, сработает функция всех</p>
<button id='button_4'>1'</button>
<button id='button_5'>2'</button>
<button id='button_6'>3'</button>

Igor

Asked: 2020-04-05 20:37:44 +0000 UTC

如何判断一个元素是否有滚动条？

2

有一个弹出窗口；在宽显示器上没有滚动，但在窄显示器上有滚动。

当窗口弹出时，我从中删除滚动body，如果弹出窗口有滚动，那么一切看起来都很好，但如果没有，由于所有页面内容都移动到了宽度滚动：

如何知道一个元素是否有滚动条？

当然，可以将浏览器窗口的高度与弹出窗口的内容高度进行比较，但要做到这一点，您必须考虑弹出窗口的所有填充和子元素的所有填充。这将需要大量的努力，而且很可能不是一种可靠的方法。

有没有内置的方法？

Igor

Asked: 2020-03-25 00:58:30 +0000 UTC

获取如何处理 404（未找到）异常

2

我正在使用这段代码：

try {
  fetch(url)
    .then(res => res.json())
    .then(data => callback(data))
    .catch(e => console.log(e));
} catch(e) {
  console.log(e);
}

我故意设置了错误的url一个并使用成功捕获了一个异常.catch(e => console.log(e))，但是有这样一个未处理的异常：

GET https://neto-api.herokuapp.com/ets 404 (Not Found)

如何处理？try..catch由于某种原因它不起作用

Igor

Asked: 2020-03-25 00:29:23 +0000 UTC

获取并尝试..catch 为什么不起作用

0

有这样的设计：

try {
   fetch(url)
      .then(res => res.json())
      .then(data => callback(data));
} catch(e) {
   console.dir(e);
}

当我故意传递一个 invalidurl时，控制台会打印一个未处理的异常。

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at <anonymous>:120:28

在这种情况下如何处理异常？

Igor

Asked: 2020-03-22 06:03:03 +0000 UTC

如何在反应中使用

1

有一个组件接受一个数字并渲染适当数量的星星。

我这样做的方式不是很方便而且相当悲伤。

function Stars({count}) {
  let star = [];
  for (let i = 0; i < count; ++i) {
      star.push(i)
  }

  let items = star.map(item => <li key={item}><Star /></li>);

  return <ul>{items}</ul>;
}

我想这样做：

function Stars({count}) {
  let items = null;
  for (let i = 0; i < count; ++i) {
      items += <li key={i}><Star /></li>;
  }

  return <ul>{items}</ul>;
}

是的，我只得到null[object Object]而不是星号。

如何react实现我想要的逻辑或尽可能简化第一个选项？

Igor

Asked: 2020-03-13 20:06:44 +0000 UTC

:invalid 在页面加载时不会触发，但只有在输入更改后才会触发

2

在这个例子中，如果“执行代码”input是红色的，它工作:invalid，它必须是input默认样式，只要它没有被触及。

我需要实现这种行为：

input使用默认样式，您输入一个无效值，您将其删除，focus然后input它才会变成红色。

是否可以在不使用的情况下实现此行为js

但是目前input页面加载时它会变成红色。如何解决？无法required删除。

input:invalid {
    background: red;
}
input:focus {
    background: white;
}

<input type="email" required/>

TS2322：类型 '* | ' 不能分配给类型 ' & *'。像类型'test1' | “test2”变成“test1”和“test2”？

一个数组类型，其中除了最后一个之外的所有内容都是一个字符串，最后一个元素是一个函数。打字稿

在打字稿中为一个变量使用两种类型

如何从一个表单中获取所有值？

如何制作高分辨率的静态地图图像？

如何通过在地址栏中输入地址来在 react-router 中呈现所需的路由器？

如何检查一个类是否是 React 组件？

为什么在应用 svg 过滤器时形状会移出以及如何修复它？

是否可以在节点上创建像 create-react-app 这样的控制台应用程序？

如何异步执行对服务器的请求。节点.js

如何从类中访问类方法/变量？

onUnload 事件及其反面

可以不将数字转换为无穷大吗？或者如何在 JS 中进行农场简单性测试

为什么将值分配给数组的所有“行”

将 addEventListener 分配给变量。帮助弄清楚发生了什么[重复]

如何判断一个元素是否有滚动条？

获取如何处理 404（未找到）异常

获取并尝试..catch 为什么不起作用

如何在反应中使用

:invalid 在页面加载时不会触发，但只有在输入更改后才会触发

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

Igor's questions