react-typescript入门

一、项目构建

如果没有create-react-app命令行脚手架，可以先下载个

> npm install -g create-react-app

然后我们使用其创建一个typescript项目，项目名：react-typescript-demo

> npx create-react-app react-typescript-demo --typescript 

生成的项目结构

react-typescript-demo
  node_modules
  public
    favicon.ico
    index.html
    manifest.json
  src
    App.css
    App.test.tsx
    App.tsx
    index.css
    index.tsx
    logo.svg
    react-app-env.d.ts
    serviceWorker.ts
  .gitignore
  package.json
  README.md
  tsconfig.json
  yarn.lock

进后项目，启动

react-typescript-demo> npm start

会自动打开浏览器：http://localhost:3000/

二、项目代码

1、react-app-env.d.ts声明文件

/// <reference types="react-scripts" />

三斜线指令是包含单个XML标签的单行注释。 注释的内容会做为编译器指令使用。

三斜线指令仅可放在包含它的文件的最顶端。 一个三斜线指令的前面只能出现单行或多行注释，这包括其它的三斜线指令。 如果它们出现在一个语句或声明之后，那么它们会被当做普通的单行注释，并且不具有特殊的涵义。

/// <reference path="..." />
/// <reference path="..." />指令是三斜线指令中最常见的一种。 它用于声明文件间的 依赖。

三斜线引用告诉编译器在编译过程中要引入的额外的文件。

当使用--out或--outFile时，它也可以做为调整输出内容顺序的一种方法。 文件在输出文件内容中的位置与经过预处理后的输入顺序一致。

2、index.tsx主文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

3、App.tsx组件

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

三、知识点

1、.ts和.tsx

• js->ts
• jsx->tsx

2、.ts和.d.ts

.ts是普通文件
.d.ts是声明文件

3、React.FC

• FC = Functional Component
• SFC = Stateless Functional Component (已弃用)

四、相关配置

1、tsconfig配置

tsconfig配置说明：http://json.schemastore.org/tsconfig

tsconfig.json项目配置：

{
  "compilerOptions": { // 编译选择
    "target": "es5", // 指定ECMAScript目标版本。允许的值为“es3”、“es5”、“es6”、“es2015”、“es2016”、“es2017”、“es2018”或“esnext”。
    "lib": [ // 指定要包含在编译中的库文件。
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true, // 允许编译javascript文件。
    "skipLibCheck": true, // 跳过声明文件的类型检查
    "esModuleInterop": true, // 为运行时babel生态系统兼容性提供“……importstar”和“……importdefault”帮助，并为类型系统兼容性启用“——allowSyntheticDefaultImports”。
    "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块进行默认导入。这并不影响代码发出，只影响类型查询。
    "strict": true, // 启用所有严格的类型检查选项。
    "forceConsistentCasingInFileNames": true, // 不允许对同一文件使用不一致大小写的引用。
    "module": "esnext", // 指定模块代码生成:“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”或“esnext”。
    "moduleResolution": "node", // 指定模块解析策略:“node”(node)或“classic”
    "resolveJsonModule": true, // 包含导入的模块。json的扩展。
    "isolatedModules": true, // 无条件地为未解决的文件发出导入。
    "noEmit": true, // 不要发出输出。
    "jsx": "preserve" // 指定JSX代码生成:'preserve'、'react'或' reactive -native'。
  },
  "include": [ // 包含目录
    "src"
  ]
}

写到最后，欢迎关注作者：http://fenxianglu.cn/