{"componentChunkName":"component---src-templates-documentation-tsx","path":"/typescript","result":{"data":{"mdx":{"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"TypeScript\",\n  \"description\": \"Using TypeScript with React Native Firebase\",\n  \"next\": \"/other-platforms\",\n  \"previous\": \"/migrating-to-v22\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"The React Native Firebase project comes with support for TypeScript. The project provides\\nAmbient Declarations for each Firebase module, without having to install any additional dependencies.\"), mdx(\"h2\", {\n    \"id\": \"example\"\n  }, \"Example\"), mdx(\"p\", null, \"To demonstrate TypeScript usage in a practical example, the following assumes TypeScript is already setup on your environment.\\nIf you are looking to setup a new project or migrate an existing project to TypeScript please check out this official \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native\"\n  }, \"blog post\"), \".\"), mdx(\"p\", null, \"The below example makes use of the \", mdx(\"a\", {\n    href: \"/auth\"\n  }, \"Authentication\"), \" module, demonstrating how to safely type code using the declarations the module provides.\"), mdx(\"p\", null, \"Lets go ahead and create a new \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"App.tsx\"), \" component:\"), mdx(\"pre\", {\n    \"className\": \"language-jsx\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"as\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"React\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"Text\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react-native'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"import\"), \" auth \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'@react-native-firebase/auth'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token maybe-class-name\"\n  }, \"App\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" user \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"auth\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, \"currentUser\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token class-name\"\n  }, \"Text\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"Welcome \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"user\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, \"email\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token class-name\"\n  }, \"Text\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword module\"\n  }, \"default\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"App\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\")), mdx(\"p\", null, \"This code will produce a TypeScript error: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Object is possibly null\"), \". Accessing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"currentUser\"), \" returns the\\ncurrent \", mdx(\"a\", {\n    href: \"/reference/auth/user\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"User\")), \" if the user is signed in or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \" if\\nthey are signed out. This error prevents our code from compiling and for good reason - without checking the users authentication status, accessing the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"email\"), \" property on \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"User\"), \" will cause the app to crash!\"), mdx(\"p\", null, \"To rectify our unsafe code, we can check the existence of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"user\"), \" before accessing it:\"), mdx(\"pre\", {\n    \"className\": \"language-jsx\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token maybe-class-name\"\n  }, \"App\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" user \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"auth\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, \"currentUser\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"!\"), \"user\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token class-name\"\n  }, \"Text\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"Please login\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token class-name\"\n  }, \"Text\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token class-name\"\n  }, \"Text\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"Welcome \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"user\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, \"email\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token class-name\"\n  }, \"Text\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\")), mdx(\"p\", null, \"TypeScript will no longer show any errors, allowing us to safely continue developing our app.\"), mdx(\"p\", null, \"It is also possible to access the module types directly, if you need to locally reference variables within your own codebase.\"), mdx(\"p\", null, \"For example, we may need to store the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"User\"), \" in local state. Manually defining a type for local state TypeScript loses the ability to type check the code.\"), mdx(\"p\", null, \"We can easily access the types manually through the module though, for example:\"), mdx(\"pre\", {\n    \"className\": \"language-ts\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"as\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"React\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" useEffect\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" useState \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" auth\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"FirebaseAuthTypes\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'@react-native-firebase/auth'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token maybe-class-name\"\n  }, \"App\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"loading\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" setLoading\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" useState\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token builtin\"\n  }, \"boolean\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"user\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" setUser\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" useState\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"FirebaseAuthTypes\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-access\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token maybe-class-name\"\n  }, \"User\")), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"|\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"null\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"null\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"useEffect\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token arrow operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"auth\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token method function property-access\"\n  }, \"onAuthStateChanged\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"userState\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token arrow operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setUser\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"userState\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"loading\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setLoading\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"false\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"default\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token maybe-class-name\"\n  }, \"App\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\")), mdx(\"p\", null, \"We firstly initialize a local state variable called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"user\"), \", and manually provide a type definition of that state item\\nof \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<FirebaseAuthTypes.User | null>\"), \". As we are unaware of the users authentication state, we initialize state with a value of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \"\\nwhich is a valid type for this state.\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onAuthStateChanged\"), \" listener triggers with a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"User\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \" parameter whenever the users authentication state changes. The\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@react-native-firebase/auth\"), \" module provides TypeScript with these types automatically. As the returned types match\\nthe local state type, we are able to set the state immediately without any type check errors.\"), mdx(\"p\", null, \"Attempting to set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"user\"), \" state to anything other than the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"User\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \" will throw a TypeScript error.\"), mdx(\"h2\", {\n    \"id\": \"definitions\"\n  }, \"Definitions\"), mdx(\"p\", null, \"The full set of TypeScript definitions for each module can be found on the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/invertase/react-native-firebase\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"invertase/react-native-firebase\")), \"\\nrepository within each package.\"), mdx(\"p\", null, \"For example, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"auth\"), \" module definitions are located at \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/invertase/react-native-firebase/blob/main/packages/auth/lib/index.d.ts\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"react-native-firebase/packages/auth/lib/index.d.ts\")), \".\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"TypeScript","description":"Using TypeScript with React Native Firebase","icon":null,"noindex":null},"excerpt":"The React Native Firebase project comes with support for TypeScript. The project provides\nAmbient Declarations for each Firebase module…","tableOfContents":{"items":[{"url":"#example","title":"Example"},{"url":"#definitions","title":"Definitions"}]},"headings":[{"depth":2,"value":"Example"},{"depth":2,"value":"Definitions"}],"parent":{"__typename":"File","relativePath":"typescript.md"}},"next":null,"previous":{"frontmatter":{"title":"Migrating to v22"},"fields":{"slug":"/migrating-to-v22"}},"sidebar":{"raw":"[[\"Getting Started\",\"/\"],[\"Migration Guide to v22\",\"/migrating-to-v22\"],[\"Migration Guide to v23\",\"/migrating-to-v23\"],[\"TypeScript\",\"/typescript\"],[\"Platforms\",\"/platforms\"],[\"Release Notes\",\"/releases\"],[\"FAQs and Tips\",\"/faqs-and-tips\"],[\"Feature Requests\",\"https://invertase.canny.io/react-native-firebase\"],[\"Contributing\",\"https://github.com/invertase/react-native-firebase/blob/main/CONTRIBUTING.md\"],[\"AI Logic\",[[\"Usage\",\"/ai/usage\"]],\"//firebase.google.com/static/images/icons/firebase-ai-logic.svg\"],[\"Analytics\",[[\"Usage\",\"/analytics/usage\"],[\"Screen Tracking\",\"/analytics/screen-tracking\"],[\"Building an Analytics Funnel\",\"https://blog.theodo.com/2018/01/building-google-analytics-funnel-firebase-react-native\"]],\"//firebase.google.com/static/images/products/icons/run_analytics.svg\"],[\"App Check\",[[\"Usage\",\"/app-check/usage\"]],\"//firebase.google.com/static/images/products/icons/build_app_check.svg\"],[\"App Distribution\",[[\"Usage\",\"/app-distribution/usage\"]],\"//firebase.google.com/static/images/products/icons/run_app_distribution.svg\"],[\"Authentication\",[[\"Usage\",\"/auth/usage\"],[\"Social Auth\",\"/auth/social-auth\"],[\"Phone Auth\",\"/auth/phone-auth\"],[\"OpenID Connect Auth\",\"/auth/oidc-auth\"],[\"Multi-factor Auth\",\"/auth/multi-factor-auth\"]],\"//firebase.google.com/static/images/products/icons/build_auth.svg\"],[\"Cloud Firestore\",[[\"Usage\",\"/firestore/usage\"],[\"Usage with Emulator\",\"/firestore/emulator\"],[\"Usage with FlatLists\",\"/firestore/usage-with-flatlists\"],[\"Implementing Pagination\",\"/firestore/pagination\"],[\"Building a \\\"TODO\\\" app\",\"https://invertase.io/blog/getting-started-with-cloud-firestore-on-react-native\"]],\"//firebase.google.com/static/images/products/icons/build_firestore.svg\"],[\"Cloud Functions\",[[\"Usage\",\"/functions/usage\"],[\"Writing & Deploying Functions\",\"/functions/writing-deploying-functions\"]],\"//firebase.google.com/static/images/products/icons/build_functions.svg\"],[\"Cloud Messaging\",[[\"Usage\",\"/messaging/usage\"],[\"iOS Project Setup\",\"/messaging/usage/ios-setup\"],[\"iOS Permissions\",\"/messaging/ios-permissions\"],[\"Notifications\",\"/messaging/notifications\"],[\"iOS Notification Images\",\"/messaging/ios-notification-images\"],[\"Server Integration\",\"/messaging/server-integration\"]],\"//firebase.google.com/static/images/products/icons/run_cloud_messaging.svg\"],[\"Cloud Storage\",[[\"Usage\",\"/storage/usage\"]],\"//firebase.google.com/static/images/products/icons/build_storage.svg\"],[\"Core / App\",[[\"Usage\",\"/app/usage\"],[\"JSON Config\",\"/app/json-config\"],[\"Utils\",\"/app/utils\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"],[\"Crashlytics\",[[\"Usage\",\"/crashlytics/usage\"],[\"Viewing crash reports\",\"/crashlytics/crash-reports\"]],\"//firebase.google.com/static/images/products/icons/run_crashlytics.svg\"],[\"Realtime Database\",[[\"Usage\",\"/database/usage\"],[\"Offline Support\",\"/database/offline-support\"],[\"Presence Detection\",\"/database/presence-detection\"]],\"//firebase.google.com/static/images/products/icons/build_realtime_database.svg\"],[\"In-App Messaging\",[[\"Usage\",\"/in-app-messaging/usage\"]],\"//firebase.google.com/static/images/products/icons/run_in_app_messaging.svg\"],[\"Installations\",[[\"Usage\",\"/installations/usage\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"],[\"ML\",[[\"Usage\",\"/ml/usage\"]],\"//firebase.google.com/static/images/products/icons/build_ml.svg\"],[\"Remote Config\",[[\"Usage\",\"/remote-config/usage\"]],\"//firebase.google.com/static/images/products/icons/run_remote_config.svg\"],[\"Performance Monitoring\",[[\"Usage\",\"/perf/usage\"],[\"Axios Integration\",\"/perf/axios-integration\"],[\"KY Integration\",\"/perf/ky-integration\"]],\"//firebase.google.com/static/images/products/icons/run_performance.svg\"],[\"VertexAi\",[[\"Usage\",\"/vertexai/usage\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"],[\"Legacy docs\",[[\"Migrating to v6\",\"/migrating-to-v6\"],[\"Legacy Docs (<= v5)\",\"https://v5.rnfirebase.io/docs/v5.x.x/getting-started\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"]]"}},"pageContext":{"id":"c3847448-0d49-5ef8-b46d-9cfb76cd060b","next":"/other-platforms","previous":"/migrating-to-v22"}},"staticQueryHashes":["3688227230"]}