mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
51 lines
84 KiB
HTML
51 lines
84 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
|
|
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
|
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
|
|
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
|
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
|
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
|
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Using TypeScript · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Using TypeScript · React Native"><meta data-react-helmet="true" name="description" content="TypeScript is a language which extends JavaScript by adding type definitions, much like Flow. While React Native is built in Flow, it supports both TypeScript and Flow by default."><meta data-react-helmet="true" property="og:description" content="TypeScript is a language which extends JavaScript by adding type definitions, much like Flow. While React Native is built in Flow, it supports both TypeScript and Flow by default."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/typescript"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/typescript"><link rel="stylesheet" href="/styles.fccefeba.css">
|
|
<link rel="stylesheet" href="/main.b5a87951.css">
|
|
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
|
<link rel="preload" href="/runtime~main.34075733.js" as="script">
|
|
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
|
<link rel="preload" href="/1.844dff91.js" as="script">
|
|
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
|
<link rel="preload" href="/1f391b9e.3f65ce9d.js" as="script">
|
|
<link rel="preload" href="/941.a6bd671c.js" as="script">
|
|
<link rel="preload" href="/ee5b3385.8c48d415.js" as="script">
|
|
<link rel="preload" href="/17896441.8ef96896.js" as="script">
|
|
<link rel="preload" href="/516ae6d6.60aa2d88.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
|
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/typescript">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/typescript">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/typescript">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/typescript">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/typescript">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/typescript">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/typescript">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/typescript">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/typescript">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/typescript">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2UBv"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/more-resources">More Resources</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Workflow</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/testing-overview">Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/libraries">Using Libraries</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/upgrading">Upgrading to new React Native versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/colors">Color Reference</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Interaction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/gesture-responder-system">Gesture Responder System</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Inclusion</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/accessibility">Accessibility</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Performance</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/profiling">Profiling</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/hermes">Using Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Connectivity</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/security">Security</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-intro">Native Modules Intro</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-android">Android Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-ios">iOS Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-setup">Native Modules NPM Package Setup</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-android">Android Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-ios">iOS Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/direct-manipulation">Direct Manipulation</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/signed-apk-android">Publishing to Google Play Store</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/removing-default-permissions">Removing Default Permissions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/app-extensions">App Extensions</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><div class="row"><div class="col docItemCol_2AGf"><div class="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">Using TypeScript</h1></header><div class="markdown"><p><a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">TypeScript</a> is a language which extends JavaScript by adding type definitions, much like <a href="https://flow.org" target="_blank" rel="noopener noreferrer">Flow</a>. While React Native is built in Flow, it supports both TypeScript <em>and</em> Flow by default.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="getting-started-with-typescript"></a>Getting Started with TypeScript<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-started-with-typescript" title="Direct link to heading">#</a></h2><p>If you're starting a new project, there are a few different ways to get started.</p><p>You can use the <a href="https://github.com/react-native-community/react-native-template-typescript" target="_blank" rel="noopener noreferrer">TypeScript template</a>:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">npx react-native init MyApp --template react-native-template-typescript</span></div></div></div></div></div><blockquote><p><strong>Note:</strong> If the above command is failing, you may have old version of <code>react-native</code> or <code>react-native-cli</code> installed globally on your system. To fix the issue try uninstalling the CLI:</p><ul><li><code>npm uninstall -g react-native-cli</code> or <code>yarn global remove react-native-cli</code></li></ul><p>and then run the <code>npx</code> command again.</p></blockquote><p>You can use <a href="https://expo.io" target="_blank" rel="noopener noreferrer">Expo</a> which has two TypeScript templates:</p><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">npm</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">Yarn</li></ul><div role="tabpanel" class="margin-vert--md"><div><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">npm</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">install</span><span class="token plain"> -g expo-cli</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">expo init MyTSProject</span></div></div></div></div></div></div></div></div><p>Or you could use <a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer">Ignite</a>, which also has a TypeScript template:</p><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">npm</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">Yarn</li></ul><div role="tabpanel" class="margin-vert--md"><div><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">npm</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">install</span><span class="token plain"> -g ignite-cli</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">ignite new MyTSProject</span></div></div></div></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="adding-typescript-to-an-existing-project"></a>Adding TypeScript to an Existing Project<a aria-hidden="true" tabindex="-1" class="hash-link" href="#adding-typescript-to-an-existing-project" title="Direct link to heading">#</a></h2><ol><li>Add TypeScript and the types for React Native and Jest to your project.</li></ol><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">npm</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">Yarn</li></ul><div role="tabpanel" class="margin-vert--md"><div><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">npm</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">install</span><span class="token plain"> -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer</span></div></div></div></div></div></div></div></div><ol start="2"><li>Add a TypeScript config file. Create a <code>tsconfig.json</code> in the root of your project:</li></ol><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-json codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"compilerOptions"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"allowJs"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"allowSyntheticDefaultImports"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"esModuleInterop"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"isolatedModules"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"jsx"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"react"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"lib"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token string" style="color:#8dc891">"es6"</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"moduleResolution"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"node"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"noEmit"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"strict"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"target"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"esnext"</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token property" style="color:#2aa198">"exclude"</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"node_modules"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"babel.config.js"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"metro.config.js"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"jest.config.js"</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><ol start="3"><li>Create a <code>jest.config.js</code> file to configure Jest to use TypeScript</li></ol><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-js codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> preset</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> moduleFileExtensions</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token string" style="color:#8dc891">'ts'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'tsx'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'js'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'jsx'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'json'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'node'</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><ol start="4"><li>Rename a JavaScript file to be <code>*.tsx</code></li></ol><blockquote><p>You should leave the <code>./index.js</code> entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.</p></blockquote><ol start="5"><li>Run <code>yarn tsc</code> to type-check your new TypeScript files.</li></ol><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="how-typescript-and-react-native-works"></a>How TypeScript and React Native works<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-typescript-and-react-native-works" title="Direct link to heading">#</a></h2><p>Out of the box, transforming your files to JavaScript works via the same <a href="/docs/javascript-environment#javascript-syntax-transformers">Babel infrastructure</a> as a non-TypeScript React Native project. We recommend that you use the TypeScript compiler only for type checking. If you have existing TypeScript code being ported to React Native, there are <a href="https://babeljs.io/docs/en/next/babel-plugin-transform-typescript" target="_blank" rel="noopener noreferrer">one or two caveats</a> to using Babel instead of TypeScript.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="what-does-react-native--typescript-look-like"></a>What does React Native + TypeScript look like<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-does-react-native--typescript-look-like" title="Direct link to heading">#</a></h2><p>You can provide an interface for a React Component's <a href="/docs/props">Props</a> and <a href="/docs/state">State</a> via <code>React.Component<Props, State></code> which will provide type-checking and editor auto-completing when working with that component in JSX.</p><div class="mdxCodeBlock_xYIz"><div style="color:#FFFFFF;background:#282C34" class="codeBlockTitle_1Hm_">components/Hello.tsx</div><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4 undefined">Copy</button><div class="prism-code language-tsx codeBlock_1AP7 codeBlockWithTitle_1ZjX"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> </span><span class="token maybe-class-name">Button</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token maybe-class-name">StyleSheet</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token maybe-class-name">Text</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token maybe-class-name">View</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">interface</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Props</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token builtin" style="color:#2aa198">string</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> enthusiasmLevel</span><span class="token operator" style="color:#fc929e">?</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token builtin" style="color:#2aa198">number</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token maybe-class-name">Hello</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#657b83">.</span><span class="token constant" style="color:#5a9bcf">FC</span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Props</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">props</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain">enthusiasmLevel</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> setEnthusiasmLevel</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">useState</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> props</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">enthusiasmLevel</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">onIncrement</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">setEnthusiasmLevel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">enthusiasmLevel </span><span class="token operator" style="color:#fc929e">||</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">onDecrement</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">setEnthusiasmLevel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">enthusiasmLevel </span><span class="token operator" style="color:#fc929e">||</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">-</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">getExclamationMarks</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">numChars</span><span class="token parameter punctuation" style="color:#657b83">:</span><span class="token parameter"> number</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#79b6f2">Array</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">numChars </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">join</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'!'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">root</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">greeting</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token maybe-class-name">Hello</span><span class="token punctuation" style="color:#657b83">{</span><span class="token string" style="color:#8dc891">' '</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">props</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">name </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">getExclamationMarks</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">enthusiasmLevel </span><span class="token operator" style="color:#fc929e">||</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">buttons</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">button</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Button</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">title</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">-</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">onDecrement</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessibilityLabel</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">decrement</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">color</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">red</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">button</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Button</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">title</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">+</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">onIncrement</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessibilityLabel</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">increment</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">color</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">blue</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> styles </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token maybe-class-name">StyleSheet</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">create</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> root</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> alignItems</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'center'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> alignSelf</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'center'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> buttons</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> flexDirection</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'row'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> minHeight</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">70</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> alignItems</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'stretch'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> alignSelf</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'center'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> borderWidth</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">5</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> button</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> flex</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> paddingVertical</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">0</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> greeting</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> color</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'#999'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> fontWeight</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'bold'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> </span><span class="token maybe-class-name">Hello</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>You can explore the syntax more in the <a href="https://www.typescriptlang.org/play/?strictNullChecks=false&esModuleInterop=true&jsx=3#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKFEljgG8AhAVxhggDsAaOAZRgCeAGyS8AFkiQweAFSQAPaXABqwJAHcAvnGy4CRdDAC0HFDGAA3JGSpUFteMA4wkUTOiRwACjjABnBio4YLhTECQALjg-GCgnAHMKShC4JGcxZj9gFD8QABkkKyEAfiiOZhAAI1ckzVtKNE4YuAAJJCEhCCjkQwA6ADEAYQAeHwh-AD44AF44AAowXz8AShmp+iCQxo5mgG00mAysnPzC9p4-KQBRdMzs3IKigF0ZxGIYXszRGDMkBaXegcjvdTkVlklNsFts1OABJDhoIjhZyvOaraZTS4wG6HO4nR7tOZzIF4h5nIRwAA+lLgAAZVgBqOAARnBkLg0PgnAAIkhEUhkfBZmi1tFrrdjmSikSSZLQe0qTT6XAjCy2ZR2Zy4PFrvI0EIUCAzMBOABZFBQADWAWF5RAgzEFr8ZQq1Sg6KmAEEoFAUAI5naHU64EzWb0AFYQJxzfAAQnw6pSRBgzCgHHm7JSw1UGmighE03oMWESD8vRwEBgmgmmZCwzkijzJcLxZEZfiRCkCWrtZSwTaHQg9HwBDqyT7E-oi3GZbCniZOuxeoNRvMZot1uJEpBBIp1LpyzHE+CwwA9A2YDWNeOJ9m1OomwWi-nS71Kqx2Dsezfjyecw-WyQFsXzLd82E4b9fyzFhwI4XsoPMGACwAIiMZD4N-TgfFLPxCx5PkkQOI8oIndA0Bw4BKmAIRgEEPIUGqIRpmQgATAiBQOdCfxIqEIE6KBmKIFiuJ4uBTyvUSz3-K8MLrf9HyA58S1Aj8IIknjhhgz9ZInRCUIZETRJCLCiD8XD6DhBFCOcYijLgMiKKomi6IY9pmKcflBUMuzGn45jKiEZgkG8qDxJ0uApPvdTb1PaT4MijRorgRMQjHMcqFPU8FL8KgtUAm0+BfcRJA+flfjmDYfwrGAokq38UBo+IOFhFwQGdAhyOcVx8C4eCGuAJreHaTAonwTqXCgHr2U0XqfzAz92rqidMBEeRuWAIgMBNDhRpwdQpu4kIQCcNoBrEGq4AAdlpWb6sa5rWva-AYmTNAxAOu6Bo4IahBGjqDm627j0qaA2KgAB1YAWMOKIAFYgeCGb2XmzhavglaFCiZkEb7MAUBYliEmUVxzDQBqohu6acY7EqEjRw7eP40aAGIAE52Y+49ME4GBwaQM6LvwEGhBYznEdmzRwSAA" target="_blank" rel="noopener noreferrer">TypeScript playground</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="where-to-find-useful-advice"></a>Where to Find Useful Advice<a aria-hidden="true" tabindex="-1" class="hash-link" href="#where-to-find-useful-advice" title="Direct link to heading">#</a></h2><ul><li><a href="https://www.typescriptlang.org/docs/handbook/intro.html" target="_blank" rel="noopener noreferrer">TypeScript Handbook</a></li><li><a href="https://reactjs.org/docs/static-type-checking.html#typescript" target="_blank" rel="noopener noreferrer">React's documentation on TypeScript</a></li><li><a href="https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#reacttypescript-cheatsheets" target="_blank" rel="noopener noreferrer">React + TypeScript Cheatsheets</a> has a good overview on how to use React with TypeScript</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="using-custom-path-aliases-with-typescript"></a>Using Custom Path Aliases with TypeScript<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-custom-path-aliases-with-typescript" title="Direct link to heading">#</a></h2><p>To use custom path aliases with TypeScript, you need to set the path aliases to work from both Babel and TypeScript. Here's how:</p><ol><li>Edit your <code>tsconfig.json</code> to have your <a href="https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping" target="_blank" rel="noopener noreferrer">custom path mappings</a>. Set anything in the root of <code>src</code> to be available with no preceding path reference, and allow any test file to be accessed by using <code>tests/File.tsx</code>:</li></ol><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-diff codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token unchanged"> "target": "esnext",</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token unchanged"></span><span class="token inserted-sign inserted" style="color:#859900">+ "baseUrl": ".",</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ "paths": {</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ "*": ["src/*"],</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ "tests": ["tests/*"],</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ "@components/*": ["src/components/*"],</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ },</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900"></span><span class="token unchanged"> }</span></div></div></div></div></div><ol start="2"><li>Add <a href="https://github.com/tleunen/babel-plugin-module-resolver" target="_blank" rel="noopener noreferrer"><code>babel-plugin-module-resolver</code></a> as a development package to your project:</li></ol><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">npm</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">Yarn</li></ul><div role="tabpanel" class="margin-vert--md"><div><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">npm</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">install</span><span class="token plain"> --save-dev babel-plugin-module-resolver</span></div></div></div></div></div></div></div></div><ol start="3"><li>Finally, configure your <code>babel.config.js</code> (note that the syntax for your <code>babel.config.js</code> is different from your <code>tsconfig.json</code>):</li></ol><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-diff codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">{</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token unchanged"> plugins: [</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token unchanged"></span><span class="token inserted-sign inserted" style="color:#859900">+ [</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ 'module-resolver',</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ {</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ root: ['./src'],</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ alias: {</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ "tests": ["./tests/"],</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ "@components": "./src/components",</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ }</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ }</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900">+ ]</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token inserted-sign inserted" style="color:#859900"></span><span class="token unchanged"> ]</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token unchanged"></span><span class="token plain">}</span></div></div></div></div></div></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.63/typescript.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-11-21T11:41:20.000Z" class="docLastUpdatedAt_1gIo">11/21/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/libraries"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Using Libraries</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/upgrading"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Upgrading to new React Native versions »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#getting-started-with-typescript" class="table-of-contents__link">Getting Started with TypeScript</a></li><li><a href="#adding-typescript-to-an-existing-project" class="table-of-contents__link">Adding TypeScript to an Existing Project</a></li><li><a href="#how-typescript-and-react-native-works" class="table-of-contents__link">How TypeScript and React Native works</a></li><li><a href="#what-does-react-native--typescript-look-like" class="table-of-contents__link">What does React Native + TypeScript look like</a></li><li><a href="#where-to-find-useful-advice" class="table-of-contents__link">Where to Find Useful Advice</a></li><li><a href="#using-custom-path-aliases-with-typescript" class="table-of-contents__link">Using Custom Path Aliases with TypeScript</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2020 Facebook, Inc.</div></div></div></footer></div>
|
|
<script src="/styles.25dfd8ab.js"></script>
|
|
<script src="/runtime~main.34075733.js"></script>
|
|
<script src="/main.00cf4c49.js"></script>
|
|
<script src="/1.844dff91.js"></script>
|
|
<script src="/2.e0509fa8.js"></script>
|
|
<script src="/1f391b9e.3f65ce9d.js"></script>
|
|
<script src="/941.a6bd671c.js"></script>
|
|
<script src="/ee5b3385.8c48d415.js"></script>
|
|
<script src="/17896441.8ef96896.js"></script>
|
|
<script src="/516ae6d6.60aa2d88.js"></script>
|
|
</body>
|
|
</html> |