The paper

With the development of front-end technology, TypeScript has gradually replaced Javascript, especially in major open source projects, or other open source JS projects, we can see TS figure, for example, vue3 is familiar with TS reconstruction;

  • When using TS, one of the biggest benefits is that you can give JS a variety of type constraints, so that JS can complete static code analysis, infer the existence of type errors or type prompts in the code, do not need to find errors at runtime;
  • TS to complete the type derivation, we need to know the type of the variable in advance, so we need to define a clear type for the variable in advance, which can make TS complete the type demolition very well;

First, we need to take a quick look at TS: What is TypeScript

In this article learn some generic ts, file declaration, interface (interface), type, a series of type description can be; Personally, the fastest way to learn TS is to look at some open source code; You can understand the use of generics; This article makes shallow use of generics;

The body of the

Encapsulate an AXIos, or request request function;

Usually we encapsulate the format of the function

// request.js

/ * * *@description: request function *@param {string} The path path *@param {object} Params carries the parameter *@returns {object}* /
export default async function request(path, params) {
    // ...
}

Copy the code

The usage on the page is roughly as follows;

const [d, setData] = useState({}); 
// This is a List interface and we need to use the request method above
async function getList() {
    const res = await request('v1/app/list', {search: 1});
    if(res.code === 200) {
        setData(res.data)
    }
    
}
Copy the code

As you can see, the wrapper function above is usually the path params request path; Returns a Promise resolve result; The general structure is:

{
 code: 200.data: {},
 errMsg: 'Error message'
}
Copy the code

Ts interface writing

Ok With the above information, let’s do a simple function encapsulation;

First let’s write a description of the return format;

// Basic type of the server interface
type Server<T> = {
    errMsg: string;
    data: T;
    code: 200 | 1000 | 1001 | 404 | 500. ; };Copy the code

After studying.d.ts and interface, we know that interfaces declared by interface are merged automatically, while those declared by.d.ts can be used anywhere in the world.

So we can declare the name of the interface we need in.d.ts. We’ll call it API for now.

Because we need to automatically derive params parameters from path, data, etc.; So you need to define something that’s relevant;

// abc.d.ts
interface API {
    '/v1/app/list': {
        params: {
            /** I am a parameter */
            a: number;
            /** I am the b parameter */
            b: string;
        },
        data: {
            /** Array of numeric type */
            list: number[]; }}'/v1/app/home': {
        params: {},
        data: {}}}interface API {
    '/v1/app/abc': {
        params: {},
        data: {}}}Copy the code

We can write the structure of the interface like this; The list home ABC interface has its own associated params and data.

The way you write a function

Now let’s look at the description of the function

// Request method parameter constraints
function Drequest<URL extends keyof API> (
	path: URL,
	params: API[URL]['params'], method? :'POST'
) :Promise<Server<API[URL] ['data'] > >export default const request:typeof Drequest = (path, params, method = 'POST') = >{}Copy the code

There is a corresponding API interface in.d.ts, which can be used to derive; This function is the final key assembly; Keyof changes the keyof an interface to the union type

'/v1/app/list' | '/v1/app/home' | '/v1/app/abc' 
Copy the code

The extends extends is to see if a URL can be one of the union types. See that the uppermost function has Path params, so that we can map to path one by one;

Take a look at page usage:

conclusion

After the above ts interface encapsulation can automatically verify the params parameter type, and deduce the data field type; /** */; /** */; This will take up more early development time, but for later maintenance is very beneficial; We will refer to the API interface documentation provided to write the structure and type of TS.