Question 66399 in Javascript Question posted in
A very good W3school tutorial can be found here.

How can I type default useState one string value? – Javascript

I’m having the default state with useState hook values. And I’m expecting to type the newTask object inside the sendTask function with its keys as an interface.

    interface ITask = {
      title: string
      author: string,
      description: string,
      status: number,
      priority: number
    };
const NewTask: FC<Props> = ({ authors, onFinish }) => {
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const [description, setDescription] = useState("");
  const [status, setStatus] = useState(false);
  const [priority, setPriority] = useState(false);

    const sendTask = () => {
        let newTask<ITask> = {
          title: title,
          author_name: author,
          description: description,
          status: +status,
          priority: priority
        };
        
        console.log(newTask)
      }
}
Tags:

2

Answers


  1. 0

    You can type your state in functional component like below:

    const [name, setName] = useState<string>("")
    Login or Signup to reply.
  2. 0

    There are a few issues with the code you provided.

    Firstly, the interface declaration should use = instead of : to assign the interface definition to the variable. So the correct way to declare the ITask interface is:

    interface ITask {
  title: string;
  author: string;
  description: string;
  status: number;
  priority: number;
}

    Secondly, the status and priority state variables are initialized with boolean values, which are not compatible with the number type expected by the ITask interface. You can either change the interface to use boolean types for those properties, or change the initial state values to 0 or 1 for status and 1 or 2 for priority, depending on the possible values that these properties can have.

    Assuming that you want to keep status and priority as number types, you can update the state initialization like this:

    const [status, setStatus] = useState(0);
const [priority, setPriority] = useState(1);

    Finally, when defining the newTask object inside the sendTask function, you should use the : syntax instead of < to assign the ITask type to the newTask variable. So the correct syntax for defining newTask is:

    let newTask: ITask = {
  title: title,
  author: author,
  description: description,
  status: status,
  priority: priority
};

    Note that I also changed author_name to author in the object definition, to match the ITask interface.

    Putting it all together, the updated code for the NewTask component would look like this:

    interface ITask {
  title: string;
  author: string;
  description: string;
  status: number;
  priority: number;
}

const NewTask: FC<Props> = ({ authors, onFinish }) => {
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const [description, setDescription] = useState("");
  const [status, setStatus] = useState(0);
  const [priority, setPriority] = useState(1);

  const sendTask = () => {
    let newTask: ITask = {
      title: title,
      author: author,
      description: description,
      status: status,
      priority: priority
    };
    
    console.log(newTask);
  };

  return (
    // render your component here
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search