我正在将一个带有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)
但是没有理由在代码中设置todos此hungry属性.在typescript/react中只调用一个属性的正确方法是什么?
我正在尝试使用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 不允许,但这样的事情表达了我想要的: …
为什么以下断言有效:
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字段是所有非可选,但一旦失败,一些属性是可选的.(使所有属性都是可选的是一种解决方法,但在我的情况下非常不受欢迎.)
我想创建一个具有接口所有属性的类,但实际上并没有声明这些属性本身。接口属性是在构建过程中附加的,并且将在运行时存在。
我发现这篇文章指出了使用的方向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) 我正在尝试创建一个函数,它接受一个键和一个值,并更新类型化对象上相应的键值对。这是我所追求的一个基本示例。
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)