使用Typescript引發的React Relay（react-relay）引發TypeError：對象原型可能只是一個Object或null：undefined

Question

當我嘗試實例化一個擴展爲Relay.Mutation的類時，我遇到了一個非常奇怪的TypeError，它帶有react-relay。我已使用create-react-app my-app --scripts-version=react-scripts-ts創建了一個簡單的Typescript項目來演示此問題。

每當我跑yarn start，這是我所看到的：

這個錯誤並沒有真正意義的我： TypeError: Object prototype may only be an Object or null: undefined

我只是試圖實例我自己擴展的一個新實例Relay.Mutation類。我對React Relay世界和ES6/Typescript一般都很陌生，所以它可能是我錯過的一些愚蠢的東西。

在這個簡單的項目中，我直接使用DefinitelyTyped repository中定義的示例類。

我不應該能夠使用類，像這樣：

const atm = new AddTweetMutation({ text: 'asdf', userId: '1123' }); 

這裏是AddTweetMutation.tsx類的樣子：

import * as Relay from 'react-relay'; 

interface Props { 
    text: string; 
    userId: string; 
} 

interface State { 
} 

export default class AddTweetMutation extends Relay.Mutation<Props, State> { 

    public getMutation() { 
    return Relay.QL`mutation{addTweet}`; 
    } 

    public getFatQuery() { 
    return Relay.QL` 
      fragment on AddTweetPayload { 
       tweetEdge 
       user 
      } 
     `; 
    } 

    public getConfigs() { 
    return [{ 
     type: 'RANGE_ADD', 
     parentName: 'user', 
     parentID: this.props.userId, 
     connectionName: 'tweets', 
     edgeName: 'tweetEdge', 
     rangeBehaviors: { 
     '': 'append', 
     }, 
    }]; 
    } 

    public getVariables() { 
    return this.props; 
    } 
} 

這裏是整個Hello.tsx陣營組成：

import * as React from 'react'; 
import AddTweetMutation from '../mutations/AddTweetMutation'; 

export interface Props { 
    name: string; 
    enthusiasmLevel?: number; 
} 

class Hello extends React.Component<Props, {}> { 
    render() { 

    const atm = new AddTweetMutation({ text: 'asdf', userId: '1123' }); 
    console.log(atm); 

    const { name, enthusiasmLevel = 1 } = this.props; 

    if (enthusiasmLevel <= 0) { 
     throw new Error('You could be a little more enthusiastic. :D'); 
    } 

    return (
     <div className="hello"> 
     <div className="greeting"> 
      Hello {name + getExclamationMarks(enthusiasmLevel)} 
     </div> 
     </div> 
    ); 
    } 
} 

export default Hello; 

// helpers 

function getExclamationMarks(numChars: number) { 
    return Array(numChars + 1).join('!'); 
} 

這就是我的package.json的樣子：

{ 
    "name": "my-app", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "@types/jest": "^20.0.6", 
    "@types/node": "^8.0.19", 
    "@types/react": "^16.0.0", 
    "@types/react-dom": "^15.5.2", 
    "@types/react-relay": "^0.9.13", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-relay": "^1.1.0", 
    "react-scripts-ts": "2.5.0" 
    }, 
    "devDependencies": {}, 
    "scripts": { 
    "start": "react-scripts-ts start", 
    "build": "react-scripts-ts build", 
    "test": "react-scripts-ts test --env=jsdom", 
    "eject": "react-scripts-ts eject" 
    } 
} 

Here's the project to github

更新：分型目前不能有效反應繼電器> 1.x的請參閱thread on github for this issue。我也使用解決方法更新了我的回購。

Answer 1

問題是，react-relay@1.1.0已經改變了它的API和@types/react-relay@0.9.13已過時。

TypeScript根據可用的類型定義靜態分析您的代碼。所以，即使你已經過時了，TypeScript也不知道，只是基於它而行動。

爲了解決這個問題，您可以：

• 貢獻@types/react-relay在https://github.com/DefinitelyTyped/DefinitelyTyped在https://github.com/DefinitelyTyped/DefinitelyTyped更新其分型就可以了
• 文件的問題，看看是否有人能幫助更新分型。
• 更新
• 不使用@types/react-relay，做一個declare module "react-relay"將其標記爲any類型（你將失去類型安全和IDE的支持，但自己在本地使用「模塊增強」（https://www.typescriptlang.org/docs/handbook/declaration-merging.html）的分型，如果分型不正確，無論如何，這並不重要）。

對於最後一個選項，這樣做：

// custom-typings/react-relay.d.ts 
declare module 'react-relay' 

// tsconfig.json 
{ 
    "include": [ 
    "custom-typings" 
    ] 
}