Ionic3中修复‘Property sellerDto does not exist on type Object’错误

Hey there, let's sort out this TypeScript type error you're hitting when fetching data from your API in Ionic 3. The root issue here is that TypeScript doesn't know the structure of the data coming back from your http.post call—it defaults to treating the response as a generic Object, which doesn't have a sellerDto property in its type definition. Even though you declared userData as any, the error pops up because you're directly accessing data.sellerDto before assigning it to userData, and TypeScript is checking the type of the raw API response.

Here are a few solid solutions to fix this:

1. Define a Type Interface (Recommended) #

Creating a TypeScript interface for your API response gives you type safety and eliminates the error. This is the best practice because it makes your code more maintainable and catches potential typos early.

First, add these interfaces somewhere in your component file (or a separate types file):

interface UserTypeDto {
  defaultLanguage: string;
}

interface SellerDto {
  userTypeDto: UserTypeDto;
}

interface LoginResponse {
  isLoggedIn: boolean;
  userType: string;
  sellerDto?: SellerDto; // Optional since you check if it's undefined
}

Then update your http.post call to use this interface as the generic type, and adjust the subscribe callback:

self.http.post<LoginResponse>(url, paramData, headers).subscribe(data => {
  this.userData = data;
  if(this.userData.isLoggedIn) {
      if(this.userData.userType === "seller" && this.userData.sellerDto){
        // Now TypeScript recognizes sellerDto exists here
        self.localStorage.set("defaultLanguage", this.userData.sellerDto.userTypeDto.defaultLanguage);
      }
    } else {
      console.log("user is no valid");
    }
});

2. Assert the Response as any (Quick Fix) #

If you don't want to define interfaces right now, you can tell TypeScript to treat the API response as any by using a type assertion. This skips type checking for that value:

self.http.post(url, paramData, headers).subscribe((data: any) => {
  this.userData = data;
  if(this.userData.isLoggedIn) {
      if(this.userData.userType === "seller" && this.userData.sellerDto){
        self.localStorage.set("defaultLanguage", data.sellerDto.userTypeDto.defaultLanguage);
      }
    } else {
      console.log("user is no valid");
    }
});

3. Update the userData Assignment and Access #

Alternatively, since you're assigning data to this.userData (which is any), you can use this.userData instead of data when accessing sellerDto in the localStorage call. This works because userData is typed as any, so TypeScript won't complain:

self.http.post(url, paramData, headers).subscribe(data => {
  this.userData = data;
  if(this.userData.isLoggedIn) {
      if(this.userData.userType === "seller" && this.userData.sellerDto){
        self.localStorage.set("defaultLanguage", this.userData.sellerDto.userTypeDto.defaultLanguage);
      }
    } else {
      console.log("user is no valid");
    }
});

Quick Note on Your Code #

I noticed you have escaped double quotes (\"seller\") in your code—those should be regular double quotes ("seller") since you're writing in a TypeScript file, not a string literal. The escaped quotes might cause unexpected behavior, so be sure to fix those too!

内容的提问来源于stack exchange，提问作者Kapil Soni