使用 React 和 TypeScript 构建更安全的 web 应用程序的方法

2 年 ago

宇, 华

2 minutes

你好。这次我们将讨论关于TypeScript的话题，特别是对初学者工程师而言，如何结合React构建更安全的Web应用程序的方法。

使用React和TypeScript的组合有哪些优势？

React是一個在開發UI時非常方便的庫。但是，如果使用JavaScript進行開發，無法確保類型的安全性。因此，開發者自己需要進行類型檢查。通過使用TypeScript，開發者可以通過靜態類型檢查提早發現錯誤並更安全地進行開發。

此外，将React和TypeScript结合起来，可以在代码编辑器中进行代码补全和错误提示，帮助开发人员更高效准确地编写代码。

使用TypeScript对React组件进行类型注解的方法

使用typescript，可以轻松地为react组件进行类型标注。首先，为组件的props添加类型标注。然后，为组件本身添加类型标注。这样，开发者在开发组件时就可以了解props的类型。

如果存在以下的组件，我们会按照以下的方式进行类型化的方法。

import react from 'react'

type props = {
  name: string;
  age: number;
}

const usercard: react.fc<props> = ({ name, age }) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  );
};

export default usercard;

关于React Hooks的类型安全使用方法。

React Hooks是React最新的API。通过使用Hooks，可以实现无需编写冗长代码（如类组件），实现状态管理和使用生命周期方法进行开发。

然而，在使用hooks时需要注意类型的安全性。具体而言，使用useState或useReducer等hooks时需要给定类型。

如果使用useState，可以按照以下方式给类型加上：

import react, { usestate } from 'react'

type user = {
  name: string;
  age: number;
}

const userform: react.fc = () => {
  const [user, setuser] = usestate<user>({
    name: '',
    age: 0
  });

  const handlenamechange = (event: react.changeevent<htmlinputelement>) => {
    setuser({ ...user, name: event.target.value })
  }

  const handleagechange = (event: react.changeevent<htmlinputelement>) => {
    setuser({ ...user, age: parseint(event.target.value) })
  }

  return (
    <form>
      <label>
        name:
        <input type="text" value={user.name} onchange={handlenamechange} />
      </label>
      <label>
        age:
        <input type="number" value={user.age} onchange={handleagechange} />
      </label>
    </form>
  );
};

export default userform;

使用Redux和TypeScript结合的应用程序开发方法。

redux是一个用于应用程序状态管理的库。通过使用typescript，您可以确保在redux中进行状态管理时的类型安全性。

首先，对动作(action)进行类型标注。接下来，对缩减器(reducer)进行类型标注。这样，开发者就可以基于类型来定义动作(action)和实现缩减器(reducer)。

比如说，如果存在如下的action和reducer，进行类型标注的方法可以如下所示。

type user = {
  name: string;
  age: number;
}

enum actiontype {
  set_user_name = 'set_user_name',
  set_user_age = 'set_user_age'
}

type setusernameaction = {
  type: actiontype.set_user_name;
  name: string;
};

type setuserageaction = {
  type: actiontype.set_user_age;
  age: number;
};

type useraction = setusernameaction | setuserageaction;

type userstate = {
  user: user;
};

const userreducer = (state: userstate, action: useraction): userstate => {
  switch (action.type) {
    case actiontype.set_user_name:
      return {
        ...state,
        user: {
          ...state.user,
          name: action.name,
        },
      };
    case actiontype.set_user_age:
      return {
        ...state,
        user: {
          ...state.user,
          age: action.age,
        },
      };
    default:
      return state;
  }
};

关于在react和typescript中编写测试以及提高测试覆盖率的方法

为了开发安全可靠的网络应用程序，测试是必不可少的。如果使用React和TypeScript，还需要注意测试代码的编写方式。

建议在编写测试代码时使用jest。jest在React和TypeScript的开发中被广泛使用。

此外，提高测试覆盖率也是很重要的。通过提高覆盖率，可以早期发现错误和提高可维护性，从而增加对代码修正的自信。

如果有如下组件，测试代码和测试覆盖率的改善方法如下。

import react from 'react'

type props = {
  name: string;
  age: number;
}

const usercard: react.fc<props> = ({ name, age }) => {
  return (
    <div>
      <p data-testid="name">{name}</p>
      <p data-testid="age">{age}</p>
    </div>
  );
};

export default usercard;

import react from 'react'
import { render } from '@testing-library/react';
import usercard from './usercard';

describe('usercard', () => {
  it('should display name and age', () => {
    const { getbytestid } = render(<usercard name="john doe" age={30} />);

    expect(getbytestid('name')).tohavetextcontent('john doe');
    expect(getbytestid('age')).tohavetextcontent('30');
  });
});

以上就是关于如何在初学者工程师中使用React与TypeScript组合来构建更安全的Web应用程序的说明。以下是一些可以作为参考的博客文章。

使用 React 和 TypeScript 构建更安全的 web 应用程序的方法

使用React和TypeScript的组合有哪些优势？

使用TypeScript对React组件进行类型注解的方法

关于React Hooks的类型安全使用方法。

使用Redux和TypeScript结合的应用程序开发方法。

关于在react和typescript中编写测试以及提高测试覆盖率的方法

TypeScript的相关总结

在教育领域积极利用在线学校作为教师！

零日元学习编程的选择