reactjs / reactjs/react-docgen

RefTypes inside Interface does not expand correctly in Typescript

Aperta
#366 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

typescript
Lingua principale
TypeScript
Stelle
3.8k
Fork
316
Merge medio
5h 7m
PR unite (30g)
4

Descrizione

Original Example (fixtures_23.tsx)

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import React, { Component } from 'react';

type BaseProps = {
  /** Optional prop */
  foo?: string,
  /** Required prop */
  bar: number
};

type TransitionDuration = number | { enter?: number, exit?: number } | 'auto';

type Props = BaseProps & {
  /** Complex union prop */
  baz: TransitionDuration
}

/**
 * This is a typescript class component
 */
export default class TSComponent extends Component<Props> {
  render() {
    return <h1>Hello world</h1>;
  }
}

The output for the above example seems to be generated correctly.

Modified example with interfaces

import React, { Component } from "react";

interface BaseProps {
  /** Optional prop */
  foo?: string;
  /** Required prop */
  bar: number;
}

type TransitionDuration = number | { enter?: number; exit?: number } | "auto";

interface Props {
  something: BaseProps;
  /** Complex union prop */
  baz: TransitionDuration;
}

/**
 * This is a typescript class component
 */
export default class TSComponent extends Component<Props> {
  render() {
    return <h1>Hello world</h1>;
  }
}
Output
{
	"description": "This is a typescript class component",
	"displayName": "TSComponent",
	"methods": [],
	"props": {
		"something": {
			"required": true,
			"tsType": {
				"name": "BaseProps"
			},
			"description": ""
		},
		"baz": {
			"required": true,
			"tsType": {
				"name": "union",
				"raw": "number | { enter?: number; exit?: number } | \"auto\"",
				"elements": [{
					"name": "number"
				}, {
					"name": "signature",
					"type": "object",
					"raw": "{ enter?: number; exit?: number }",
					"signature": {
						"properties": [{
							"key": "enter",
							"value": {
								"name": "number",
								"required": false
							}
						}, {
							"key": "exit",
							"value": {
								"name": "number",
								"required": false
							}
						}]
					}
				}, {
					"name": "literal",
					"value": "\"auto\""
				}]
			},
			"description": "Complex union prop"
		}
	}
}
Issue

props.something in the above output has only the name and not the interface which is defines.

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con l’esempio di interfaccia modificato in fixtures_23.tsx e riproduci il JSON generato per TSComponent. Traccia come viene rappresentata l’interfaccia BaseProps per props.something; il lavoro è completato quando l’output include la definizione dell’interfaccia invece del solo nome BaseProps, preservando al contempo l’output baz esistente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react, typescript
Ambito
tooling
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.