Skip to content

Update adding-typescript.md #17028

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update adding-typescript.md #17028

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 70 additions & 60 deletions docusaurus/docs/adding-typescript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,70 @@
---
id: adding-typescript
title: Adding TypeScript
---

> Note: this feature is available with `[email protected]` and higher.

[TypeScript](https://www.typescriptlang.org/) is a typed superset of JavaScript that compiles to plain JavaScript.

## Installation

To start a new Create React App project with [TypeScript](https://www.typescriptlang.org/), you can run:

```sh
npx create-react-app my-app --template typescript
```

or

```sh
yarn create react-app my-app --template typescript
```

> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` or `yarn global remove create-react-app` to ensure that `npx` always uses the latest version.
>
> Global installs of `create-react-app` are no longer supported.

To add [TypeScript](https://www.typescriptlang.org/) to an existing Create React App project, first install it:

```sh
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
```

or

```sh
yarn add typescript @types/node @types/react @types/react-dom @types/jest
```

Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and create tsconfig.json if it's not in the root of your project [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).

Finally **restart your development server**!

Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, [see here](advanced-configuration.md).

## Getting Started with TypeScript and React

You are not required to make a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), one will be made for you. You are allowed to edit the generated TypeScript configuration.

- [TypeScript Handbook](https://www.typescriptlang.org/)
- [TypeScript Example on React](https://www.typescriptlang.org/play/index.html?jsx=2&esModuleInterop=true&e=196#example/typescript-with-react)
- [React + TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#reacttypescript-cheatsheets) has a good overview on how to use React with TypeScript

## Troubleshooting

If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` or `yarn global remove create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)).

If you are currently using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript/), see [this blog post](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/) for instructions on how to migrate to Create React App.

Constant enums and namespaces are not supported, you can learn about the constraints of [using Babel with TypeScript here](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats).
import React from "react";

export default function MiningInAustralia() {
return (
<div className="min-h-screen bg-gray-100 text-gray-800">
<header className="bg-blue-800 text-white py-6 shadow-lg">
<div className="container mx-auto px-4">
<h1 className="text-3xl font-bold">Mining in Australia</h1>
<p className="text-lg">Exploring Australia's Rich Mining Heritage and Industry</p>
</div>
</header>

<main className="container mx-auto px-4 py-8">
<section className="mb-8">
<h2 className="text-2xl font-bold mb-4">Overview</h2>
<p>
Mining is a key industry in Australia, contributing significantly to the
nation's economy. With vast reserves of minerals like iron ore, gold,
coal, and lithium, Australia is one of the world's leading mining
countries.
</p>
</section>

<section className="mb-8">
<h2 className="text-2xl font-bold mb-4">Major Minerals and Resources</h2>
<ul className="list-disc pl-6">
<li><strong>Iron Ore:</strong> Australia is the largest exporter of iron ore in the world, primarily mined in Western Australia.</li>
<li><strong>Coal:</strong> Both thermal and metallurgical coal are significant exports, with major mines in Queensland and New South Wales.</li>
<li><strong>Gold:</strong> Australia is a leading producer of gold, with mines located across multiple states.</li>
<li><strong>Lithium:</strong> As demand for batteries grows, Australia's lithium production is expanding rapidly.</li>
</ul>
</section>

<section className="mb-8">
<h2 className="text-2xl font-bold mb-4">Environmental Impact</h2>
<p>
Mining has both positive and negative impacts on the environment.
Sustainable practices and strict regulations are in place to minimize
the environmental footprint, including land rehabilitation and water
management.
</p>
</section>

<section className="mb-8">
<h2 className="text-2xl font-bold mb-4">Economic Contribution</h2>
<p>
The mining industry is a major contributor to Australia’s GDP, providing
thousands of jobs and supporting regional communities. Royalties and
taxes from mining also fund public services and infrastructure.
</p>
</section>

<section className="mb-8">
<h2 className="text-2xl font-bold mb-4">Future of Mining</h2>
<p>
Advances in technology, including automation and renewable energy
integration, are shaping the future of mining in Australia. The focus is
on balancing economic growth with environmental sustainability.
</p>
</section>
</main>

<footer className="bg-blue-800 text-white py-4 mt-8">
<div className="container mx-auto px-4">
<p className="text-center">&copy; 2025 Mining in Australia. All rights reserved.</p>
</div>
</footer>
</div>
);
}