TypeScript type argument in function if args like object

August 21, 2022

I try to type arguments name and password in my function create_user below.

I wonder how i can do it. I could assign empty string like {name='', password=''}. But i wonder if it correct? and how it must be done according to typescript? (i’m new in typescript).

function create_user:

const createUser = async ({name, password}) => {
  return await axiosInstance.post(`users/create_user/`, {
    name: name,
    password: password,
  });
};

>Solution :

You provide the type of the parameter you’re destructuring. When you use destructuring in the parameter list, the parameter you’re destructuring will be an object of some kind; in your case, an object with name and password properties. You’ve suggested you could default them to ""; that tells me their type is string.

So:

const createUser = async ({name, password}: {name: string; password: string;}) => {
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    return await axiosInstance.post(`users/create_user/`, {
        name: name,
        password: password,
    });
};

Clearer with a type alias, though (or an interface):

type UserInfo = {
    name: string;
    password: string;
};
const createUser = async ({name, password}: UserInfo) => {
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^
    return await axiosInstance.post(`users/create_user/`, {
        name: name,
        password: password,
    });
};

The above doesn’t provide any defaults. You did mention defaults, but I’m not sure whether you wanted to provide them. If you did, you’d do that in the destructuring itself, and you’d make the properties optional in the type:

type UserInfo = {
    name?: string;
// −−−−−^
    password?: string;
// −−−−−−−−−^
};
const createUser = async ({name = "", password = ""}: UserInfo) => {
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^−−−−−−−−−:−^^^^
    return await axiosInstance.post(`users/create_user/`, {
        name: name,
        password: password,
    });
};

That provides defaults for the properties, but not for the parameter itself (you still have to pass in an object). If you also want to default the entire parameter, you can do that too:

type UserInfo = {
    name?: string;
// −−−−−^
    password?: string;
// −−−−−−−−−^
};
const createUser = async ({name = "", password = ""}: UserInfo = {}) => {
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^−−−−−−−−−−−^^^^−−−−−−−−−−−−^^^^
    return await axiosInstance.post(`users/create_user/`, {
        name: name,
        password: password,
    });
};

Here are those examples on the TypeScript playground.

Side note: In an object literal, when the name of the property you want to create an the name of the variable/parameter you’re getting the value from are exactly the same, you can use shorthand notation for the properties:

return await axiosInstance.post(`users/create_user/`, {
    name,       // *** Notice there is no `: name` or `: password
    password,   // *** on these initializers
});