Learn a programming technique, master the basic knowledge (if you don’t know the basic knowledge, you can check it out), try to write, can deepen understanding, maybe this is also a good way. After business requirements and technical direction are determined, we usually go through three phases:

  1. Architectural Design: The entire business can be designed into several parts (i.e. abstractions of key entities). How do they interact
  2. Business abstraction: It is a complex process to clarify the responsibilities of business modules, which abstract classes, abstract methods, and plug-in mechanisms are provided
  3. Detailed implementation: the implementation of abstract classes, abstract methods, some variables, constant definition

The above three stages are basically implemented from architectural design -> business abstraction -> details. During the development process, there may be back and forth, and constant corrections and adjustments tend to be relatively stable. In terms of architectural design, it is not necessary to teach students how to suck eggs so as not to mislead people. We focus on typescript development type declarations, starting with basic type declarations and then building a business module.

To make the process easier, combine the business from the javascrpte base data type to the referenced data type

Basic data types

Booleans, strings, and numbers are some of the basic data types that are often used

/ / account
let account: string | number = "";

/ / password
let password: string = "";

/ / cell phone number
let phone: number = 0;

// Remember the password
let keepPwd: boolean = false;
Copy the code

Reference data type

Object, arrays are some of the most frequently used reference data types

// Login request parameters
interface LoginParam {
  // Account: a string or a number
  account: string | number;
  / / password
  password: string;
  // Remember the passwordkeepPwd? :boolean;
}

// Login returns parameters
interface UserInfo {
  userId: number;
  name: string; nickName? :string;
  phone: number;
}

type Status = 0 | 1 | 2 | 3;

/ / the list items
interface ListItem {
  readonly id: string;
  name: string;
  status: Status;
}

/ / list
type List = ListItem[];

/ / paging
interface Pagination<T extends number | string = number> {
  // Current page number
  current: T;
  pageSize: T;
  total: T;
}

// The background interface list returns data
interface ResponseList {
  // Business code
  // 200 represents success, other failures
  code: number;
  // Success/error, the description is returned in the background
  message: string;
  // Business data
  data: {
    list: List;
    pagination: Pagination;
  };
}

Copy the code

Fetch invokes the interface behind the scenes

CURD operations are implemented by invoking the background interface. The Resful interface consists of two parts:

  • Request parameter: req
  • Response data: RES

At this point, you need to install it with the command: NPM I axios or YARN add axios. This library is installed with the declaration file already installed. Hover the cursor over axios and use command + click to see the definition


// Login request parameters
const fetchLogin = (params: LoginParam) = >
  axios.post<UserInfo>("/login", params);

// Get the list
const fetchList = (params: Pagination) = > axios.post<UserInfo>("/list", params);

// Modify the list item
export interface ItemReq {
  id: number; name? :string; status? :string;
}

const fetchUpdate = (params: ItemReq) = >
  axios.post<UserInfo>("/update", params);

// Delete list items in batches
export type IdSetReq = number[];
const fetchDelete = (params: IdSetReq) = >
  axios.post<UserInfo>("/delete", params);

Copy the code

conclusion

Above, from basic data types to reference data types, to the Resful interface, to generic declarations, third-party library declarations. The whole process is relatively simple. It’s more about trying to write and feel for yourself. Only by writing can you better understand the key details. These are just the beginning of typescipt’s types, but there are many interesting parts that are not covered, such as:

  • Type type relationship processing: conditions, or ‘|’, and ‘&’, infer
  • Utility Types: Built-in Types, often used as relational operations,
  • Declaration files: write declaration files for common libraries and modules
  • Type compatible processing, interface, class class, enumeration, etc
  • Project option: tsconfig.json