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](https://stackoverflow.com/questions/61431397/how-to-define-typescript-type-as-a-dictionary-of-strings-but-with-one-numeric-i) — Terry, Feb 10 '23 at 12:51

score 1 · Answer 1 · answered Feb 10 '23 at 12:59

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.

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 ? — Romano, Feb 10 '23 at 14:06
(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 [mre] that demonstrates use cases that need to be met. — jcalz, Feb 10 '23 at 15:28

score 0 · Answer 2 · answered Feb 10 '23 at 14:27

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[];
}

Typescript error : get two type depending on each others

2 Answers2