TypeScript面向对象-抽象类的使用方法

抽象类

有的时候,一个基类(父类)的一些方法无法确定具体的行为,而是由继承的子类去实现,看下面的例子:

现在前端比较流行组件化设计,比如 React

class MyComponent extends Component {

constructor(props) {
super(props);
this.state = {}
}

render() {
//...
}

}

根据上面代码,我们可以大致设计如下类结构

class Component<T1, T2> {

public state: T2;

constructor(
public props: T1
) {
// ...
}

render(): string {
// ...不知道做点啥才好,但是为了避免子类没有 render 方法而导致组件解析错误,父类就用一个默认的 render 去处理可能会出现的错误
}
}

interface IMyComponentProps {
title: string;
}
interface IMyComponentState {
val: number;
}
class MyComponent extends Component<IMyComponentProps, IMyComponentState> {

constructor(props: IMyComponentProps) {
super(props);

this.state = {
val: 1
}
}

render() {
this.props.title;
this.state.val;
return `<div>组件</div>`;
}

}

上面的代码虽然从功能上讲没什么太大问题,但是我们可以看到,父类的 render 有点尴尬,其实我们更应该从代码层面上去约束子类必须得有 render 方法,否则编码就不能通过

abstract 关键字

如果一个方法没有具体的实现方法,则可以通过 abstract 关键字进行修饰

abstract class Component<T1, T2> {

public state: T2;

constructor(
public props: T1
) {
}

public abstract render(): string;
}

使用抽象类有一个好处:

约定了所有继承子类的所必须实现的方法,使类的设计更加的规范

使用注意事项:

上一篇

TypeScript面向对象-类与接口的使用方法