小编Gir*_*afa的帖子

npm包@types/react允许我们在TypeScript应用程序中使用React.我们将组件定义为

type Props = {...}

type State = {...}

export default class MyComponent extends React.Component<Props, State> {
}

这里我们必须声明组件props和state的类型(在类型变量中).

在我们声明了类型之后,TypeScript使用它来验证组件的使用(传递给它的props的形状).

我想围绕这样一个组件创建一个容器.容器将重用组件的props.但是为了创建具有相同道具的另一个组件,我必须再次重新声明道具的类型.或者从原始组件文件中导出它们并导入到容器中:

// original file
export type Props = {...}

// container file
import MyComponent, { Props } from './original'

但我已经MyComponent从该文件导入了.此组件已包含有关其消耗的道具的信息(感谢类型变量React.Component).

问题是如何从组件类本身访问该信息而不显式导出/导入props的类型？

我想要的东西:

import MyComponent from './MyComponent'

type Props = MyComponent.Props // <= here access the component prop types

export default class MyContainer extends React.Component<Props, {}> {}

我在我的项目中使用KnockoutJS,但想学习AngularJS,因为它有很多Knockout没有的美味功能.所以我有兴趣使用Angular重写我的一些代码.但我不明白如何做一些我在Knockout中使用的简单事情.例如,Knockout具有计算的可观察量的特征.这很酷!我已经发现我可以使用一个简单的函数.但是Knockout为计算的observable提供了"write"函数,例如:

var first_name = ko.observable('John'),
    last_name = ko.observable('Smith'),
    full_name = ko.computed({
        read: function(){
            return first_name() + ' ' + last_name();
        },
        write: function(new_value){
            var matches = new_value.match(/^(\w+)\s+(\w+)/);

            first_name(matches[1]);
            last_name(matches[2]);
        }
    });

JSFiddle上的这段代码:http://jsfiddle.net/Girafa/QNebV/1/

此代码允许我在更改"full_name"时更新"first_name"和"last_name"observable.如何使用AngularJS完成？检查存在参数的函数？像这样的东西？

first_name = 'John';
last_name = 'Smith';
full_name = function(value){
    if (typeof value != 'undefined')
    {
        // do the same as in the Knockout's write function
    }
    else
    {
        // do the same as in the Knockout's read function
    }
}

什么是最佳做法？

假设我们有一个可以包含值数组的表单.对于这种情况,Angular为我们提供了FormArray课程.

this.form = new FormGroup({
  addresses: new FormArray([]),
})

我们也有能力使用NgForm#setValue.这可以用于填充表单,其中包含从服务器检索的一些数据.

当我从服务器接收新数据时,我想用该数据填充表单.例如,我的数据如下所示:

const data = {
  addresses: [
    { country: 'USA', city: 'New York' },
    { country: 'Germany', city: 'Berlin' },
  ]
}

现在是时候用这些数据填充表单了.当我尝试简单地调用时,this.form.setValue(data)我收到一个错误:

Cannot set property stack of [object Object] which has only a getter

如何使用数据填充表单,但具有以下要求:

1. 我知道addresses财产的形状.
2. 我不知道该data.addresses数组中的地址数量.

我有一个反应组件内的元素列表,我希望它们是可点击的.点击后,我调用一些外部函数在参数中传递项目ID:

render () {
  return (
    <ul>
      {this.props.items.map(item => (
        <li key={item.id} onClick={() => {doSomething(item.id)}></li>
      ))}
    </ul>
  )
}

这段代码有效,但它有很大的性能缺点:每次调用时都会创建许多新的匿名函数render.

如何doSomething在此处传递该功能作为参考,同时仍然可以提供item.id它？

我正在尝试为我的项目设置webpack.该项目足够大,并以多种语言提供.我希望每种语言的每个入口点都作为单独的文件提供.我的语言文件不仅仅是简单的JSON,而是JavaScript.所以i18n插件不符合我的需求.

该解决方案似乎与i18n插件类似:

var languages = ['en', 'fr', 'de'];
module.exports = languages.map(function (lang) {
  return {
    name: lang,
    // some other language-dependent config
  }
})

然后在我的一些脚本中,我想要使用环境变量来定位本地化文件:

var lang = ...; // some environment variable, available only at compile time
var l10n = require('./lang/' + lang);

但是默认情况下,webpack尝试将该表达式存储在括号中,假设稍后在浏览器中对其进行评估.

那么有没有办法告诉webpack立即评估？

或者有人可以更好地解决我的问题？

我想lodash在保留类型的同时导入单个函数。比如这个：

import invokeMap from 'lodash/invokeMap';

但似乎我不能这样做。编译器说没有 module lodash/invokeMap。这是正确的——绝对类型只为 声明了顶级模块lodash，所以我只能导入整个包。但我只想导入一个函数。

有没有办法只导入有关 lodash 的类型信息而不导入 lodash 本身？

以下是我的解决方案。我想使用标准的 CommonJSrequire函数来导入没有类型信息的必要函数，然后将类型转换到它上面：

declare var require;

var invokeMap: _.invokeMap = require('lodash/invokeMap');
               ^^^^^^^^^^^
               Here I want to cast proper type from DefinitelyTyped,
               but how to reach that `invokeMap` typings alone?

我拥有一个域名my-portal.com。我想从 提供静态网站my-portal.com/site/a/。我想从 提供另一个静态网站my-portal.com/site/b/。

如何使用 AWS 提供的资源来做到这一点？

我试图将两个网站设置为两个独立的 S3 存储桶，并启用静态网站托管，然后创建一个包含资源的 API 网关/site/a，并将/site/b其配置为 S3 网站的 HTTP 代理。

此设置在大多数情况下都可以正常工作。但是，当浏览器尝试从我的静态网站加载二进制文件（字体、图像等）时，API 网关无法正确处理该文件并以损坏的文件进行响应（因为它对二进制文件的行为很奇怪）。

我还有哪些其他方法可以达到相同的结果？

假设我们有一组值:

[5, 5, 3, 5, 3, 3]

按价值和邻接对它们进行分组的最佳方法是什么？结果应如下:

[ [5,5], [3], [5], [3,3] ]

当然,我可以循环遍历源数组并查找下一个/上一个项目,如果它们是相同的,则将它们推送到临时数组,然后将其推送到结果数组.

但我喜欢以功能方式编写代码.那么也许有更好的方法呢？

假设你有一个这样的对象：

{
  a: [1,2,3],
  b: [2],
  c: [1,4]
}

您需要将其转换为：

{
  1: ['a', 'c'],
  2: ['a', 'b'],
  3: ['a'],
  4: ['c']
}

使用命令式方式和可变数据结构很容易做到这一点：

function convert (obj) {
  var key, values
    , result = {};

  for (key in obj) {
    values = obj[key];
    values.forEach(function (value) {
      result[value] = result[value] || []; // bad — mutability :(
      result[value].push(key); // bad — mutability :(
    });
  }

  return result;
}

但是有没有办法只使用纯函数而不使用任何赋值来做到这一点？允许使用某些库进行函数式编程。