What could be causing the error in my TypeScript function that just passed successfully?

Question

What could be causing the error in my TypeScript function that just passed successfully?

Within the app.tsx file, I have a function that looks like this:

Since the function does not return anything, I have declared the return value as void.

const addToDo = (newToDoText: string): void => {
    setToDos([...todos, { id: 4, text: newToDoText, completed: false }]);
  };

I then passed this function into a form component like so:

<ToDoForm addToDo={addToDo} />

The issue arises in the ToDoForm component when I write it in this manner:

   //Error Here
    const ToDoForm = ({ addToDo : () => void}) => {

There are two errors - one on the closing bracket }, which says an expression is expected, and another on the => arrow, which states that a semicolon is expected.

What mistake am I making here?

typescript

Answer 1

Answer №1

You appear to be attempting to merge property destructuring syntax with an object type annotation (but they should use separate syntax). Consider one of these alternative approaches:

TS Playground

// Define the props separately like so:
type ToDoFormProps = {
  addToDo: (newToDoText: string) => void;
};

// Utilize them as follows:
const ToDoForm1 = (props: ToDoFormProps) => {
  props.addToDo; // (newToDoText: string) => void
};

// Destructure the "addToDo" property in this manner:
const ToDoForm2 = ({ addToDo }: ToDoFormProps) => {/* ... */};

// Alternatively, define the props inline:
const ToDoForm3 = (props: { addToDo: (newToDoText: string) => void }) => {
  props.addToDo; // (newToDoText: string) => void
};

// Or merge the inline type and destructured property:
const ToDoForm4 = ({ addToDo }: { addToDo: (newToDoText: string) => void }) => {/* ... */};

Answer 2

You appear to be attempting to merge property destructuring syntax with an object type annotation (but they should use separate syntax). Consider one of these alternative approaches:

TS Playground

// Define the props separately like so:
type ToDoFormProps = {
  addToDo: (newToDoText: string) => void;
};

// Utilize them as follows:
const ToDoForm1 = (props: ToDoFormProps) => {
  props.addToDo; // (newToDoText: string) => void
};

// Destructure the "addToDo" property in this manner:
const ToDoForm2 = ({ addToDo }: ToDoFormProps) => {/* ... */};

// Alternatively, define the props inline:
const ToDoForm3 = (props: { addToDo: (newToDoText: string) => void }) => {
  props.addToDo; // (newToDoText: string) => void
};

// Or merge the inline type and destructured property:
const ToDoForm4 = ({ addToDo }: { addToDo: (newToDoText: string) => void }) => {/* ... */};

What could be causing the error in my TypeScript function that just passed successfully?

Answer №1

Similar questions

React.js with Typescript is throwing an error stating that a property does not exist on the child component

Type verification not functioning properly in a standalone TypeScript function

Determine the class of an object within the "keyof" parameter by utilizing both property and generic types

Ways to enhance TypeScript definitions for Node.js modules

Conditional types allow the function parameter type to be determined based on the type of another parameter

Unable to extract the 'data' property from an undefined source in React, causing an error

Tips for generating a hyperlink in a Typescript file using Angular version 16 and above

Ways to incorporate suspense with NextJS 14 - how can I do it?

Demonstrating reactivity: updating an array property based on a window event

Substitute all attributes of objects with a different designation

Tips for choosing and unchoosing rows in angular 6

Is there a way to monitor user engagement within my app without depending on external analytics platforms?

What is the best way to retrieve a cookie sent from the server on a subdomain's domain within the client request headers using getServerSideProps

Altering the dimensions of radio buttons

Encountering issues when attempting to set up graphqlExpress due to type

Creating an interface and setting a default value

Tips for resolving the error message "Cannot assign type 'string' to type '...' in NextJS"

Issues with typescript compiler when using React-beautiful-dnd

Error: Import statement cannot be used outside a module (@cucumber/cucumber) while using Node.JS, Playwright, and Cucumber framework

The asyncData and fetch functions are failing to populate the data