mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 10:56:53 +00:00
[react-side-effect] Removed Any Types (#27132)
* Improved react-side-effect Typings Removed all `any` typings. Added tests which test usage. * Made Lint Less Permissive It doesn't need to be so permissive. * Fixed Whitespace * Added Typings for Server Stuff Used a more robust way than suggested in review. Added tests too. * Fixed Server Types `peek` can return either a `TServerState` or `TState` when `withSideEffect` is provided `mapStateOnServer` (based on runtime). `rewind` always returns `TServerState` when `mapStateOnServer` is provided, otherwise it returns `TState`.
This commit is contained in:
Martin Charles
Andy
parent
c931d79d06
commit
03212af7da
31
types/react-side-effect/index.d.ts
vendored
31
types/react-side-effect/index.d.ts
vendored
@ -1,23 +1,34 @@
|
||||
// Type definitions for react-side-effect v1.0.2
|
||||
// Type definitions for react-side-effect 1.1
|
||||
// Project: https://github.com/gaearon/react-side-effect
|
||||
// Definitions by: Remo H. Jansen <https://github.com/remojansen>
|
||||
// Martin Charles <https://github.com/0xcaff>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.6
|
||||
|
||||
import * as React from "react";
|
||||
|
||||
declare function withSideEffect(
|
||||
reducePropsToState: (propsList: any[]) => any,
|
||||
handleStateChangeOnClient: (state: any) => any,
|
||||
mapStateOnServer?: (state: any) => any
|
||||
): ClassDecorator;
|
||||
interface WithSideEffect {
|
||||
<TProp, TState>(
|
||||
reducePropsToState: (propsList: TProp[]) => TState,
|
||||
handleStateChangeOnClient: (state: TState) => void
|
||||
): ClassDecorator<TProp, TState, TState>;
|
||||
|
||||
declare class ElementClass extends React.Component<any> {}
|
||||
|
||||
interface ClassDecorator {
|
||||
<T extends (typeof ElementClass)>(component:T): T;
|
||||
<TProp, TState, TServerState>(
|
||||
reducePropsToState: (propsList: TProp[]) => TState,
|
||||
handleStateChangeOnClient: (state: TState) => void,
|
||||
mapStateOnServer: (state: TState) => TServerState
|
||||
): ClassDecorator<TProp, TState | TServerState, TServerState>;
|
||||
}
|
||||
|
||||
declare const withSideEffect: WithSideEffect;
|
||||
|
||||
type ClassDecorator<TProp, TPeek, TRewind> = (
|
||||
component: React.ComponentType<TProp>
|
||||
) => React.ComponentType<TProp> & {
|
||||
peek: () => TPeek;
|
||||
rewind: () => TRewind;
|
||||
};
|
||||
|
||||
declare namespace withSideEffect {} // https://github.com/Microsoft/TypeScript/issues/5073
|
||||
|
||||
export = withSideEffect;
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import * as React from "react";
|
||||
import withSideEffect = require("react-side-effect");
|
||||
|
||||
interface DocumentTitleProps {
|
||||
title: string
|
||||
}
|
||||
|
||||
class DocumentTitle extends React.Component<DocumentTitleProps> {
|
||||
public render() {
|
||||
if (this.props.children) {
|
||||
return React.Children.only(this.props.children);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reducePropsToState(propsList: any[]) {
|
||||
var innermostProps = propsList[propsList.length - 1];
|
||||
if (innermostProps) {
|
||||
return innermostProps.title;
|
||||
}
|
||||
}
|
||||
|
||||
function handleStateChangeOnClient(title: string) {
|
||||
document.title = title || "";
|
||||
}
|
||||
|
||||
let DocumentTitleWithSideEffects = withSideEffect(
|
||||
reducePropsToState,
|
||||
handleStateChangeOnClient
|
||||
)(DocumentTitle);
|
||||
|
||||
export default DocumentTitleWithSideEffects;
|
||||
59
types/react-side-effect/react-side-effect-tests.tsx
Normal file
59
types/react-side-effect/react-side-effect-tests.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import * as React from "react";
|
||||
import withSideEffect = require("react-side-effect");
|
||||
|
||||
interface DocumentTitleProps {
|
||||
title: string;
|
||||
}
|
||||
|
||||
type State = string | undefined;
|
||||
|
||||
interface ServerState {
|
||||
innerState: State;
|
||||
}
|
||||
|
||||
const DocumentTitle = () => null;
|
||||
|
||||
function reducePropsToState(propsList: DocumentTitleProps[]): State {
|
||||
const innermostProps = propsList[propsList.length - 1];
|
||||
if (innermostProps) {
|
||||
return innermostProps.title;
|
||||
}
|
||||
}
|
||||
|
||||
function handleStateChangeOnClient(title: State) {
|
||||
document.title = title || "";
|
||||
}
|
||||
|
||||
const mapStateOnServer = (state: State): ServerState => ({ innerState: state });
|
||||
|
||||
const DocumentTitleWithServerMapState = withSideEffect(
|
||||
reducePropsToState,
|
||||
handleStateChangeOnClient,
|
||||
mapStateOnServer
|
||||
)(DocumentTitle);
|
||||
|
||||
const testWithServerMapState = () => {
|
||||
const testComponent = () => (
|
||||
<DocumentTitleWithServerMapState title="Title" />
|
||||
);
|
||||
const peekedState:
|
||||
| ServerState
|
||||
| State = DocumentTitleWithServerMapState.peek();
|
||||
const rewindedState: ServerState = DocumentTitleWithServerMapState.rewind();
|
||||
};
|
||||
|
||||
const DocumentTitleNotServer = withSideEffect(
|
||||
reducePropsToState,
|
||||
handleStateChangeOnClient
|
||||
)(DocumentTitle);
|
||||
|
||||
const testWithoutMapState = () => {
|
||||
const testComponent = () => <DocumentTitleNotServer title="asdf" />;
|
||||
const peekedState: State = DocumentTitleNotServer.peek();
|
||||
const rewindedState: State = DocumentTitleNotServer.rewind();
|
||||
};
|
||||
|
||||
const testInvalidProp = () => (
|
||||
// $ExpectError
|
||||
<DocumentTitleServer notAValidProp="this should fail" />
|
||||
);
|
||||
@ -5,6 +5,7 @@
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"jsx": "react",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
@ -19,6 +20,6 @@
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"react-side-effect-tests.ts"
|
||||
"react-side-effect-tests.tsx"
|
||||
]
|
||||
}
|
||||
@ -1,79 +1,3 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"adjacent-overload-signatures": false,
|
||||
"array-type": false,
|
||||
"arrow-return-shorthand": false,
|
||||
"ban-types": false,
|
||||
"callable-types": false,
|
||||
"comment-format": false,
|
||||
"dt-header": false,
|
||||
"eofline": false,
|
||||
"export-just-namespace": false,
|
||||
"import-spacing": false,
|
||||
"interface-name": false,
|
||||
"interface-over-type-literal": false,
|
||||
"jsdoc-format": false,
|
||||
"max-line-length": false,
|
||||
"member-access": false,
|
||||
"new-parens": false,
|
||||
"no-any-union": false,
|
||||
"no-boolean-literal-compare": false,
|
||||
"no-conditional-assignment": false,
|
||||
"no-consecutive-blank-lines": false,
|
||||
"no-construct": false,
|
||||
"no-declare-current-package": false,
|
||||
"no-duplicate-imports": false,
|
||||
"no-duplicate-variable": false,
|
||||
"no-empty-interface": false,
|
||||
"no-for-in-array": false,
|
||||
"no-inferrable-types": false,
|
||||
"no-internal-module": false,
|
||||
"no-irregular-whitespace": false,
|
||||
"no-mergeable-namespace": false,
|
||||
"no-misused-new": false,
|
||||
"no-namespace": false,
|
||||
"no-object-literal-type-assertion": false,
|
||||
"no-padding": false,
|
||||
"no-redundant-jsdoc": false,
|
||||
"no-redundant-jsdoc-2": false,
|
||||
"no-redundant-undefined": false,
|
||||
"no-reference-import": false,
|
||||
"no-relative-import-in-test": false,
|
||||
"no-self-import": false,
|
||||
"no-single-declare-module": false,
|
||||
"no-string-throw": false,
|
||||
"no-unnecessary-callback-wrapper": false,
|
||||
"no-unnecessary-class": false,
|
||||
"no-unnecessary-generics": false,
|
||||
"no-unnecessary-qualifier": false,
|
||||
"no-unnecessary-type-assertion": false,
|
||||
"no-useless-files": false,
|
||||
"no-var-keyword": false,
|
||||
"no-var-requires": false,
|
||||
"no-void-expression": false,
|
||||
"no-trailing-whitespace": false,
|
||||
"object-literal-key-quotes": false,
|
||||
"object-literal-shorthand": false,
|
||||
"one-line": false,
|
||||
"one-variable-per-declaration": false,
|
||||
"only-arrow-functions": false,
|
||||
"prefer-conditional-expression": false,
|
||||
"prefer-const": false,
|
||||
"prefer-declare-function": false,
|
||||
"prefer-for-of": false,
|
||||
"prefer-method-signature": false,
|
||||
"prefer-template": false,
|
||||
"radix": false,
|
||||
"semicolon": false,
|
||||
"space-before-function-paren": false,
|
||||
"space-within-parens": false,
|
||||
"strict-export-declare-modifiers": false,
|
||||
"trim-file": false,
|
||||
"triple-equals": false,
|
||||
"typedef-whitespace": false,
|
||||
"unified-signatures": false,
|
||||
"void-return": false,
|
||||
"whitespace": false
|
||||
}
|
||||
"extends": "dtslint/dt.json"
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user