TypeScriptを使用したReactコンポーネントのデフォルトプロパティ値

Question

Typescriptを使用してコンポーネントのデフォルトプロパティ値を設定する方法がわかりません。

この

は、ソースコードである：

class PageState 
{ 
} 

export class PageProps 
{ 
    foo: string = "bar"; 
} 

export class PageComponent extends React.Component<PageProps, PageState> 
{ 
    public render(): JSX.Element 
    { 
     return (
      <span>Hello, world</span> 
     ); 
    } 
} 

そして、私はこのようなコンポーネントを使用しようとすると：

ReactDOM.render(<PageComponent />, document.getElementById("page")); 

を私はプロパティfooが欠落しているというエラーを取得します。私はデフォルト値を使いたい。私はまた、コンポーネント内でstatic defaultProps = ...を使用しようとしましたが、疑いの余地がありませんでした。

src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<PageComponent> & PageProps & { children?: ReactEle...'. 

どのようにデフォルトプロパティ値を使用できますか？私の会社が使用している多くのJSコンポーネントは、そのコンポーネントに依存していて使用していません。

Answer 1

static defaultPropsを使用すると正しいです。また、小道具や州のためにクラスではなくインターフェースを使用し、?を使用してオプションのプロパティをマークする必要があります。活字体2.1ため

更新：今、TSは、TSがあなたのdefaultPropsに必要な小道具を逃す文句なしあなたは自分のオプションの小道具のためのデフォルト値を提供することができるようにあなたのdefaultPropsためPartial<Props>アノテーションを使用することをお勧めしますpartial typesサポートしていること。ここで

は完全な例です：（。これは、あなたが本当にただ、オプションの小道具のデフォルトをしたいにもかかわらず、Partial<>を省略し、すべての必要な小道具のデフォルト値を供給することにより、事前に活字体2.1を働いていた）

interface PageProps { 
    foo?: string; 
    bar: number; 
} 

export class PageComponent extends React.Component<PageProps, {}> { 
    public static defaultProps: Partial<PageProps> = { 
     foo: "default" 
    }; 

    public render(): JSX.Element { 
     return (
      <span>Hello, world</span> 
     ); 
    } 
} 

更新Stateless Functional Components

のためにあなたは、機能COMPONにdefaultPropsを使用することができますエントだけでなく、しかし、あなたは活字体が機能して約defaultPropsを知っているように、StatelessComponentインターフェイスにあなたの関数を入力する必要があります。StatelessComponent.defaultPropsはすでにとして指定されているので、あなたがどこでもPartial<PageProps>を使用する必要がないこと

interface PageProps { 
    foo?: string; 
    bar: number; 
} 

const PageComponent: StatelessComponent<PageProps> = (props) => { 
    return (
    <span>Hello, {props.foo}, {props.bar}</span> 
); 
}; 

PageComponent.defaultProps = { 
    foo: "default" 
}; 

注意TS 2.1+に部分的である。

別の素敵な選択肢は、（これは私が使用するものである）あなたのpropsパラメータをdestructureと直接デフォルト値を割り当てることです：

const PageComponent: StatelessComponent<PageProps> = ({foo = "default", bar}) => { 
    return (
    <span>Hello, {foo}, {bar}</span> 
); 
}; 

次にあなたがすべてでdefaultPropsを必要としません！ がの場合、関数コンポーネントにdefaultPropsを指定すると、Reactは常にdefaultPropsの値を明示的に渡すので、デフォルトのパラメータ値よりも優先されます（したがって、パラメータは決して定義されないため、デフォルトのパラメータは決して使用されません）。あなたはどちらか一方を使用し、両方を使用することはありません。

You either have to make all interface properties optional (bad) or specify default value also for all required fields (unnecessary boilerplate) or avoid specifying type on defaultProps.

実際にあなたが活字体のinterface inheritanceを使用することができます受け入れ答えに@pamelusによってコメントから

Answer 2

。結果として得られるコードはほんの少し冗長です。活字体2.1+で

interface OptionalGoogleAdsProps { 
    format?: string; 
    className?: string; 
    style?: any; 
    scriptSrc?: string 
} 

interface GoogleAdsProps extends OptionalGoogleAdsProps { 
    client: string; 
    slot: string; 
} 


/** 
* Inspired by https://github.com/wonism/react-google-ads/blob/master/src/google-ads.js 
*/ 
export default class GoogleAds extends React.Component<GoogleAdsProps, void> { 
    public static defaultProps: OptionalGoogleAdsProps = { 
     format: "auto", 
     style: { display: 'block' }, 
     scriptSrc: "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" 
    }; 

Answer 3

、部分< T>の代わりに、あなたの界面特性をオプションにしてください。

export interface Props { 
    obj: Model, 
    a: boolean 
    b: boolean 
} 

public static defaultProps: Partial<Props> = { 
    a: true 
};