Настройка компилятора TypeScript

119

23 января 2021, 20:00

Есть ли способ заставить Классы в TypeScript компилироваться в Фабричные Функции, где приватные свойства и методы не будут попадать в прототип? Где такое:

class SomeClass {
    private foo = 1;
    private func1() {
        return this.foo;
    }
    public func2() {
        return this.func1();
    }
}

Будет в итоге примерно таким:

var SomeClass = (function () {
    let foo = 1;
    function func1() {
        return foo;
    }
    SomeClass.prototype.func2 = function () {
        return func1();
    }
    return SomeClass;
}());

Answer 1

Напрямую TypeScript не предоставляет возможности скрыть что-то типизацией, так как она видна только транспилятору и не отображается в его выхлопе. Однако, вы можете скрыть что-либо, использовав Namespace.

namespace Testing {
    namespace Internal {
        export class Something extends React.Component<any, any> {
            constructor(props) {
                super(props);
            }
            public render = () => {
                return (
                    <>
                        <p>Something: {this.props.something}</p>
                        <button onClick={() => this.props.dispatchSomething("new something")}>Update something</button>
                    </>
                );
            }
        }
    }
    function mapStateToProps(state: State) {
        return {
            something: state.something,
        };
    }
    function mapDispatchToProps(dispatch: Redux.Dispatch) {
        return {
            dispatchSomething: (something) => dispatch({type: ActionType.SomeAction, something: something}),
        };
    }
    export const Something = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(Internal.Something);
}

Применив эту синтаксическую конструкцию можно использовать ReactRedux ограничившись сборщиком бандлов, встроенным в сам TypeScript. В результате транспиляции этого кода получится следующая конструкция с замыканием:

var Testing;
(function (Testing) {
    var Internal;
    (function (Internal) {
        var Something = (function (_super) {
            __extends(Something, _super);
            function Something(props) {
                var _this = _super.call(this, props) || this;
                _this.render = function () {
                    return (React.createElement(React.Fragment, null,
                        React.createElement("p", null,
                            "Something: ",
                            _this.props.something),
                        React.createElement("button", { onClick: function () { return _this.props.dispatchSomething("new something"); } }, "Update something")));
                };
                return _this;
            }
            return Something;
        }(React.Component));
        Internal.Something = Something;
    })(Internal || (Internal = {}));
    function mapStateToProps(state) {
        return {
            something: state.something
        };
    }
    function mapDispatchToProps(dispatch) {
        return {
            dispatchSomething: function (something) { return dispatch({ type: "some-action", something: something }); }
        };
    }
    Testing.Something = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(Internal.Something);
})(Testing || (Testing = {}));