Skip to content

Instantly share code, notes, and snippets.

@brieb brieb/App.tsx Secret
Last active Apr 30, 2018

Embed
What would you like to do?
Completion only for propTypes on function or class (see images in first comment)
import React from "react";
import ComponentA from "my-type-declarations/ComponentA";
import ComponentB from "my-type-declarations/ComponentB";
import ComponentC from "my-type-declarations/ComponentC";
import ComponentD from "my-type-declarations/ComponentD";
import ComponentE from "my-type-declarations/ComponentE";
import ComponentF from "my-type-declarations/ComponentF";
const App = () => {
return (
<div>
<ComponentA />
<ComponentB />
<ComponentC />
<ComponentD />
<ComponentE />
<ComponentF />
</div>
)
};
/**
* Note that this isn't actually valid TypeScript, but WebStorm picks up the propTypes anyways so it is useful for demonstration.
* my-type-declarations.d.ts(27,3): error TS1036: Statements are not allowed in ambient contexts.
* my-type-declarations.d.ts(27,14): error TS2339: Property 'propTypes' does not exist on type '(props: any) => ReactElement<any>'.
* my-type-declarations.d.ts(52,3): error TS1036: Statements are not allowed in ambient contexts.
* my-type-declarations.d.ts(65,3): error TS1036: Statements are not allowed in ambient contexts.
* my-type-declarations.d.ts(65,14): error TS2339: Property 'propTypes' does not exist on type 'typeof ComponentE'.
*/
declare module "my-type-declarations/ComponentA" {
import * as React from "react";
export interface ComponentAProps {
propA: string;
}
const ComponentA: React.ComponentType<ComponentAProps>;
export default ComponentA;
}
declare module "my-type-declarations/ComponentB" {
import * as React from "react";
import * as PropTypes from "prop-types";
function ComponentB(props: any): React.ReactElement<any> | null;
ComponentB.propTypes = {
propB: PropTypes.string.isRequired,
};
export default ComponentB;
}
declare module "my-type-declarations/ComponentC" {
import * as React from "react";
export interface ComponentCProps {
propC: string;
}
function ComponentC(props: ComponentCProps): React.ReactElement<any> | null;
export default ComponentC;
}
declare module "my-type-declarations/ComponentD" {
import * as React from "react";
import * as PropTypes from "prop-types";
const ComponentD: React.ComponentType<any>;
ComponentD.propTypes = {
propD: PropTypes.string.isRequired,
};
export default ComponentD;
}
declare module "my-type-declarations/ComponentE" {
import * as React from "react";
import * as PropTypes from "prop-types";
class ComponentE extends React.Component {}
ComponentE.propTypes = {
propE: PropTypes.string.isRequired,
};
export default ComponentE;
}
declare module "my-type-declarations/ComponentF" {
import * as React from "react";
export interface ComponentFProps {
propF: string;
}
class ComponentF extends React.Component<ComponentFProps> {}
export default ComponentF;
}
@brieb

This comment has been minimized.

Copy link
Owner Author

brieb commented Apr 30, 2018

screen shot 2018-04-30 at 11 16 28 am
screen shot 2018-04-30 at 11 16 33 am
screen shot 2018-04-30 at 11 16 38 am
screen shot 2018-04-30 at 11 16 42 am
screen shot 2018-04-30 at 11 16 50 am
screen shot 2018-04-30 at 11 16 55 am

@brieb

This comment has been minimized.

Copy link
Owner Author

brieb commented Apr 30, 2018

IntelliJ IDEA 2018.1.2 (Ultimate Edition)
Build #IU-181.4668.68, built on April 24, 2018
JRE: 1.8.0_152-release-1136-b29 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.13.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.