Download as PDF, PPTX
![PropTypes.oneOf(["down", "up"]).isRequired; <Arrow direction="up" />](https://image.slidesharecdn.com/typesystemspropsdesign-181130110749/75/Type-Systems-Props-Design-Exploring-PropTypes-TypeScript-Flow-Reason-20-2048.jpg)
Uploaded byNikolaus Graf
Type Systems & Props Design - Exploring PropTypes, TypeScript, Flow & Reason
This document discusses different approaches to adding types to React components to validate props, including PropTypes, TypeScript, Flow, and Reason. It provides examples of defining component prop types using interfaces, unions, enums, and variants. It also discusses design patterns for conditional rendering based on prop types, such as using discriminated unions and disjoint unions to define draft and published post types. Finally, it covers render props and querying data from GraphQL using variants to handle loading, error, and data states.
Type Systems & Props Design - Exploring PropTypes, TypeScript, Flow & Reason
- 1. Type Systems & PropsDesign Exploring PropTypes, TypeScript, Flow & Reason
- 2. Let’s start withouttypes
- 3.
- 4.
- 5.
- 6. <Button primary secondarysmall large />
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 15. A or Bor C
- 16. easy to fix… is it though?
- 17. Type systems tothe rescue!
- 18.
- 19.
- 20.
- 23. export enum Direction{ Up = "up", Down = "down" } interface Props { direction: Direction; } import { Direction } from "./Arrow"; <Arrow direction={Direction.Left} />
- 24. interface Props { direction:"up" | "down"; } <Arrow direction="down" />
- 28. interface Props { direction:"up" | "down"; } <Arrow direction="down" />
- 31. <Arrow direction=Down /> typedirection = Down | Up;
- 33. A{x} or B{x,y} or C
- 34.
- 36. interface DraftPost { status:"draft"; content: String; } interface PublishedPost { status: "published"; content: String; publishedAt: Date; } type Props = DraftPost | PublishedPost;
- 37. export default functionPost(props: Props) { switch (props.status) { case "draft": return <div>{props.content}</div>; case "published": return <div>{props.content}{props.publishedAt}</div>; } }
- 39.
- 40. Draft{status, content} Post{status, content,publishedAt}
- 41. interface DraftPost { status:"draft"; content: String; } interface PublishedPost { status: "published"; content: String; publishedAt: Date; } type Post = DraftPost | PublishedPost; interface Props { post: Post; }
- 42. <Post post={{ status: "published", content: "Unicorns& Cats", publishedAt: new Date() }} />
- 44. type DraftPost ={ status: "draft", content: string }; type PublishedPost = { status: "published", content: string, publishedAt: Date }; type Props = DraftPost | PublishedPost;
- 45. export default functionPost(props: Props) { switch (props.status) { case "draft": return <div>{props.content}</div>; case "published": return <div>{props.content}{props.publishedAt}</div>; default: return null; } }
- 47. type DraftPost ={| status: "draft", content: string |}; type PublishedPost = {| status: "published", content: string, publishedAt: Date |}; type Props = DraftPost | PublishedPost;
- 49.
- 50. Draft{status, content} Post{status, content,publishedAt}
- 51. <Post post={{ status: "published", content: "Unicorns& Cats", publishedAt: new Date() }} />
- 53. type post = |Draft(string) | Published(string, int);
- 54. let component =ReasonReact.statelessComponent("Arrow"); let make = (~post: post, _children) => { ...component, render: _self => switch (post) { | Draft(content) => <div> content->s </div> | Published(content, timestamp) => <div> content->s timestamp->string_of_int->s </div> }, };
- 56.
- 57.
- 58.
- 59. <Query<ProfileData> query={getProfile}> {({ data,loading, error }) => { if (loading) return "Loading …"; if (error) return "Loading …"; if (!data) return null; return <div>{data.user.name}</div>; }} </Query>;
- 60. <Query<ProfileData> query={getProfile}> {({ result}) => { switch (result.type) { case "loading": return "Loading …"; case "error": return "Sorry, something went wrong"; case "data": return <div>{result.data.user.name}</div>; default: return assertNever(result); } }} </Query>;
- 62. <GetUserQuery variables=userQuery##variables> ...{ ({result}) => switch(result) { | Loading => <div> "Loading"->s </div> | Error(error) => <div> error##message->s </div> | Data(response) => <div> response##user##name->s </div> } } </GetUserQuery>;
- 64.
- 65. Usage & Complexity Typeyour Code
- 66.