React Typescript Is Not Assignable to Parameter of Type

Typescript error argument of type {} is not assignable to parameter of type User | User () => User

In your first example, your object is missing the required properties or is not instanceof User.

In your 2nd example, thats just an empty array so that will work. In that case, User describes the type requirement for the items.

Argument of type 'undefined' is not assignable to parameter of type 'string | Blob'.ts(2345)

I don't know why "Type File" dose not have "lastModifiedDate", so I use "&".

const [selectedFile, setSelectedFile] = useState<File & { lastModifiedDate: Date }>();
// File extends Blob
formData.append('File', selectedFile as Blob);

Argument of type is not assignable to parameter of type Typescript Error

Your issue lies on how you're mapping the rankings object.

You should replace it like this:

Object.keys(rankings).map((name, index) => {
    const revenue = rankings[name];         
    return (
        <tr key={index}>
            <td>{index + 1}</td>
            <td>{name}</td>
            <td>{revenue}</td>
        </tr>
    );
})

Keep in mind that Object.keys(obj) returns an array of the keys from the obj object. You're trying to consume that function as if it was returning an array of {name, revenue} objects.

Argument of type 'File' is not assignable to parameter of type 'SetStateAction<string>'

How about declaring File type for your useState instead of String '';

 const [logo, setImage] = useState<File | null>(null);

  const handleImageUpload = (evt: React.ChangeEvent<HTMLInputElement>) => {
    if (evt.target.files != null) {
      setImage(evt.target.files[0]); //error
    }
  };

Argument of type 'File' is not assignable to parameter of type 'never'. React with TypeScript

When using the useState hook without an explicit generic, TypeScript will try to infer the type from the initial passed value.

Since your initial value includes an empty array (for images), TypeScript is unable to determine the type of the values that will be in that array and so assigns it the type never.

To fix this, explicitly specify the type of your state when you initialize it:

const [colorsAndImages, setColorsAndImages] = useState<{images: File[], colors: string}[]>([{ images: [], colors: '' }])

React typescript is not assignable to parameter of type

The problem is not related to react, its related to how Typescript infers string literal types. Typescript will not infer string literal types unless it has a reason to do so.

In this case initialFixtures is untyped. So typescript has no reason to infer name as 'Liverpool' | 'Man Utd' so it infers it as string. When you later try to assign initialFixtures with its inferred type to Fixture[] the assignment fails (since string is not assignable to Team):

type Team =  'Liverpool' | 'Man Utd';

type Fixtures = {
    teams: {
        home: {
            name: Team;
        },
        away: {
            name: Team;
        },
    };
    winner: Team;
};

const initialFixtures= [
    {
        teams: {
            home: {
                name: 'Liverpool',
            },
            away: {
                name: 'Man Utd',
            },
        },
        winner: 'Liverpool',
    },
];
let o: Fixtures[] = initialFixtures; // error here 
// Type '{ teams: { home: { name: string; }; away: { name: string; }; }; winner: string; }[]' is not assignable to type 'Fixtures[]'.

The simple solution is to type initialFixtures and not ask the compiler to infer anything and just check the object literal):

const initialFixtures: Fixtures[]= [
    {
        teams: {
            home: {
                name: 'Liverpool',
            },
            away: {
                name: 'Man Utd',
            },
        },
        winner: 'Liverpool',
    },
];
let o: Fixtures[] = initialFixtures; //ok

React Typescript - Argument of type is not assignable to parameter of type

const [user, setUser] = useState(null);

Since you havn't given this a type, typescript has to try to infer it. It sees you passed in a null, so it assumes this state is (and always will be) null. Instead, you need to specify the type, as in:

interface UserData {
  username: string;
  password: string;
  prevState: null
}

//...
const [user, setUser] = useState<UserData | null>(null);

React onclick Argument of type 'EventTarget' is not assignable to parameter of type 'Node'

The event interfaces exported by React are for React event handler props, not addEventListener handlers. For those, don't import MouseEvent from React and you'll get the DOM global interface for it instead, which works with addEventListener. And yes, it's confusing. :-)

But the second issue (which actually may be your main issue) is that the DOM global MouseEvent defines target as an EventTarget, not as a Node. In your case, it'll always be a Node (specifically, an Element), but that's how the DOM type is defined. To deal with that, you have at least two choices:

Purist

You could go really purist (I do) and use a type assertion function to assert that target is a Node:

// In a utility library:
function assertIsNode(e: EventTarget | null): asserts e is Node {
    if (!e || !("nodeType" in e)) {
        throw new Error(`Node expected`);
    }
}

// And then in your component:
const closeSelectBox = ({target}: MouseEvent): void => {
    assertIsNode(target);
    if (!searchOptionWrapRef.current?.contains(target)) {
        setOpenSelectBox(false);
    }
};

Playground link

Concise and Pragmatic

You know that target is a Node and isn't null, so you could use a type assertion (target as Node):

const closeSelectBox = ({target}: MouseEvent): void => {
    if (!searchOptionWrapRef.current?.contains(target as Node)) {
        setOpenSelectBox(false);
    }
};