小编And*_*ems的帖子

什么是规定尖括号的时间,地点,方式和原因的一般规则,即"<...>"应该在TypeScript中使用？

虽然我认为我理解这些括号的许多个人用法,但我很难看到它们的一般使用模式:它们有时似乎先于事物之前,有时候会附加在事物之后; 有时它们用于泛型,有时用于特定类型; 有时它们出现在我可能天真地期望使用冒号语法的地方.

我对TypeScript基础知识有一个相当好的理解:一般来说,我研究了TypeScript主页教程,浏览了TypeScript规范的重要部分,阅读了"Definitive TypeScript Guide"网站,并遵循了"Mastering TypeScript"视频教程.在这个特定主题上,我还搜索了Google和StackOverflow.

我的问题不是理解尖括号的任何特定用途.相反,我想对括号的含义,它们的确切语法,何时应该使用它们,什么时候不应该使用等等进行简明但详尽/通用的解释.

更新:

我正在更新我的问题以回应一些评论,以澄清为什么我问这个问题以及我究竟在寻找什么.

让我给予的东西,我的例子来说明我的要求做知道的一般规则:在香草的JavaScript花括号.花括号总是出现在一对围绕实体的开合支撑中.该实体可以是两个主要"事物"之一.

首先,花括号可以包围一组语句:

• 函数,方法,构造函数或生成器的主体,

• 身体一个if陈述/条款或else条款,

• 的主体for,for/ of,for/ in,while或do/ while循环,

• 主体的try,catch或finally块,或

• 一个匿名的陈述块.

其次,花括号也可以包含以下列表:

• 对象文字的属性,

• 构造函数,属性和/或class声明方法,

• 要从模块export编辑或import编辑的函数和/或常量,

• case遵循switch标准,或

• enum秒.

(此列表是否完整和/或正确不是重点.)

现在想象有人学习JavaScript.到目前为止,她可能已经正确地学会了如何使用花括号来包围一个语句块,即上面第一组中的用法.但是,她偶尔也会在不是语句块的事物周围遇到花括号,例如{a:1, b:2}并且因为这些花括号的内容不是可以执行的语句而感到困惑.或者更糟糕的是,她甚至无法指出一个她不理解的例子.相反,她只是在她的脑海中有这种啃咬的感觉,她遇到的其他人写的代码包含以不熟悉的方式使用的花括号(尽管她不记得在哪里).这使她怀疑她目前对何时使用花括号的理解可能不完整.她没有试图找到她不理解的个别例子,而只是希望有人给她上面的"规则"列表,其中包括使用花括号的地方.

所以,我的问题再次提出以下问题:有人可以为我描述一些一般原则和/或具体规则,这些原则和/或具体规则详尽地描述了在TypeScript中使用尖括号的方式,就像我上面描述的在JavaScript中使用花括号一样？

我想测试我的React组件是否可以用来FileReader从<input type="file"/>元素中导入用户选择的文件的内容.我的下面的代码显示了一个测试中断的工作组件.

在我的测试中,我试图使用blob作为文件的替代品,因为blob也可以被"读取" FileReader.这是一种有效的方法吗？我还怀疑问题的一部分reader.onload是异步的,我的测试需要考虑到这一点.我需要某个地方的承诺吗？或者,我是否需要模拟FileReader使用jest.fn()？

我更愿意只使用标准的React堆栈.特别是我想使用Jest和Enzyme而不必使用Jasmine或Sinon等.但是如果你知道Jest/Enzyme 无法做到的事情,但可以采用另一种方式,那也可能有所帮助.

MyComponent.js:

import React from 'react';
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {fileContents: ''};
        this.changeHandler = this.changeHandler.bind(this);
    }
    changeHandler(evt) {
        const reader = new FileReader();
        reader.onload = () => {
            this.setState({fileContents: reader.result});
            console.log('file contents:', this.state.fileContents);
        };
        reader.readAsText(evt.target.files[0]);
    }
    render() {
        return <input type="file" onChange={this.changeHandler}/>;
    }
}
export default MyComponent;

MyComponent.test.js:

import React from 'react'; import {shallow} from …

我想测试是否在React应用程序中正确加载了图像.我已经决定检查嵌套在React组件src中的img元素的属性.我想使用Jest测试框架,如果需要,还可以使用Enzyme测试实用程序.

通过挖掘Object.keys一个浅的React测试组件,我能够提出以下解决方案.我不确定的线用星号表示.

import React     from 'react';
import {shallow} from 'enzyme';
import App       from './App';

it('should have the logo image', () => {
  const app = shallow(<App />);
  const img = app.find('img');
  const src = img.node.props.src; // ******
  expect(src).toBe('logo.svg');
});

这个解决方案确实有效但似乎有点复杂(它需要一个包装器属性属性的属性)并且看起来有点模糊(我不能轻易找到这个在线的明确说明).那么,这是正确/最简单的方法吗？

• 如果是这样,文档在哪里？
• 如果没有,我该怎么做/可以做到这一点？例如,酶中是否有一些现成的getAttribute或retrieveProp方法等？是否有更好的方法使用其他东西而不是酶,例如react-addons-test-utils？

关于React元素属性的这个问题似乎并没有完全回答它,即使那里的海报也表明很难找到关于断言渲染属性值的文档.许多其他问题(例如,此处,此处和此处)处理React/Jest/Enzyme但不处理检索属性值.

JavaScript函数编程库Ramda.js的API文档包含符号缩写,但没有提供理解这些的图例.有没有地方(网站,文章,备忘单等)我可以去解读这些？

Ramda.js API文档中的一些示例:

Number -> Number -> Number
Apply f => f (a -> b) -> f a -> f b
Number -> [a] -> [[a]]
(*... -> a) -> [*] -> a
{k: ((a, b, ..., m) -> v)} -> ((a, b, ..., m) -> {k: v})
Filterable f => (a -> Boolean) -> f a -> f a
Lens s a = Functor f => (a -> f a) -> s -> f s
(acc -> x -> …

注意:虽然这个问题中的代码涉及函数式编程/ monad等,但我不是在询问函数式编程(我也不认为这个问题应该有与函数式编程相关的标签等).相反,我问的是使用JavaScript的原型.

代码来源

我正在观看道格拉斯·克罗克福德的视频"Monads and Gonads"(在YouTube上这里或这里).他在JavaScript中包含了monad的演示实现,如下所示.

该monad对象和它的原型

在他的代码中,他创建了一个真正空的对象,Object.create(null)并使用它作为最终monad对象的原型.他将bind方法附加到monad对象本身,但是后来附加到monad使用的任何自定义函数都不lift是附加到monad对象本身而是附加到它的原型.

需要原型吗？

在我看来,使用原型是不必要的复杂性.为什么这些自定义函数不能直接附加到monad对象本身？然后,在我看来,不需要原型,我们可以简化代码.

删除原型时令人费解的结果

我尝试实现这种简化并得到令人费解的结果.非原型使用代码有时仍然有效,即当调用自定义函数而没有额外的参数(monad2.log())时,它仍然可以使用monad-wrapped值(字符串"Hello world." ).但是,当使用额外的参数(monad2.log("foo", "bar"))调用自定义函数时,代码现在无法找到,value即使它仍然可以使用这些额外的参数.

关于令人费解的结果的更新:部分是因为来自@amon的回答,我意识到令人费解的结果没有出现因为我改变了参数的数量,而是因为我只是lift在monad上重复调用ed方法(无论是或者参数的数量是否已经改变).因此,连续运行monad2.log()两次将在第一次产生正确的值,但第二次将不确定.

问题

那么,为什么这段代码需要原型？或者,或者,如何消除原型导致value可以访问某些时间而不是其他时间？

演示代码说明

代码的两个版本如下所示.原型使用代码(MONAD1)与Crockford在他的视频中使用的代码相同,只是附加的自定义函数console.log不是为了alert让我可以在节点而不是在浏览器中使用它.非原型使用代码(MONAD2)进行注释中指示的更改.输出显示在注释中.

原型使用代码

function MONAD1() {
    var prototype = Object.create(null);       // later removed
    function unit (value) {
        var monad = Object.create(prototype); …

我正在使用标准的React设置在WebStorm中编写React应用程序.我之前从未明确设置任何linting,因此出现的任何错误/警告消息都来自某种默认配置.当我跑步时,npm start我得到以下警告:

Compiled with warnings.

Warning in ./path/to/MyComponent.js

/my/complete/path/to/MyComponent.js
  19:49  warning  Unexpected whitespace before property bind  no-whitespace-before-property
...
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

最后两行明确指出警告来自ESLint(而不是JSHint或某些自定义React linting等).

我想保持ESLint运行,即我不想全局禁用所有linting.但是,我想在任何地方关闭"no-whitespace-before-property"警告,而不仅仅是在一行或一个文件中.我怎么做？

我package.json显示以下内容npm start(这是警告出现时我运行的内容):

"scripts": {
  "start": "react-scripts start",
  ...
}

我正在开发WebStorm.该ESLint首选项面板中有"启用"复选框选中,那么所有的在IDE中ESLint配置选项是灰色的,并可能无关紧要,所以想必也是ESLint的配置和调用都发生在其他地方(如内置反应是？).

我尝试将以下.eslintrc.json文件放入我的项目主目录:

{
  "rules": {
    "no-whitespace-before-property": "off"
  }
}

单独以及与"extends": "eslint:recommended".

我尝试将以下内容添加到项目的 …

在回答一个关于如何propTypes使用Jest在React中测试的不同SO问题时,我提出了一个嘲笑的解决方案console.error,其他人之前做过的事情,但我认为可以改进.我的解决方案,一个功能,如下.下面的示例代码包含一些propTypes随后进行测试的任意代码.对于每个测试,我期望第一个"可接受值"的子数组不会导致模拟console.error被React调用,但我预计第二个子数组中的每个测试prop值都是"不可接受的值"导致嘲笑已被召唤.

该testPropTypes功能

const testPropTypes = (component, propName, arraysOfTestValues, otherProps) => {
    console.error = jest.fn();
    const _test = (testValues, expectError) => {
        for (let propValue of testValues) {
            console.error.mockClear();
            React.createElement(component, {...otherProps, [propName]: propValue});
            expect(console.error).toHaveBeenCalledTimes(expectError ? 1 : 0);
        }
    };
    _test(arraysOfTestValues[0], false);
    _test(arraysOfTestValues[1], true);
};

示例代码

MyComponent.js(只是propTypes):

MyComponent.propTypes = {
    myProp1: React.PropTypes.number,      // optional number
    myProp2: React.PropTypes.oneOfType([  // required number or array of numbers
        React.PropTypes.number, …

我想使用模板文字，即反引号，将数组中的元素插入到我的 HTML 中。本质上，我想创建自己的极其简单的模板系统。

我希望forEach工作，每个迭代回调只是插入返回的文本。但是，它只是返回undefined，例如：

const myArray = ['square', 'triangle', 'circle'];
document.querySelector('div').innerHTML = `
  <p>Some shapes:<\p>
  <ul>
    ${myArray.forEach(elmt => `
      <li>${elmt}</li>
    `)}
  </ul>
`;

<div></div>

那么，我该怎么做呢？