文章目录

点击这里访问站长的博客

Typescript 中使用 React-Redux 的

Decorator Syntax

一个标准的 Decorator 格式:

function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    }
}


/* 这里将 Greeter 传给 classDecorator 生成了一个 class 并且赋给 Greeter */
@classDecorator
class Greeter {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
}

console.log(new Greeter("world"));
// 本身通过 Greeter 的 constructor 传进去的 'world' 会被赋值给 hello
// 但是被 decorator 修改之后就把 hello 改写成了 override

react-redux typescript 里面使用 @connect

connect 的原本用法,是将 mapDispatchToProps 以及 mapStateToProps 连接到特定 class 里面

下方的功能一样的:

class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}