From 1a9dbe4972d1dd0346da6a04d4ca17da91c656d9 Mon Sep 17 00:00:00 2001 From: Islam Attrash Date: Wed, 6 Jun 2018 09:42:36 +0300 Subject: [PATCH 1/3] Related to [propTypes with TypeScript #17] --- README.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/README.md b/README.md index b08ddb73..4680a924 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ * [Stateless Functional Components](#stateless-functional-components) * [Stateful Class-based Components](#stateful-class-based-components) * [Typing DefaultProps](#typing-defaultprops) + * [propTypes in TypeScript](#proptypes-in-typescript) * [Extracting Prop Types](#extracting-prop-types) * [Basic Prop Types Examples](#basic-prop-types-examples) * [Useful React Type Examples](#useful-react-type-examples) @@ -240,6 +241,31 @@ The problem with this approach that if we need to add another prop in the future [Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new). + +## propTypes in TypeScript + +Since TypeScript is supporting and embracing Types in compile-time some may think that there's no need for injecting the propTypes +to do the run-time type checking. While that's true in some cases (like developing an app that is totally being used by TypeScript developers), +injecting the propType is still recommened and relevant in the libraries that is willing to be used +by JavaScript developers because they won't gain the benefits of the type-system and will likely break things such as: passing props with +not suitable types. + +```ts +interface IMyComponentProps { + autoHeight: boolean; + secondProp: number; +} + +export class MyComponent extends React.Component { + static propTypes = { + autoHeight: PropTypes.bool, + secondProp: PropTypes.number.isRequired, + }; +} +``` + +[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new). + ## Extracting Prop Types Instead of defining prop types *inline*, you can declare them separately (useful for reusability or code organization): From 287505bec9af0e22e29993347163e5e80236406a Mon Sep 17 00:00:00 2001 From: tsiq-swyx <35976578+tsiq-swyx@users.noreply.github.com> Date: Wed, 6 Jun 2018 18:16:22 -0400 Subject: [PATCH 2/3] make it much shorter make it much shorter --- README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/README.md b/README.md index 4680a924..f44cd9a6 100644 --- a/README.md +++ b/README.md @@ -244,11 +244,7 @@ The problem with this approach that if we need to add another prop in the future ## propTypes in TypeScript -Since TypeScript is supporting and embracing Types in compile-time some may think that there's no need for injecting the propTypes -to do the run-time type checking. While that's true in some cases (like developing an app that is totally being used by TypeScript developers), -injecting the propType is still recommened and relevant in the libraries that is willing to be used -by JavaScript developers because they won't gain the benefits of the type-system and will likely break things such as: passing props with -not suitable types. +`propTypes` may be unnecessary with TypeScript, especially when building React + Typescript **apps**, but they are still relevant when writing **libraries** which may be used by developers working in Javascript. ```ts interface IMyComponentProps { From 21ccd5194553b1b577254092bf5a15937c61278c Mon Sep 17 00:00:00 2001 From: tsiq-swyx <35976578+tsiq-swyx@users.noreply.github.com> Date: Wed, 6 Jun 2018 18:17:01 -0400 Subject: [PATCH 3/3] be -> seem --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f44cd9a6..f634aef8 100644 --- a/README.md +++ b/README.md @@ -244,7 +244,7 @@ The problem with this approach that if we need to add another prop in the future ## propTypes in TypeScript -`propTypes` may be unnecessary with TypeScript, especially when building React + Typescript **apps**, but they are still relevant when writing **libraries** which may be used by developers working in Javascript. +`propTypes` may seem unnecessary with TypeScript, especially when building React + Typescript **apps**, but they are still relevant when writing **libraries** which may be used by developers working in Javascript. ```ts interface IMyComponentProps {