{"id":3926,"date":"2026-10-18T18:01:05","date_gmt":"2026-10-18T11:01:05","guid":{"rendered":"https:\/\/sumberlaba.com\/index.php\/2026\/10\/18\/how-to-use-typescript-with-react-a-practical-tutorial\/"},"modified":"2026-10-18T18:01:06","modified_gmt":"2026-10-18T11:01:06","slug":"how-to-use-typescript-with-react-a-practical-tutorial","status":"publish","type":"post","link":"https:\/\/sumberlaba.com\/index.php\/2026\/10\/18\/how-to-use-typescript-with-react-a-practical-tutorial\/","title":{"rendered":"How to Use TypeScript with React: A Practical Tutorial"},"content":{"rendered":"<h1>How to Use TypeScript with React: A Practical Tutorial<\/h1>\n<p>TypeScript brings static typing to React, catching bad props, missing state, and null errors before your code ever runs in a browser. If you already know React, adding types takes minutes and pays off immediately.<\/p>\n<p>This tutorial covers the setup and the four patterns you will use in almost every component.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/sumberlaba.com\/wp-content\/uploads\/2026\/10\/article-1792321261893.jpg\" alt=\"Article illustration\" style=\"display:block;margin:20px auto;max-width:100%;height:auto;border-radius:8px;\" \/><\/p>\n<h2>1. Create a Typed Project<\/h2>\n<p>Scaffold with a template that already wires up the compiler:<\/p>\n<ul>\n<li><code>npm create vite@latest my-app -- --template react-ts<\/code><\/li>\n<li>Or run <code>npx create-next-app@latest --ts<\/code><\/li>\n<\/ul>\n<p>Rename any existing files from <code>.jsx<\/code> to <code>.tsx<\/code>, and set <code>\"strict\": true<\/code> in <code>tsconfig.json<\/code> to get full type checking.<\/p>\n<h2>2. Type Your Props<\/h2>\n<p>Give every component an interface describing what it accepts:<\/p>\n<p><code>interface ButtonProps { label: string; onClick: () => void; disabled?: boolean; }<\/code><\/p>\n<p>The <code>?<\/code> marks a prop as optional. For wrapper components, add <code>children: React.ReactNode<\/code>. TypeScript now flags any missing or mistyped prop at the call site.<\/p>\n<h2>3. Type Hooks and Events<\/h2>\n<ul>\n<li><code>useState&lt;string&gt;(\"\")<\/code> \u2014 set the state type explicitly when inference is not enough.<\/li>\n<li><code>useRef&lt;HTMLInputElement&gt;(null)<\/code> \u2014 get typed access to DOM nodes.<\/li>\n<li><code>(e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; ...<\/code> \u2014 type event handlers accurately.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Start with typed props and state, then move on to generics and utility types like <code>Partial<\/code> and <code>Pick<\/code>. Your editor&#8217;s autocomplete will guide the rest.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to Use TypeScript with React: A Practical Tutorial TypeScript brings static typing to React, catching bad props, missing state, and null errors before your code ever runs in a browser. If you already know React, adding types takes minutes and pays off immediately. This tutorial covers the setup and the four patterns you will &hellip; <\/p>\n","protected":false},"author":2716,"featured_media":3925,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-category"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/3926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/users\/2716"}],"replies":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/comments?post=3926"}],"version-history":[{"count":1,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/3926\/revisions"}],"predecessor-version":[{"id":3927,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/3926\/revisions\/3927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/media\/3925"}],"wp:attachment":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/media?parent=3926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/categories?post=3926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/tags?post=3926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}