Typescript error : get two type depending on each others

Question

I have to type : School and Campus. But one School can have many campuses and one Campus can only have one school.

In my code, I need to manipulate either a Campus with its School data embedded in it, or a School with an embedded array with its Campuses data in it. This is how I implemented my types and interfaces.

    type Campus = {
      zip_code: number;
      address: string;
      name: string;
      [key: string]: string | number;
    };
    
    type School = {
      name: string;
      interests: number;
      contactEmail: string;
      [key: string]: string | number;
    };
    
    interface CampusSchool extends Campus {
      school: School;
    }
    
    interface SchoolCampuses extends School {
      campuses: Campus[];
    }

This gives me the error "The "school" property of type "School" cannot be assigned to the index type "string", "string | number".ts(2411)".
I tried another way to create y interface, based on this answer : TS 2411 - getting errors property 'propertyName' of type 'string' is not assignable to string index type :

    interface CampusSchool extends Campus {
      school: { [schoolData: string]: {
        data: School;
        }
      }
    }

However, this doens't work and I still have my error. Also, I feel like it is not the proper way to do it so I ask for your help and advices. Thank you in advance for your help.

Does this answer your question? How to define Typescript type as a dictionary of strings but with one numeric "id" property — Terry
– Terry, Commented Feb 10, 2023 at 12:51

Mert · Accepted Answer · 2023-02-10 12:59:22Z

1

In your implementation, the issue is that you are trying to assign the "school" property of type "School" to the index type "string | number". To resolve this issue, you can modify the "School" type and add the "school" property to it with a specific type:

type Campus = {
  zip_code: number;
  address: string;
  name: string;
};

type School = {
  name: string;
  interests: number;
  contactEmail: string;
  school: CampusSchool;
};

interface CampusSchool extends Campus {
  school: School;
}

interface SchoolCampuses extends School {
  campuses: Campus[] | [];
}

This way, you are not using the index type and the error should be resolved.

Also, for the SchoolCampuses interface, you can define the campuses property with a type of Campus[]. The | [] is not necessary because Campus[] is already an array type, so it will be an empty array by default if no campuses are specified.

answered Feb 10, 2023 at 12:59

Mert

1313 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Romano Over a year ago

In another place of my code, I have value={formData[field.name as keyof School]}, but value is type of "string | number". So I have an error because School has now types of "string | number | Campus[]". Do you know a way to tell typescript that formData[field.name as keyof School] will be only type of string or number ?

jcalz Over a year ago

(I'm not the OP or the answerer) This is the right answer to the question as asked; if you have a reason why this doesn't work for you, please edit the code in the question to be a minimal reproducible example that demonstrates use cases that need to be met.

Romano · Accepted Answer · 2023-02-10 14:27:41Z

0

I think that this isn't the right implementation of what I am trying to achieve. I want to use the School sometimes a School only, campuses aside, and sometime as a School with Campuses. So instead of crossing my types weirdly, I am just going to create to different type for different uses.

type Campus = {
  zip_code: number;
  address: string;
  name: string;
};

type School = {
  name: string;
  interests: number;
  contactEmail: string;
  school: CampusSchool;
};

type CampusSchool = Campus & {
  school: School;
};

type SchoolCampuses = School & {
  campuses: Campus[];
}

answered Feb 10, 2023 at 14:27

Romano

479 bronze badges

Collectives™ on Stack Overflow

Typescript error : get two type depending on each others

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related