相关疑难解决方法(0)

允许typescript编译器仅在一个react状态属性上调用setState

我正在将一个带有React的Typescript用于一个项目.Main组件通过此接口获得传递状态.

interface MainState {
  todos: Todo[];
  hungry: Boolean;
  editorState: EditorState;  //this is from Facebook's draft js
}
Run Code Online (Sandbox Code Playgroud)

但是,下面的代码(仅限摘录)将无法编译.

class Main extends React.Component<MainProps, MainState> {
  constructor(props) {
    super(props);
    this.state = { todos: [], hungry: true, editorState: EditorState.createEmpty() };
  }
  onChange(editorState: EditorState) {
    this.setState({
      editorState: editorState
    });
  }
}
Run Code Online (Sandbox Code Playgroud)

编译器抱怨说,在onChange我只尝试为一个属性设置setState 的方法中,属性todos和属性hungry在类型中缺失{ editorState: EditorState;}.换句话说,我需要在onChange函数中设置所有三个属性的状态以使代码编译.为了编译,我需要做

onChange(editorState: EditorState){
  this.setState({
    todos: [],
    hungry: false,
    editorState: editorState
  });
}
Run Code Online (Sandbox Code Playgroud)

但是没有理由在代码中设置todoshungry属性.在typescript/react中只调用一个属性的正确方法是什么?

typescript reactjs

44
推荐指数
3
解决办法
3万
查看次数

TypeScript 中的超类型约束

我正在尝试使用updeep图书馆。一个典型的使用例子updeep是这样的:

var person = {
  name: {
    first: 'Jane',
    last: 'West'
  }
};

var result = u({ name: { first: 'Susan' } }, person);
Run Code Online (Sandbox Code Playgroud)

这里的想法是,这result将是 的克隆,person但值已name.first更改。你可以想象这个函数,u在 TypeScript 中定义为:

function u<T>(changes: {}, obj: T): T { ... }
Run Code Online (Sandbox Code Playgroud)

这捕获了第二个参数的类型也是函数的返回类型的事实。但是,它不表达的是,changes应该是一个超类型T

我想要的是对第一个参数进行一些类型检查。关键是参数中存在的值changes都应该出现在T类型参数中,并与它们对应的类型匹配。表达这个允许我们检查changes参数以确保它对类型有意义T即,是 的超类型T)。

我不确定这在 TypeScript 中是否可行。在 Java 等语言中,您有super关键字,它可用于描述对类型参数的约束。

虽然 TypeScript 不允许,但这样的事情表达了我想要的: …

typescript

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

为什么TypeScript声明对象文字`{a}`使用接口`{a,b}`而不是`{a?,b}`

为什么以下断言有效:

interface AllRequired {
    a: string;
    b: string;
}

let all = {a: "foo"} as AllRequired; // No error
Run Code Online (Sandbox Code Playgroud)

但是这个断言给出了一个错误:

interface SomeOptional {
    a?: string;
    b: string;
}

let some = {a: "foo"} as SomeOptional; // Error: Property 'b' missing
Run Code Online (Sandbox Code Playgroud)

我能看到的唯一区别是使其中一个接口属性为optional(?).似乎所有属性都不是可选的,我可以断言接口的部分对象,但只要任何接口属性是可选的,我就不能断言部分对象了.这对我来说没有意义,我一直无法找到这种行为的解释.这里发生了什么?


对于上下文:我在尝试解决React 采用部分状态对象的问题时遇到了这种行为setState(),但是TypeScript还没有部分类型来使这个状态接口正常工作.作为一种变通方法,我想出了setState({a: "a"} as MyState),发现这个工程只要接口MyState字段是所有非可选,但一旦失败,一些属性是可选的.(使所有属性都是可选的是一种解决方法,但在我的情况下非常不受欢迎.)

typescript reactjs

7
推荐指数
1
解决办法
577
查看次数

扩展 Partial 接口的 Typescript 类

我想创建一个具有接口所有属性的类,但实际上并没有声明这些属性本身。接口属性是在构建过程中附加的,并且将在运行时存在。

我发现这篇文章指出了使用的方向Partial<T>……但这似乎不起作用。以下代码不会产生编译错误。

interface Animal {
    name: string;
}

interface HasConstructor {
    constructor: any;
}
//Do this to supress this error: "Type 'Dog' has no properties in common with type 'Partial<Animal>"
type OptionalAnimal = Partial<Animal> & HasConstructor;

class Dog implements OptionalAnimal {
    public constructor() {

    }
    public breed: string;
}
Run Code Online (Sandbox Code Playgroud)

但是,该name属性在 Dog 实例上不可用。

var spot = new Dog();
spot.name = "Spot"; //ERROR: Property 'name' does not exist on type 'Dog'
Run Code Online (Sandbox Code Playgroud)

我可以通过创建另一种类型并像这样引用它来解决这个问题:

type AnimalDog …
Run Code Online (Sandbox Code Playgroud)

typescript

7
推荐指数
1
解决办法
8505
查看次数

如何在 TypeScript 中动态更新类型化对象上的键值对

我正在尝试创建一个函数,它接受一个键和一个值,并更新类型化对象上相应的键值对。这是我所追求的一个基本示例。

使用以下代码链接到代码沙箱

type x = {
    prop : number,
    other : string
}

let dataToUpdate : x = {
    prop: 1,
    other: "string"
}

function updateKey(key : string, value : number | string) {
    dataToUpdate[key] = value;
}
Run Code Online (Sandbox Code Playgroud)

我通过上述实现收到此错误。

元素隐式具有'any'类型,因为 type 的表达式'string'不能用于索引 type 'x''string'在类型上找不到带有类型参数的索引签名'x'。(7053)

更新我被介绍了XY Problem 的想法。下面是我所追求的实际实现。我正在尝试在 React 中创建一个上下文,该上下文返回一个函数,该函数允许您仅更新存储在上下文中的对象内的特定属性

export function StoreProvider(props: any) {
    const [storeData, setStoreData] = useState<StoreData>(initProviderData);

    function setStoreKeyValue(keyToUpdate: keyof StoreData[], valueToSet: boolean | string | number | …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs

6
推荐指数
1
解决办法
3773
查看次数

标签 统计

typescript ×5

reactjs ×3