70dfd296.6d01bc7d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{134:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return y}));var r=n(0),o=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),u=function(e){var t=o.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},l=function(e){var t=u(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},b=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,a=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),l=u(n),b=r,y=l["".concat(a,".").concat(b)]||l[b]||f[b]||i;return n?o.a.createElement(y,c(c({ref:t},s),{},{components:n})):o.a.createElement(y,c({ref:t},s))}));function y(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,a=new Array(i);a[0]=b;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,a[1]=c;for(var s=2;s<i;s++)a[s]=n[s];return o.a.createElement.apply(null,a)}return o.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},164:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/pros-and-cons-of-using-typescript-with-react-dd991cdbc9fd8db13418959b8de560e9.png"},93:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return u}));var r=n(3),o=n(7),i=(n(0),n(134)),a={slug:"pros-and-cons-of-using-typescript-with-react",title:"Pros and Cons of Using TypeScript with React",author:"Bunlong",author_title:"React Patterns Team",author_url:"https://github.com/Bunlong",author_image_url:"https://avatars1.githubusercontent.com/u/37023003?s=400&u=0049c6773040efb265cdf622076305f8b47facec&v=4",tags:["typescript"],image:"/img/pros-and-cons-of-using-typescript-with-react.png"},c={permalink:"/blog/pros-and-cons-of-using-typescript-with-react",source:"@site/blog/2020-12-12-pros-and-cons-of-using-typescript-with-react.md",description:"Pros and Cons of Using TypeScript with React",date:"2020-12-12T00:00:00.000Z",tags:[{label:"typescript",permalink:"/blog/tags/typescript"}],title:"Pros and Cons of Using TypeScript with React",readingTime:.835,truncated:!0,prevItem:{title:"How to use async function in useEffect hook?",permalink:"/blog/how-to-use-async-function-in-useEffect-hook"},nextItem:{title:"Optimize Your Promise by Using Async/Await in React",permalink:"/blog/optimize-your-promise-by-using-async-await-in-react"}},p=[{value:"Pros",id:"pros",children:[]},{value:"Cons",id:"cons",children:[]}],s={rightToc:p};function u(e){var t=e.components,a=Object(o.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},s,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,Object(i.b)("img",{alt:"Pros and Cons of Using TypeScript with React",src:n(164).default,title:"Pros and Cons of Using TypeScript with React"})),Object(i.b)("h2",{id:"pros"},"Pros"),Object(i.b)("p",null,"We have a positive experience with TypeScript. Let we give you an example of how TypeScript is very beneficial in a big project."),Object(i.b)("p",null,"For example you have a function called ",Object(i.b)("inlineCode",{parentName:"p"},"function example(param1, param2)"),"."),Object(i.b)("p",null,Object(i.b)("inlineCode",{parentName:"p"},"param1")," should be a string and ",Object(i.b)("inlineCode",{parentName:"p"},"param2")," should be an object. When you write this function in JS, you can't define the type and shape of your params. You can pass the wrong variables to this function."),Object(i.b)("p",null,"But with TypeScript, you can define the type and shape of the object. So you can't pass the wrong variable, TypeScript will highlight the error before you recognize what is wrong."),Object(i.b)("h2",{id:"cons"},"Cons"),Object(i.b)("p",null,"You have to take time to write the interface, it's time-consuming but worth it."),Object(i.b)("p",null,"Some libraries don't fully support TypeScript even a popular library like styled-components still has trouble with TypeScript. You find yourself have to put comment ",Object(i.b)("inlineCode",{parentName:"p"},"// @ts-ignore")," in components made by styled-components."))}u.isMDXComponent=!0}}]);