小编Bug*_*ggy的帖子

Props我的组件有以下流类型：

type Props = {
  // <...>
  update: ({ dates?: DateRange }) => void
};

我还有以下导出类型：

export type SearchContextType = {
  // <...>
  update: ({ dates?: DateRange, location?: Location }) => void
};

当我尝试使用第二种类型将道具传递给第一个组件时，出现以下错误：

错误:(99, 23) 无法创建MyComponent元素，因为对象类型1location中缺少属性，但属性存在于对象类型 [2] 的第一个参数中。update

我理解这个错误，但我的问题是：如何正确解决它？

例子

// react-native example
import { StyleSheet, View } from 'react-native';

const styles = {
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  }
}

const stylesRN = StyleSheet.create(styles);

<View style={stylesRN.container}></View>

重用的最佳方式是什么

// inner styles 
{
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
}

在反应本机和反应中？

我想用伪代码实现什么（或者在 React 中重用的另一种方式）：

<div style={magicAdapter(styles.container)}>Hello World!</div>

问题：如果没有 magicAdapter，不可能在 React 中重用所有的 React-Native 内联样式as is。

我有一个简单的TypeScript类,它有一个私有函数,当用户单击一个按钮时,它应该被调用.click事件通过click()构造函数中的jQuery 事件绑定

HTML

<div id="foobar">
  <h2>Foo</h2>
  <button type="button">Bar</button>
</div>

TS

$(() => {
    var foo = new Bar($("#foobar"));
})

class Bar {
    private view: JQuery;
    private button: JQuery;

    constructor(view: JQuery) {
            // Fields
        this.view = view;
        this.button = view.find("button");

        // Events
        this.button.click(() => { this.buttonClick() });
    }

    private buttonClick() {
        this.view.find("h2").css("background-color", "red");
    }
}

https://jsfiddle.net/z4vo5u5d/18781/

但不知何故,当执行脚本时,控制台抱怨这buttonClick不是一个功能.我在这里错过了什么？

我想这是TypeScript中"this"的问题.但我无法弄清楚为什么.

编辑: 正如@Amadan所说:

this.button.click(() => { this.buttonClick() });

由jsfiddle错误地翻译成

this.button.click(function () { this.buttonClick(); });

同时,typescriptlang.org/play上的编译器将其正确转换为:

var _this …

TS-通过

[{name: 1}]匹配{ value: T }[]并T[]选择第一个签名，返回正确的类型T[]；

// TS example
function transformDataToForm<T>(data: { value: T }[]): T[];
function transformDataToForm<T>(data: T[]): T[];
function transformDataToForm<U, T extends { value?: U }>(data: T[]): (T | U)[] {
    return data.map(item => item.value ? item.value : item);
}

const res1: {name: number}[] = transformDataToForm([{name: 1}]);
const res2: number[] = transformDataToForm([{value: 1}]);                                    

流程 - 错误

我认为对于流程来说应该只存在一个匹配的签名。

declare function transformDataToForm<T>(data: { value: T }[]): T[];
declare function transformDataToForm<T>(data: T[]): T[];
function …