标签: ecmascript-7

如何避免硬编码?在装饰者

我读过"如何实现打字稿装饰器?" 和多个来源,但我有一些东西,也没有能够与装饰.

class FooBar {
    public foo(arg): void { 
        console.log(this);
        this.bar(arg);
    }
    private bar(arg) : void { 
        console.log(this, "bar", arg);
    }
}
Run Code Online (Sandbox Code Playgroud)

如果我们调用函数foo:

var foobar = new FooBar();
foobar.foo("test"); 
Run Code Online (Sandbox Code Playgroud)

该对象FooBarconsole.log(this);in 登录到控制台中foo

该字符串"FooBar {foo: function, bar: function} bar test"由控制台记录在控制台console.log(this, "bar", arg);bar.

现在让我们使用装饰器:

function log(target: Function, key: string, value: any) {
    return {
        value: (...args: any[]) => {
            var a = args.map(a => JSON.stringify(a)).join();
            var result = value.value.apply(this, …
Run Code Online (Sandbox Code Playgroud)

javascript decorator typescript ecmascript-7

8
推荐指数
1
解决办法
2320
查看次数

我可以解雇并忘记nodejs(ES7)中的承诺吗?

我想用babel运行这段代码:

redisClientAsync.delAsync('key');
return await someOtherAsyncFunction();
Run Code Online (Sandbox Code Playgroud)

在没有等待第一行的异步函数内部.这个可以吗?

我怎么能运行一些我不在乎的东西?

我可以在没有回调的情况下触发非promisified函数del('key',null)吗?

javascript promise async-await es6-promise ecmascript-7

8
推荐指数
2
解决办法
6040
查看次数

在React.js中覆盖/扩展ES7类上的静态属性

ES7引入了static属性和方法定义的概念.与支持ES7的转换器一起,这些可以在React中用于指定验证器和默认值props,如下所示:

export default class ComponentOne extends React.Component {
    static propTypes = {
        foo: React.PropTypes.string
    }
    static defaultProps = {
        foo: 'bar'
    }
    // ...
}
Run Code Online (Sandbox Code Playgroud)

这非常方便,但是当子类发挥作用时会变得棘手.例如,假设以下模块添加到与ComponentOne上面相同的代码库中:

export default class ComponentTwo extends ComponentOne {
    static propTypes = {
        baz: React.PropTypes.number
    }
    static defaultProps = {
        baz: 42
    }
    // ...
}
Run Code Online (Sandbox Code Playgroud)

我想ComponentTwo"继承"其超类的属性验证器和默认值ComponentOne.相反,propTypesdefaultPropsComponentTwo影子上ComponentOne,和React抛出那些定义ComponentOne.

既然super是对当前类原型的引用,并且static应该引用直接挂在原型上的值,我认为这可能有效:

import _ …
Run Code Online (Sandbox Code Playgroud)

javascript inheritance static reactjs ecmascript-7

8
推荐指数
1
解决办法
2140
查看次数

javascript:在.replace中进行异步/等待

我正在通过以下方式使用async / await函数

async function(){
  let output = await string.replace(regex, async (match)=>{
    let data = await someFunction(match)
    console.log(data); //gives correct data
    return data
  })
  return output;
}
Run Code Online (Sandbox Code Playgroud)

但是返回的数据是一个Promise对象。只是对应该在带有回调的此类函数中实现它的方式感到困惑。

javascript async-await es6-promise ecmascript-7

8
推荐指数
4
解决办法
4147
查看次数

创建基本组件然后在React中扩展它们是一个好习惯吗?

我刚学习React,我正在使用ES7语法编写组件.我的想法是创建一个基本组件,它将包含一些我希望所有派生组件都具有的方法.例如,我想在没有mixin的情况下实现valueLink,以便在我的所有组件中进行双向绑定.这是我的想法:

class MyComponent extends React.Component {

    bindTwoWay(name) {
        return {
            value: this.state[name],
            requestChange: (value) => {
                this.setState({[name]: value})
            }
        }
    };
}
Run Code Online (Sandbox Code Playgroud)

 

class TextBox extends MyComponent {
    state = {
        val: ''
    };

    render() {
        return (<div>
            <input valueLink={this.bindTwoWay('val')}/>
            <div>You typed: {this.state.val}</div>
        </div>)
    }
}
Run Code Online (Sandbox Code Playgroud)

它工作得很好.但是,我无法找到有关此方法的更多信息.这不是关于valueLink,这只是一个例子.我们的想法是在基础组件中包含一些方法,然后扩展该组件,以便派生组件具有所有这些方法,就像通常的OOP方式一样.所以我想知道这是完全没问题,还是有一些我不知道的缺陷.谢谢.

ecmascript-6 reactjs ecmascript-7

8
推荐指数
1
解决办法
6101
查看次数

使用子组件中的箭头函数反应传递参数

我有这些父子组件,我想通过点击功能来选择子组件中的项目.然而,似乎子组件中的函数被自动调用而不是等到用户单击元素.为了使它更清楚,我的父母和孩子组件

export class ParentView extends Component {
  state = {
    selectedItem: {}
  }

  handleClick = (item) => {
    alert('you click me');
    this.setState({selectedItem: item});
  } 

  render() {
    let item = { name: 'Item-1' };
    return (
      <div>
        <ChildItem item={item} handleClick={this.handleClick} />
      </div>
    );
  }
}

export class ChildItem extends Component {
  render() {
    const {item, handleClick} = this.props;
    return (
      <div>
        <a  onClick={handleClick(item)} />
      </div>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

这些是使用箭头函数传递handleClick给子组件的我的组件,但是警报始终在第一次渲染时被调用,而不是由用户触发.有什么建议吗?

ecmascript-6 reactjs ecmascript-7

8
推荐指数
2
解决办法
1万
查看次数

功能类似于Promise.some/any,用于未知数量的承诺

我在node.js(V8.1.3)中创建一个脚本,该脚本查看来自多个API的类似JSON数据并比较这些值.更确切地说,我正在研究不同股票的不同市场价格(实际上是加密货币).

目前,我正在使用promise.all来等待各个API的所有响应.

let fetchedJSON =
        await Promise.all([getJSON(settings1), getJSON(settings2), getJSON(settings3) ... ]); 
Run Code Online (Sandbox Code Playgroud)

但是,如果即使只有一个承诺拒绝错误,Promise.all也会抛出错误.在bluebird docos中有一个名为Promise.some的函数,它几乎就是我想要的.据我所知,它需要一系列承诺并解决两个最快的解决方案,否则(如果少于2个promises解决)会抛出错误.

这个的问题是,首先,我不希望最快的两个承诺被解决为它返回的东西,我希望任何成功的承诺返回,只要有超过2.这似乎是什么Promise.any除了最小计数为1.(我要求最少数为2)

其次,我不知道我将等待多少Promise(换句话说,我不知道我将从中请求数据的API数量).它可能只有2或可能是30.这取决于用户输入.

目前写这篇文章在我看来,可能只有一种方法来获得一个计数为2的promise.any,这将是最简单的解决方案.这可能吗?

顺便说一下,不确定标题是否真的总结了这个问题.请建议编辑标题:)

编辑:我可能编写脚本的另一种方式是前两个API开始计算并加载到浏览器,然后是每个下一个加载和计算后的JSON.这样我就不会等待所有Promise在我开始计算数据并将结果传递到前端之前完成.这个功能是否适用于其他情况?

我的意思是这样的:

并行请求JSON ......

| ----- JSON1 ------ |

| --- JSON-失败--- | > catch error>做错误的事情.不影响下一个结果.

| ------- ------- JSON2 | >至少满足2个结果>计算JSON>到浏览器.

| ------- JSON3 --------- | >计算JSON>到浏览器.

javascript node.js promise bluebird ecmascript-7

8
推荐指数
1
解决办法
2326
查看次数

清洁方式同时保持原始变量和破坏

有没有更清洁的方法来做到这一点(任何至少是ES草案并有一个babel插件,即ES6,ES7等):

const { a, b } = result = doSomething();
Run Code Online (Sandbox Code Playgroud)

我希望将整体结果保持为一个单一对象,同时也将其结构化.它在技术上有效,但result隐式声明(带隐式var),而我真的希望它也是一个const.

我现在正在这样做:

const result = doSomething();
const { a, b } = result;
Run Code Online (Sandbox Code Playgroud)

这再次起作用,但它略显冗长,因为我需要重复这种模式数十次.

理想情况下,我想要的是:

const { a, b } = const result = doSomething();
Run Code Online (Sandbox Code Playgroud)

但这显然是无效的语法.

javascript ecmascript-6 babeljs ecmascript-7 ecmascript-next

8
推荐指数
3
解决办法
1443
查看次数

SyntaxError:意外的令牌静态

我目前正在尝试评估与React一起使用的不同测试框架,结果证明Jest在我的列表中.但是,我正在尝试使用此处概述的静态属性:https://github.com/jeffmo/es-class-fields-and-static-properties.

所以,我采用了Jest主页上给出的教程,并添加了一个静态propTypes属性,我的代码如下所示:

import React from 'react';

class CheckboxWithLabel extends React.Component {

  static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = {isChecked: false};

    // since auto-binding is disabled for React's class model
    // we can prebind methods here
    // http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
    this.onChange = this.onChange.bind(this);
  }

  onChange() {
    this.setState({isChecked: !this.state.isChecked});
  }

  render() {
    return (
      <label>
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.onChange}
        />
        {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
      </label>
    );
  }
}

module.exports = CheckboxWithLabel;
Run Code Online (Sandbox Code Playgroud)

当我运行测试(npm test或jest)时,它会抛出以下错误:

?  jest            
Using Jest …
Run Code Online (Sandbox Code Playgroud)

jasmine ecmascript-6 jestjs ecmascript-7

7
推荐指数
2
解决办法
6469
查看次数

TypeScript Type-safe Omit函数

我想_.omit在普通打字稿中复制lodash的功能.omit应返回一个对象,该对象具有在首先出现的object参数之后通过参数指定的某些属性.

这是我最好的尝试:

function omit<T extends object, K extends keyof T>(obj: T, ...keys: K[]): {[k in Exclude<keyof T, K>]: T[k]} {
    let ret: any = {};
    let key: keyof T;
    for (key in obj) {
        if (!(keys.includes(key))) {
            ret[key] = obj[key];
        }
    }
    return ret;
}
Run Code Online (Sandbox Code Playgroud)

这给了我这个错误:

Argument of type 'keyof T' is not assignable to parameter of type 'K'.
  Type 'string | number | symbol' is not assignable to type 'K'.
    Type 'string' is not assignable …
Run Code Online (Sandbox Code Playgroud)

javascript underscore.js typescript lodash ecmascript-7

7
推荐指数
2
解决办法
1556
查看次数