当您将返回类型方法的 output 分配给变量时，为什么 Typescript 无法推断类型？

Question

I have a reusable service so I have created a public API with documentation and types to ease the usage of clients.

interface Storable {
  setItem(key: string, value: string): any;
  getItem(key: string): string;
  removeItem(key: string): any;
}

@Injectable({
  providedIn: 'root'
})
export class DataStorageService {
   private expirableSecureLocalStorage:any;
   private secureLocalStorage:any;
   private expirableLocalStorage:any;
   constructor(/*...*/) {
    this.expirableSecureLocalStorage = this.createExpirableStorage(this.createSecureStorage(localStorage));
    this.secureLocalStorage = this.createSecureStorage(localStorage);
    this.expirableLocalStorage = this.createExpirableStorage(localStorage);
   }

   /**
   * Returns a handle to localStorage: Use when you want to compose/decorate storages.
   */
  getLocalStore(): Storable {
    return localStorage;
  }

  /**
   * Returns a handle to sesionStorage: Use when you want to compose/decorate storages.
   */
  getSessionStore(): Storable {
    return sessionStorage;
  }
  /** 
   * Recommended: Singleton - prefer for ordinary operations
   */
  getExpirableSecureLocalStorage(): Storable {
    return this.expirableSecureLocalStorage;
  }

  /** 
   * Recommended: Singleton - prefer for ordinary operations
   */
  getSecureLocalStorage(): Storable {
    return this.secureLocalStorage;
  }

  /** 
   * Recommended: Singleton - prefer for ordinary operations
   */
  getExpirableLocalStorage(): Storable {
    return this.expirableLocalStorage;
  }

  //...

}

Then in a client:

@Injectable({
  providedIn: 'root'
})
export class FeatureService {

  expirableSecureLocalStorage:any;

  constructor(private apiService: ApiService, private dataStorageService: DataStorageService) {  
    this.expirableSecureLocalStorage = dataStorageService.getExpirableSecureLocalStorage();                                 
  }
 
  async getFeatures(keyname: string) {
    let features: any;
    let feature: any;
    try {
      let featuresLocalData = this.expirableSecureLocalStorage.getItem("features");
      //...
    }
    //...
   }

When this code has evolved to current status, I have realized that when I have added the type Storable to DataStorageService , vscode's autocomplete/intellisense has started to suggest methods. However, in the client when I keep the method's dataStorageService.getExpirableSecureLocalStorage() which returns a Storable result in a reference variable expirableSecureLocalStorage:any and when I try to use a method of it like getItem as this.expirableSecureLocalStorage.getItem("features") , vscode does not offer getItem and other two methods directly.

Why can't typescript infer the type of the reference variable which is assigned to the result of the method which has a return type?

What should I have to do to make vscode suggest methods that is available?

Answer 1

Your code expirableSecureLocalStorage:any; tells typescript that whatever you put in expirableSecureLocalStorage , it should handle it as "anything", effectively removing its type.

You shoud export your Storable interface and declare expirableSecureLocalStorage like this:

expirableSecureLocalStorage: Storable;

Answer 2

Why can't typescript infer the type of the reference variable which is assigned to the result of the method which has a return type?

Because you have explicitly told it to not infer a type by explicitly giving the type yourself .