Definitelytyped: ts2.0の厳密なnullチェックを使用したdefaultPropsの実装

デフォルトの小道具は実行時に設定されるので、型アサーション以外にこれをうまく処理する方法があるかどうかはわかりません。 （もちろん、厳密なnullチェックをいつでも無効にすることができます。）

これがあなたの例でそれを回避することができるかもしれない方法です：

interface TestProps { x?: number}

class Test extends React.Component<TestProps, null> {

    static defaultProps =  {x: 5};

    render() {
        const x: number = (this.props.x as number);
        return <p>{x}</p>;
    }
}

https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertionsを参照してください

これをより優雅に処理する方法があれば、私はそれを聞いてみたいです。

免責事項：私はTypeScriptを約3日間使用していますが、疲れていて、おそらく何について話しているのかわかりません。

3つのジェネリック型定義を含むように型定義ファイルを更新すると+1000。

これは、以前は---strictNullChecksがなくても問題ありませんでしたが、今では多くのコンポーネントクラスで間違いなく問題になります。

厳密なnull型チェックの性質により、Flowも同様のクラス実装を実装します。
https://github.com/facebook/flow/blob/master/lib/react.js#L16
https://github.com/facebook/flow/blob/master/lib/react.js#L104 -L105

3番目のジェネリックを追加するためにhttps://github.com/Microsoft/TypeScript/issues/2175が解決されるのを待つ以外は、ここには多くのオプションがないようです。
そのような（重大な）変更（つまりclass Component<P, S, D> ）がレビューアによって承認されることはないと思います。
@johnnyreilly @bbenezech @pzavolinsky皆さんはそれについて意見がありますか？

@ r00gerは同意しました。 定義を変更することはあまりにも破壊的です。

Partialの使用を検討した人はいますか？

のように：

    interface ComponentClass<P> {
-        defaultProps?: P;
+        defaultProps?: Partial<P>;
    }

上記のPartialのものを気にしないでください。

部分的は、部分的なpropTypes問題を宣言する方法のみを解決します。 renderの内部では、 lastNameはまだタイプstring | undefinedです。 これを回避するには、以下に示すように、 asまたは!を使用して文字列をキャストする必要があります。 それは機能しますが、理想的ではありません。

interface IUser {
    firstName: string
    lastName?: string
}
export class User extends React.Component<IUser, {}> {
    public static defaultProps: Partial<IUser> = {
        lastName: 'None',
    }

    public render () {
        const { firstName, lastName } = this.props
        // error
        lastName.toUpperCase()

        return (
            <div>{firstName} {lastName}</div>
        )
    }
}

TSを使い始めたばかりです。 私は何かが足りないのですか？

誰かがtypesとdefaultPropsの良い解決策を持っているなら、私はすべての耳です。 現在、これを行っています。

interface Props {
  firstName: string;
  lastName?: string;
}

interface DefaultProps {
  lastName: string;
}

type PropsWithDefaults = Props & DefaultProps;

export class User extends React.Component<Props> {
  public static defaultProps: DefaultProps = {
    lastName: 'None',
  }

  public render () {
    const { firstName, lastName } = this.props as PropsWithDefaults;

    return (
      <div>{firstName} {lastName}</div>
    )
  }
}

+1
私は現在この問題と戦っています。

+1

+1

3番目のタイプのパラメーターを追加することに加えて、デフォルトの小道具に対して小道具を比較する機能が必要になります。 幸いなことに、TS 2.4の時点で、これが可能になりました。 https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-319495340を参照してください

IMHOが3番目のパラメーターを追加することは大したことではありません。また、Flowチームはそれを知っており、最近、より良いものに変更しました。 このようなことをどのように処理するかを知ることは、タイプチェッカーの責任であるはずです。

誤解しないでください、私はTypescriptが大好きですが、Flow 0.53以降、React開発には優れていると言わざるを得ませんhttps://medium.com/flow-type/even-better-support-for-react-in-flow- 25b0a3485627

@Hotell FlowにはReact.Componentの3つの型パラメーターがあります-FlowにリンクしたMediumの記事ごとに、サブクラスアノテーションからクラス型パラメーターを推測できます-きちんとした言語レベルの機能TSはサポートしていませんが、型はサポートしていません-宣言の考慮事項AFAIK。

@aldendaniels

フローには、React.Componentの3つのタイプパラメーターがあります

いいえ、0.53より前はそのようでしたが、現在はそうではありません:) https://github.com/facebook/flow/commit/20a5d7dbf484699b47008656583b57e6016cfa0b#diff -5ca8a047db3f6ee8d65a46bba44712​​36R29

@Hotellああ、確かに！ 私を訂正してくれてありがとう。

ただし、TSには、デフォルトの小道具のタイプを推測する方法はありません。 3つのタイプのパラメーターのアプローチを使用すると、TypeScriptチームからのアップストリームの変更をブロックすることなく、正しい入力を取得できる可能性があります。

型パラメータとしてtypeof MyComponent.defaultPropsを渡さずに、推定された型の静的プロパティを使用する方法を知っていますか？

このテーマに関するニュースはありますか？ 誰かがPRを行って、3番目のタイプのパラメーターを追加し、 https： //github.com/Microsoft/TypeScript/issues/12215#issuecomment -319495340を使用しますか？

賛成の問題：同じ問題

+1

私もこれに遭遇し、（これが適切に修正されるまで） static defaultPropsの使用を控え、代わりにヘルパーHOCを使用することを選択しました。

ファイルcomponents / helpers / withDefaults.tsx ：

import * as React from 'react'

export interface ComponentDefaulter<DP> {
  <P extends {[key in keyof DP]?: any}>(Component: React.ComponentType<P>): React.ComponentType<
    Omit<P, keyof DP> &         // Mandate all properties in P and not in DP
    Partial<Pick<P, keyof DP>>  // Accept all properties from P that are in DP, but use type from P
  >
}

export default function withDefaults<DP>(defaultProps: DP): ComponentDefaulter<DP> {
  return Component => props => <Component {...defaultProps} {...props}/>
}

今私は使用することができます：

ファイルcomponents / Button.tsx ：

import * as React from 'react'
import withDefaults from './helpers/withDefaults'

export interface ButtonProps {
  label: string
  onPress: () => any
}

export const defaultProps = {
  onPress: () => undefined
}

class Button extends React.Component<ButtonProps> {
  // ...
}

export default withDefaults(defaultProps)(Button)

3つの潜在的な欠点（私が考えることができる）：

1. HOCが必要ですが、これはReactの世界では非常に一般的なパラダイムであるため、問題ないようです。
2. 小道具をジェネリック型パラメーターとして宣言する必要があり、 propsプロパティからの推論に依存することはできません。
3. defaultPropsのタイプの暗黙的なチェックはありませんが、これはexport const defaultProps: Partial<ButtonProps> = {...}を指定することで修正できます。

@vsaarinenによると、私はprops: Props & DefaultPropsで基本クラスを記述しているので、基本クラスを拡張するクラス全体で、 this.props as PropsWithDefaults $を使用せずにthis.propsを直接使用できます。

このような：

import * as React from 'react'

export class Component<P = {}, S = {}, DP = {}> extends React.Component<P, S> {
  props: Readonly<{ children?: React.ReactNode }> & Readonly<P> & Readonly<DP>
}

export interface Props {
  firstName: string
  lastName?: string
}

export interface DefaultProps {
  lastName: string
}

export class User extends Component<Props, any, DefaultProps> {
  render() {
    const { firstName, lastName } = this.props

    // no error
    return (
      <div>{firstName} {lastName.toUpperCase()}</div>
    )
  }
}

実際には@ qiu8310は完全には機能しませんでしたが、デフォルトの小道具がオプションではないことについてコールサイトが叫ぶという問題がまだありました。 微調整で動作するようになりました

import * as React from 'react'

export class Component<P = {}, S = {}, DP = {}> extends React.Component<P, S> {
  // Cast the props as something where readonly fields are non optional
  props = this.props as Readonly<{ children?: React.ReactNode }> & Readonly<P> & Readonly<DP>
}

export interface Props {
  firstName: string
  lastName?: string
}

export interface DefaultProps {
  lastName: string
}

export class User extends Component<Props, any, DefaultProps> {
  render() {
    const { firstName, lastName } = this.props

    // no error
    return (
      <div>{firstName} {lastName.toUpperCase()}</div>
    )
  }
}

私は3番目のジェネリックで遊んで、 @ qiu8310の提案に似たものを持っていました：

// ComponentWithDefaultProps.ts
import * as React from "react";

export declare class ComponentWithDefaultProps<P, S, DP extends Partial<P>> extends React.Component<P & DP, S> {}
type redirected<P, S, DP> = ComponentWithDefaultProps<P, S, DP>;
const redirected: typeof ComponentWithDefaultProps = React.Component as any;

export const Component = redirected;

// User.ts
import { Component } from "ComponentWithDefaultProps";
export interface Props {
  firstName: string
  lastName?: string
}
export interface DefaultProps {
  lastName: string
}

export class User extends Component<Props, {}, DefaultProps> {
  public render() {
    const { firstName, lastName } = this.props;
    return <div>{firstName} {lastName.toUpperCase()}</div>;
  }
}

ただし、これらのアプローチ（私のアプローチと上記のアプローチ）の両方が、より大きな問題を引き起こします。 私の例では、作成されたコンポーネントのタイプがあります。

User: React.ComponentClass<P & DP>
User["props"]: Readonly<{ children?: React.ReactNode }> & Readonly<P & DP>

どうやら、 Userのインターフェースが間違っています。 React.ComponentClass<P & DP>は、 lastNameも必要であることを意味します。

<User firstName="" />;
//    ~~~~~~~~~~~~  Property 'lastName' is missing...

@ qiu8310の例では、タイプが異なります。

User: React.ComponentClass<P>
User["props"]: Readonly<{ children?: React.ReactNode }> & Readonly<P> & Readonly<DP>

ただし、 tscのJSXチェックはprops 'タイプに基づいているため、同じJSXで同じエラーが発生します。

<User firstName="John" />;
//    ~~~~~~~~~~~~~~~~  Property 'lastName' is missing...

面白いのは、 <User firstName="John" />がReact.createElement(User, {firstName: "John"})に変換されていることです。これは、有効なTypeScriptになります。 その場合、型チェックはComponentClassの最初の型パラメーターに依存するため、

<User firstName="Jonh" />; // doesn't work, but
React.createElement(User, { firstName: "John" }); // works

ご覧のとおり、3番目のジェネリックがあったとしても、正しいインターフェイスでコンポーネントをエクスポートするには、別のトリックを追加する必要があります。

export const User = class extends Component<Props, {}, DefaultProps> {
    // ...
} as React.ComponentClass<Props>;

<User firstName="Jonh" />; // works

したがって、3番目のジェネリックを持っていることはあまり意味がありません。

Reactの定義にマージできる良い解決策はないようです。今のところ、 ComponentWithDefaultPropsを使用し、エクスポートされたコンポーネントのタイプをアサートすることに固執しています。

export interface DefaultProps {
    lastName: string;
}
export interface Props extends Partial<DefaultProps> {
    firstName: string;
}

export type PropsWithDefault = Props & DefaultProps;

export const User: as React.ComponentClass<Props> =
class extends React.Component<PropsWithDefault> {
    render() {
        // no error
        return <div>
            {this.props.firstName}
            {this.props.lastName.toUpperCase()}
        </div>;
    }
};
// Note, we've assigned `React.Component<PropsWithDefault>` to `React.ComponentClass<Props>`

それとは別に、コンポーネントのメソッドでthis.propsタイプのすべての使用法をアサートできます（たとえば、 const { lastName } = this.props as Props & DefaultProps 、またはthis.props.lastName!.toLowerCase()のどこでも感嘆符を使用）。

私はこの議論についていくつかの例を見つけました-https：//github.com/gcanti/typelevel-ts#objectdiff

@riflerいわゆるHOCアプローチ（私はデコレータが好きです）はしばらくの間ここにありました、私たちは実行時のオーバーヘッドを追加しない解決策を考え出すことを試みます

それはいい
あなたが解決策を見つけることを願っています

何か進歩はありますか？

以下は、 @ r00gerによって言及された手法のバリエーションです。

interface IUser {
    name: string;
}
const User = class extends React.Component<IUser> {
    public static defaultProps: IUser = {name: "Foo"}
    public render() {
        return <div>{this.props.name}</div>;
    }
} as React.ComponentClass<Partial<IUser>>;
React.createElement(User, {}); // no error, will output "<div>Foo</div>"

上記のスニペットを使用しても機能しますが、匿名クラスになるため、Userで静的プロパティを使用できなくなります。 ハッキーな解決策は、次のようにクラス名をシャドウイングすることです。

// tslint:disable-next-line:no-shadowed-variable
const User = class User extends React.Component<IUser>

これで、クラス内でプライベート静的フィールドを使用できます。 パブリックスタティックはまだ使用できません。 また、tslintを消音する必要があることに注意してください。

TS 2.8の時点で、 Excludeタイプが公式にサポートされていることを言及する価値があると思いました。

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

https://github.com/Microsoft/TypeScript/pull/21847を参照してください。

したがって、必要なのはReact.createElement()で、 Propsの代わりに次のものを要求することです。

Omit<Props, keyof DefaultProps>

唯一の問題は、React宣言にはDefaultProps型がないことです。このためには、3番目の型パラメーター、または言語機能として静的メンバーの型を推測する機能が必要です。

その間、私たちは次のことを行ってきました。

/**
 * The Create type allow components to implement a strongly thed create() function
 * that alows the caller to omit props with defaults even though the component expects
 * all props to be populated. The TypeScript React typings do not natively support these.
 */
export type Create<C extends BaseComponent<any, any>, D extends {} = {}> = (
  props?: typeHelpers.ObjectDiff<C['props'], D> & React.ClassAttributes<C>,
  ...children: React.ReactNode[]
) => React.ComponentElement<any, any>;

export interface DomPropsType {
  domProps?: domProps.DomProps;
}

export class BaseComponent<P, S = {}> extends React.Component<P & DomPropsType, S> {
  static create(props?: object, ...children: React.ReactNode[]) {
    return React.createElement(this, props, ...children);
  }

  constructor(props: P & DomPropsType, context?: any) {
  ...
}

そして、すべてのコンポーネントは次のようになります。

export class InsertObjectMenu extends BaseComponent<Props, State> {
  static create: Create<InsertObjectMenu, typeof InsertObjectMenu.defaultProps>;
  static defaultProps = {
    promptForImageUpload: true,
  };
  ...
}

最後に、 create属性がすべてのコンポーネントで宣言されるように強制するlintルールがあります。 JSXは使用しないため、次を使用します。

InsertObjectMenu.create({...})

React.createElement()の代わりに。

大規模なコードベース全体でこのアプローチを使用して1年近く成功しましたが、JSXを採用したいと考えており、これが私たちの足を引っ張っています。

この「単純な問題」に多くの時間を費やしました。 これはここに残しておきますhttps://medium.com/@martin_hotell/ultimate-react-component-patterns-with-typescript-2-8-82990c516935🖖

    interface Component<P = {}, S = {}, DP extends Partial<P>=P> extends ComponentLifecycle<P, S> { }
    class Component<P, S, DP extends Partial<P> = P> {
        constructor(props: P & DP, context?: any);

        // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
        // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
        // Also, the ` | S` allows intellisense to not be dumbisense
        setState<K extends keyof S>(
            state: ((prevState: Readonly<S>, props: P) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
            callback?: () => void
        ): void;

        forceUpdate(callBack?: () => void): void;
        render(): ReactNode;

        // React.Props<T> is now deprecated, which means that the `children`
        // property is not available on `P` by default, even though you can
        // always pass children as variadic arguments to `createElement`.
        // In the future, if we can define its call signature conditionally
        // on the existence of `children` in `P`, then we should  remove this.
        private __externalProps: Readonly<{ children?: ReactNode }> & Readonly<P>;
        props: Readonly<{ children?: ReactNode }> & Readonly<P> & DP;
        state: Readonly<S>;
        context: any;
        refs: {
            [key: string]: ReactInstance
        };
    }

    class PureComponent<P = {}, S = {}, DP extends Partial<P>=P> extends Component<P, S, P> { }


interface ElementAttributesProperty { __externalProps: {}; }

最後の行を注意深く見てください。

この変更により、

interface Props {
    a: string
    b?: string
    c?: string
}

class Comp extends React.Component<Props, {}, typeof Comp.defaultProps> {
    static defaultProps = {
        b: ''
    }

    render() {
        const {a, b, c} = this.props

        let res = a.concat(b)  // ok
        let res1 = a.concat(c) //fail

        return null
    }
}



const res1= <Comp a=''/> // ok
const res3 = <Comp /> // fail

static defaultPropsを使用する場合に取得できる最善の方法です（ typeof Comp.defaultPropsを省略したい場合は、tsチェッカーを変更する必要があります）。
他のオプションは、すでに言われています-HOC、型キャスト。

これがhttps://medium.com/@martin_hotell/ultimate-react-component-patterns-with-typescript-2-8-82990c516935のアイデアに基づく私の（非常に醜い）試みです：

type ExtractProps<T> = T extends React.ComponentType<infer Q> ? Q : never;
type ExtractDefaultProps<T> = T extends { defaultProps?: infer Q } ? Q : never;
type RequiredProps<P, DP> = Pick<P, Exclude<keyof P, keyof DP>>;
type RequiredAndPartialDefaultProps<RP, DP> = Required<RP> & Partial<DP>;

type ComponentTypeWithDefaultProps<T> =
  React.ComponentType<
    RequiredAndPartialDefaultProps<
      RequiredProps<ExtractProps<T>, ExtractDefaultProps<T>>,
      ExtractDefaultProps<T>
    >
  >;

function withDefaultProps<T extends React.ComponentType<any>>(Comp: T) {
  return Comp as ComponentTypeWithDefaultProps<T>;
}

interface IProps {
  required: number;
  defaulted: number;
}

class Foo extends React.Component<IProps> {
  public static defaultProps = {
    defaulted: 0,
  };
}

// Whichever way you prefer... The former does not require a function call
const FooWithDefaultProps = Foo as ComponentTypeWithDefaultProps<typeof Foo>;
const FooWithDefaultProps = withDefaultProps(Foo);

const f1 = <FooWithDefaultProps />;  // error: missing 'required' prop
const f2 = <FooWithDefaultProps defaulted={0} />;  // error: missing 'required' prop
const f3 = <FooWithDefaultProps required={0} />;  // ok
const f4 = <FooWithDefaultProps required={0} defaulted={0} />;  // ok

@decademoon 、このソリューションを@types/reactで使用できるようですが、できますか？ つまり、通常のReact.ComponentTypeをソリューションに置き換えた場合です。
もしそうなら、多分あなたはPRを作成することができますか？

@decademoonあなたの定義は、デフォルト以外の小道具が実際にオプションのフィールドを含む場合を処理しません。

interface IProps {
  required: number;
  notRequired?: () => void;
  defaulted: number;
}

class Foo extends React.Component<IProps> {
  public static defaultProps = {
    defaulted: 0,
  };
}

私の場合、RequiredAndPartialDefaultPropsタイプを変更して、「RP」を「Required」でラップしないようにしました。

type RequiredAndPartialDefaultProps<RP, DP> = RP & Partial<DP>;

まだ適切な解決策がないか、少なくともNPMで機能するHOCがないことに驚いています。 私が何かを逃していない限り。

https://github.com/Microsoft/TypeScript/issues/23812

皆さんこんにちは。 言いたかったのですが、まだこのスレッドを読んでいるのであれば、 @ JoshuaToenyesが最も有意義で役立つ説明をしたと思います。 これは間違いなく問題ではないので、それとは何の関係もありません。 この場合、型アサーションを使用します。

@toiletpatrolは実際には、 @ decademoonのソリューション（私のわずかな修正を含む）は自動的にデフォルトの小道具をうまく処理します。 それは間違いなくReactのDT定義にマージされ、すべての人に機能標準を提供することができます。

@toiletpatrol @RobRendell https://github.com/Microsoft/TypeScript/issues/23812見ましたか？

@vkrol私はそれを見ましたが、新機能のリリースを待たずに、今すぐコードベースにdecademoonの実装をドロップすることができます。

トリッキーなケースで今のところ使用している別の回避策：

const restWithDefaults = { ...Component.defaultProps, ...rest };
return <Component {...restWithDefaults} />;

何も問題はないと思うので、ここでは汚いが簡単な回避策として残しておきます。

TS3.2とreact16.7のタイピングでこれが修正されています。 閉じてもいいですか？

@Hotell最終的にどのように処理する必要がありますか？ 私はまだこれを正しく動作させることができません

他の人の時間を節約するために、Typescript3のリリースノートへのリンクを次に示します。
JSXでのdefaultPropsのサポート

@cbergmiller申し訳ありませんが、これらはTypeScript3.1のリリースノートです🙃

React.FunctionComponentでも同じ問題が発生します

@denieler defaultPropsをReact.FunctionComponent $と一緒に使用することはお勧めしませんが、それは自然なことではありません。 デフォルトの関数パラメーターを使用することをお勧めします。

interface HelloProps {
  name?: string;
  surname?: string;
}

const HelloComponent: React.FunctionComponent<HelloProps> = ({
  name = 'John',
  surname = 'Smith',
}) => {
  return <div>Hello, {name} {surname}!</div>
};

@mgol小道具を分解したくない場合、デフォルトの関数パラメーターをどのように定義しますか？
私は次のように「デフォルト」のプロパティのみを破棄することしか考えられません。

interface HelloProps {
  name?: string;
  surname?: string;
}

const HelloComponent: React.FunctionComponent<HelloProps> = ({
  name = 'John',
  surname = 'Smith',
  ...props
}) => {
  return <div>Hello, {name} {surname}! You are {props.age} years old.</div>
};

しかし、小道具の一部だけを抽出するのは恥ずべきことだと思います。

@glecetre使用できます：

HelloComponent.defaultProps = {
    name: 'John',
    surname: 'Smith'
}

@Glinkisお願いします、 https： //github.com/reactjs/rfcs/pull/107/files#diff-20b9b769068a185d90c23b58a2095a9dR184に注意してください。

@glecetreなぜあなたはすべての小道具を分解したくないのですか？ defaultPropsを定義するよりも簡単で、入力も簡単です。 defaultPropsにエントリがある場合、必要な小道具はもう必要ない可能性があるため、外部で使用するためにエクスポートすると、クラスベースのコンポーネントの小道具タイプが問題になる可能性があります。 defaultPropsを使用することも、パラメータの破棄ではすべてJavaScriptであるため、少し不思議に思えます。