Typescript在React中的最佳实践

npm install typescript -D

npm install @types/react -D

npm install @types/react-dom -D

{

  // ...

  "compilerOptions": {

    "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度

    "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置

    "diagnostics": true, // 打印诊断信息 

    "target": "ES5", // 目标语言的版本

    "module": "CommonJS", // 生成代码的模板标准

    "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD",

    "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",

    "allowJS": true, // 允许编译器编译JS，JSX文件

    "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用

    "outDir": "./dist", // 指定输出目录

    "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构

    "declaration": true, // 生成声明文件，开启后会自动生成声明文件

    "declarationDir": "./file", // 指定生成声明文件存放目录

    "emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件

    "sourceMap": true, // 生成目标文件的sourceMap文件

    "inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中

    "declarationMap": true, // 为声明文件生成sourceMap

    "typeRoots": [], // 声明文件目录，默认时node_modules/@types

    "types": [], // 加载的声明文件包

    "removeComments":true, // 删除注释 

    "noEmit": true, // 不输出文件,即编译后不会生成任何js文件

    "noEmitOnError": true, // 发送错误时不输出任何文件

    "noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用

    "importHelpers": true, // 通过tslib引入helper函数，文件必须是模块

    "downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现

    "strict": true, // 开启所有严格的类型检查

    "alwaysStrict": true, // 在代码中注入'use strict'

    "noImplicitAny": true, // 不允许隐式的any类型

    "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量

    "strictFunctionTypes": true, // 不允许函数参数双向协变

    "strictPropertyInitialization": true, // 类的实例属性必须初始化

    "strictBindCallApply": true, // 严格的bind/call/apply检查

    "noImplicitThis": true, // 不允许this有隐式的any类型

    "noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)

    "noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)

    "noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行)

    "noImplicitReturns": true, //每个分支都会有返回值

    "esModuleInterop": true, // 允许export=导出，由import from 导入

    "allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块

    "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入

    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录

    "paths": { // 路径映射，相对于baseUrl

      // 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置

      "jquery": ["node_modules/jquery/dist/jquery.min.js"]

    },

    "rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错

    "listEmittedFiles": true, // 打印输出文件

    "listFiles": true// 打印编译的文件(包括引用的声明文件)

  }

}
import * as React from 'react'

import * as ReactDOM from 'react-dom'

//allowSyntheticDefaultImports
//tsconfig.json

{

  "include": [

    "src/**/*"

  ],

  "compilerOptions": {

    "target": "es5",

    "module": "es6",

    "noEmit": true,//不生成类型

    "noImplicitAny": true, //不能有隐式any

    "allowTernary": true,

    "allowShortCircuit": true,

    "allowSyntheticDefaultImports":true,//允许默认导入

    "esModuleInterop": true,//esmodule支持

    "strict": true,

    "lib": [

      "dom",

      "es2015"//dom、html类型定义 es定义

    ],

    "jsx": "react-jsx"//最重要

  }

}

//webpack.config.js

const path = require('path');



module.exports = {

    resolve: {

        extensions: ['.tsx', '.ts', '.js']

    },

    module: {

        rules: [{

            test: /\.(ts|js)x?$/,

            exclude: /node_modules/,

            loader: 'babel-loader',

        }],

    }

};

//png资源

declare module "*.png";

//扩展window对象

declare global {

  interface Window {

    MyVendorThing: MyVendorType;

  }

}

interface Person {

  age: number;

}



interface Person {

  name: string;

}





type Person {

  age: number;

}



type Person {

  name: string;

}

//TS2300: Duplicate identifier 'Person'.

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

import { Button } from 'antd';



type ButtonProps = React.ComponentProps<typeof Button>;

const enum Gender {

  female = '1',

  male = '2',

}



function getSex(sex: string) {

  if (sex === Gender.female) {

    console.log(sex);

  }

}

type PersonProps = {

  name?: string;

  age: number;

  onClick: () => void;

};



function Person(props: PersonProps): JSX.Element {

  const { name = '', age } = props;

  return (

    <div onClick={() => console.log('hello')}>

      {name}-{age}

    </div>

  );

}

function App() {

  const isShow = false;

  return isShow ? <input type='text' /> : null;

}

const App: React.FC = props => props.children



const App: React.FC = () => [1, 2, 3]



const App: React.FC = () => 'hello'

interface ButtonProps {

  children: React.ReactNode;

}



function Button({ children }: ButtonProps) {

  return <button>{children}</button>;

}

type ButtonProps = {

  onClick: () => void;

};



function Button(props: PropsWithChildren<ButtonProps>) {

  const { children } = props;

  return <button onClick={() => console.log('onClick')}>{children}</button>;

}

type AppProps = { message: string }; /* 也可用 interface */

const App = ({ message }: AppProps) => <div>{message}</div>; // 无大括号的箭头函数，利用 TS 推断。

//简单类型的初始值

const [val, setVal] = useState(false);

//复杂类型的初始值

const [user, setUser] = useState({ name: '张三', age: 18, password: '123456' });

const handleInitial =(val:typeof user) => {

    setUser(val);

};

//一般情况下我们没有初始值，需要调用接口去请求数据

const [user, setUser] = useState<UserType | null>(null);//user?.id

const [user, setUser] = useState<UserType>({} as UserType);//better

function App() {

  const divRef = useRef<HTMLDivElement>(null);//必须给null初始值，类型不用给null包括在里面



  useLayoutEffect(() => {

    if (!divRef.current) throw Error('divRef is not assigned');

    divRef.current.innerHTML = 'hello world';

  });



  return <div ref={divRef}>hello</div>;

}

function App() {

  const divRef = useRef<HTMLDivElement>(null!);



  useLayoutEffect(() => {

    divRef.current.innerHTML = 'hello world';

  });



  return <div ref={divRef}>hello</div>;

}

function App() {

  const timer = useRef(0);



  useLayoutEffect(() => {

    timer.current = setTimeout(() => {

      console.log('timer');

    }, 1000);

    return () => clearTimeout(timer.current);

  });



  return <div>hello</div>;

}

const AppContext = createContext({

  authenticated: true,

  lang: 'en',

  theme: 'dark',

});

const MyComponent = () => {

  const appContext = useContext(AppContext); //inferred as an object

  return <h1>The current app language is {appContext.lang}</h1>;

};

type Theme = 'light' | 'dark';

const ThemeContext = createContext<Theme>('dark');

const App = () => {

  const theme = useContext(ThemeContext);

  return <div>The theme is {theme}</div>;

};

const multiply = React.useCallback((value) => value * 2, []);//给类型

function useToggle() {

  const [state, setState] = useState(false);

  const toggle = () => setState(!state);

  return [state, toggle];

}

function useToggle() {

  const [state, setState] = useState(false);

  const toggle = () => setState(!state);

  return [state, toggle] as const;

}

type inputProps = ButtonHTMLAttributes<HTMLButtonElement>;



type inputProps = ComponentPropsWithoutRef<'button'>

function Button(props: inputProps) {

  return <button {...props}>{props.children}</button>;

}

interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {

  customProp: string;

}



type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {

  customProp: string;

};



function Button(props: ButtonProps) {

  console.log(props.customProp);

  return <button {...props}>{props.children}</button>;

}

function App() {

  return (

    <>

      <button onClick={(e) => console.log(e)}>hello</button>

      <input onChange={(e) => console.log(e)} />

    </>

  );

}

React.XXXEvent<HTMLXXXElement>

ChangeEvent, FormEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent, PointerEvent, WheelEvent, TouchEvent

function App() {

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {

    console.log(e.target.value);

  };

  return <input onChange={handleChange} />;

}

React.ReactEventHandler<HTMLXXXElement>
function App() {

  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {

    console.log(e.target.value);

  };

  return <input onChange={handleChange} />;

}

import type { AxiosRequestConfig } from 'axios';

import axios from 'axios';



interface Res<T = unknown> {

  code: number;

  data: T;

  message: string;

}

async function http<T>(config: AxiosRequestConfig): Promise<Res<T>> {

  const instance = axios.create({

    baseURL: process.env.BASE_URL,

    timeout: 10000,

    headers: { 'Content-Type': 'application/json;charset=UTF-8' },

    validateStatus:  ()=> true,

  });

  instance.interceptors.request.use(

    (config) => {

      return config;

    },

    (error) => {

      return Promise.reject(error);

    },

  );

  instance.interceptors.response.use(

    (response) => {

      return response;

    },

    (error) => {

      return Promise.reject(error);

    },

  );

  const { data } = await instance.request<Res<T>>(config);

  return data;

}



export default http;
export const getArticle = (params: ParamsType) => {

  return http<Article>({

    method: 'get',

    url: '/article/page',

    params,

  });

};