TypeScript錯誤TS2339，但屬性確實存在

Question

當我使用gulp編譯下面的TypeScript代碼時，我得到：錯誤TS2339：屬性'accessToken'在類型'Response'上不存在。 Visual Studio 2015中的ErrorList窗口報告data.accessToken和data.expiryDate的錯誤。當我註釋引用變量data的兩行時，代碼將運行，調試程序顯示data不是「響應」類型，而實際上包含屬性data.accessToken和data.expiryDate。在Visual Studio中，當我將鼠標懸停在變量data上時，工具提示正確報告data的類型爲any。

爲什麼TypeScript無法正確傳輸，我該如何解決問題？爲什麼TypeScript認爲data的類型是Response而不是any？ 我正在使用TypeScript 2.1.4。 http.fetch使用奧裏利亞獲取客戶documented here

/// <reference path="../typings/index.d.ts" /> 
import 'fetch'; 
import {HttpClient, json} from 'aurelia-fetch-client'; 
import {inject} from 'aurelia-framework'; 
import {BearerToken} from './common/bearer-token'; 
export class ApiToken 
{ 
... 
    public refreshToken(): Promise<BearerToken> 
    { 
     let token: BearerToken = new BearerToken(); 
     token.accessToken = "no_data"; 
     token.expiryDate = Date.now(); 

     return this.http.fetch('/Account/getToken') 
      .then(response => response.json()) 
      .then(data => 
      {     
       console.log('ApiToken.refreshToken returned data: ' + data); 

       // The next two lines cause build errors. 
       // When commented out the code runs and the debugger shows that 
       // data.accessToken and data.expiryDate do exist on data. 
       token.accessToken = data.accessToken; 
       token.expiryDate = data.expiryDate;   

       return token; 
      }) 
      .then((t) => { return this.saveToken(t) }); 
    } 
... 
} 

這裏是我的tsconfig.json文件：

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "rootDir": "src", 
    "outDir": "dist", 
    "sourceMap": true, 
    "target": "es5", 
    "module": "amd", 
    "declaration": false, 
    "noImplicitAny": false, 
    "removeComments": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "moduleResolution": "node", 
    "lib": ["es2015", "dom"], 
    "baseUrl": "./", 
    "paths": { 
     "src/*": ["src/*"] 
    } 
    }, 
    "filesGlob": [ 
    "./src/**/*.ts", 
    "./test/**/*.ts", 
    "./typings/index.d.ts", 
    "./custom_typings/**/*.d.ts", 
    "./jspm_packages/**/*.d.ts" 
    ], 
    "exclude": [ 
    "node_modules", 
    "jspm_packages", 
    "dist", 
    "build", 
    "test" 

    ], 
    "atom": { 
    "rewriteTsconfig": false 
    } 
} 

我試着用以下指定的data的類型，但它並沒有解決問題，雖然該錯誤消息是不同的，兩者如下所示：

interface TokenResult 
{ 
    accessToken: string; 
    expiryDate: string; 
}  

.... 

public refreshToken(): Promise<BearerToken> 
{ 
    let token: BearerToken = new BearerToken(); 
    token.accessToken = "no_data"; 
    token.expiryDate = new Date(Date.now().toString()); 

    return this.http.fetch('/Account/getToken') 
     .then(response => response.json()) 
     .then((data: TokenResult) => 
     {     
      console.log('ApiToken.refreshToken returned data: ' + data); 

      token.accessToken = data.accessToken; 
      token.expiryDate = new Date(data.expiryDate); 

      return token; 
     }) 
     .then((t) => { return this.saveToken(t) }); 
} 

而錯誤是：

error TS2345: Argument of type '(data: TokenResult) => BearerToken' is not assignable to parameter of type '(value: Response) => BearerToken | PromiseLike<BearerToken>'. 
    Types of parameters 'data' and 'value' are incompatible. 
    Type 'Response' is not assignable to type 'TokenResult'. 
     Property 'accessToken' is missing in type 'Response'. 

Answer 1

我從gitter的貢獻者那裏找到了答案。一個演員陣容到any，然後演員陣容到TokenResult做的伎倆，如下...

return this.http.fetch('/Account/getToken') 
    .then(response => response.json()) 
    .then((data: any) => 
    { 
     console.log('ApiToken.refreshToken returned data: ' + data); 

     token.accessToken = (<TokenResult>data).accessToken; 
     token.expiryDate = (<TokenResult>data).expiryDate; 

     return token; 
    }) 
    .then((t) => { return this.saveToken(t) });