问题描述
我正在用 React 创建一个带有演示文稿的库。每个演示文稿组件必须至少设置一些属性,因此我创建了一个可以扩展以创建演示文稿的打字稿文件:
import React from "react";
abstract class _Presentation<P,S> extends React.Component{
static title: string
static description: string
static date: Date
static uri: string
}
export type PresentationType = typeof _Presentation
export function Presentation<P,S>(mandatory: {
title: string
description: string
date: Date
uri: string
}) {
return class extends _Presentation<P,S> {
static title = mandatory.title
static description = mandatory.description
static date = mandatory.date
static uri = mandatory.uri
}
}
当我尝试实现一个演示时,一切都很顺利,我可以像这样创建一个组件:
import React from 'react';
class SomePresentation extends Presentation({
title: "My presentation's title",description: "My presentation's description",date: new Date(2021,1,22,15,30,0),uri: "/presentation-slug"
}) {
render = () => (
<div>
Test
</div>
);
}
export default SomePresentation;
当我开始使用状态时,一切都开始分崩离析。我的摘要的组件类型似乎有些不对劲。我不知道如何使用正确的类型正确地进行这项工作。
import React from 'react';
class SomePresentation extends Presentation<{},{
width: number,height: number
}>({
title: "My presentation's title",uri: "/presentation-slug"
}) {
constructor(props: any) {
super(props);
this.state = {width: 0,height: 0}
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener('resize',this.updateWindowDimensions);
}
componentwillUnmount() {
window.removeEventListener('resize',this.updateWindowDimensions);
}
updateWindowDimensions() {
this.setState({width: window.innerWidth,height: window.innerHeight});
}
render = () => (
<div style={{width: this.state.width,height:this.state.height}}>
</div>
);
}
export default SomePresentation;
我在使用 this.state.width
的地方收到以下错误:
Property 'width' does not exist on type 'Readonly<{}>'
我已经花了几个小时搜索如何正确使用这里的类型,但我不知所措。谁能为我指明正确的方向?
编辑:
为了进一步说明,我使用这些静态变量在我的索引页上加载演示文稿列表。我有一个 index.tsx
可以导出所有演示组件。然后在主页面上我有以下代码:
import * as presentations from './presentations/index'
...
const presentationClasses = Object.values(presentations);
...
{presentationClasses.map((presentation,index) =>
<Route key={presentation.uri} path={presentation.uri}>
{React.createElement(presentation)}
</Route>
)}
解决方法
TypeScript 使用编译器,当编译器生成 JavaScript 时,会删除所有抽象属性。所有类型别名和接口。所以当你有一个包含所有抽象属性的抽象类时,它会变慢,TS 生成空类/函数。所以使用接口,看这个例子:
class A {
inherited = 1;
}
interface B {
abstract: string;
}
class C extends A implements B {
abstract = "Yes,I implement"
}
这个好多了,编译结果:
"use strict";
class A {
constructor() {
this.inherited = 1;
}
}
class C extends A {
constructor() {
super(...arguments);
this.abstract = "Yes,I implement";
}
}
所以没有空类。我完全推荐这个:
interface _PresentatonBase {
title: string;
description: string;
date: Date;
uri: string;
}
interface _Presentation<P,S> extends React.ComponentClass<P,S>,_PresentatonBase {}
function Presentation<S,P = {}>(mandatory: _PresentatonBase,state: S): _Presentation<P,S> {
return class SyntheticPresentation extends React.Component<P,S> {
state = state;
static title = mandatory.title;
static description = mandatory.description;
static date = mandatory.date;
static uri = mandatory.uri;
};
}
class SomePresentation extends Presentation({
date: new Date(),description: "",title: "",uri: ""
},{
width: 0,height: 0
}) {
constructor(props: any) {
super(props);
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener('resize',this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize',this.updateWindowDimensions);
}
updateWindowDimensions() {
this.setState({width: window.innerWidth,height: window.innerHeight});
}
render() {
return <div style={{width: this.state.width,height: this.state.height}}>
</div>;
}
}