Help pliz, how can i solve the problem? I want to delete an element by id, but the TS compiler swears that the undefined type can come. I don't know what to do anymore. I'm just learning:(

Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.

ProjectsPage

const removeProject = (id:string) => {
projectServer.deleteProject(id);
}
return (
    <div className="projectPage">
        {projects.map(projects =>
            <ProjectItem project={projects} key={projects.id} removeProject={removeProject}/>
        )}
    </div>
);

projectItem

interface IProjectProps {
project: Project,
removeProject: (id: string) => void}
export const ProjectItem: FC<IProjectProps> = ({project, removeProject}) => {
return (
    <div className="projectItem">
        <div className="name">{project.id}</div>
        <div className="name">{project.name}</div>
        <div className="description">{project.description}</div>
        <div className="actionBar">
            <Button onClick={() = removeProject(project.id)} text="Delete"/>
        </div>
    </div>
);

class Project

export class Project {
id: string;
name: string;
description: string;
constructor() {
    this.id = '';
    this.name = '';
    this.description = '';
}}

CodePudding user response：

export class Project {
id?: string;
name?: string;
description?: string;
...

Documentation link - https://www.typescriptlang.org/docs/handbook/2/objects.html#optional-properties