环境搭建

在线环境

如果你需要一个在线 React + TS 可以选择：

• TypeScript Playground (opens new window)

• CodeSandbox (opens new window)

本地环境

本地搭建环境搭建：

• Vite (opens new window): npm init vite-app my-react-project --template react-ts（推荐）

• Create React App (opens new window): npx create-react-app name-of-app --template typescript

文件扩展名

在 React 的 JS 项目中，你可以只有一种文件扩展名即 .js 文件。

但是在 React 的 TS 项目中，必须有两种扩展名的文件，即默认的 .ts 文件，和书写 JSX 语法的 .tsx 文件。

引入 React 的最佳方式

import * as React from "react";

import * as ReactDOM from "react-dom";

这种引用方式被”证明“是最可靠的一种方式，推荐使用。

我认为没啥区别，讨论请看 import_react_from_react_will_go_away_in_distant (opens new window)：

如果你想通过默认暴露的方式引入：

import React from "react";
import ReactDOM from "react-dom";

需要在 tsconfig.json 添加额外的配置："allowSyntheticDefaultImports": true。