Кто-нибудь может объяснить, почему кому-то нужны угловые скобки, когда они могут использовать двоеточие, которое гораздо удобнее для чтения?

Question

Пример использования угловых скобок: Table.jsx

import React, {FunctionComponent} from 'react';

export interface Props {
  filtered: string[][]
};

const Table:FunctionComponent<Props> = ({filtered}) => {
  console.log('filtered = ', filtered);
  return (
    <table />
  )
};

export default Table;

Пример использования реквизита Table.tsx

export interface Props {
  filtered: string[][]
};

const Table = ({filtered}:Props) => {
  console.log('filtered = ', filtered);
  return (
    <table />
  )
};

export default Table;

Зачем использовать угловые скобки, когда двоеточие выполняет работу ? Какая реальная выгода от использования угловых скобок, и почему я выбрал бы это, используя только двоеточие?

Спасибо

Answer 1

Хорошо, это не полностью отвечает на мой собственный вопрос, но становится ближе к нему. Я все еще хочу понять, почему угловая скобка используется над двоеточием. Тем не менее, что касается React - «FunctionComponent», в частности, предоставляет преимущество в том, что предоставляет тип для детей.

Пример ссылки: - https://fettblog.eu/typescript-react/children/

import React, {FunctionComponent} from 'react';

export const Tr:FunctionComponent = ({children}) => {
  return (
    <tr>
      {children}
    </tr>
  )
};

Answer 2

Теперь я понимаю вариант использования угловых скобок для типов c, но я все еще задаюсь вопросом, почему мы добавляем этот дополнительный уровень сложности.

Понимание универсального c Типа

1. Как объявить тип c тип

type MyGenericType<T> = T & { 
  name: string,
  somethingOptional?: number
};

и 3. Как вызвать обобщенный тип c, передав ему тип 'generi c' по вашему выбору и присвоив его типу переменной (ИСПОЛЬЗОВАНИЕ СЛУЧАЯ ДЛЯ ИСПОЛЬЗОВАНИЯ ANGULAR БРАКЕТЫ)

interface Person {
  age: number;
}

let person1: MyGenericType<Person>;

Пример предоставления правильных свойств сейчас этому типу?

person1 = {
  name: 'Johnson',
  somethingOptional: 21,
  age: 41,
};

Но зачем использовать тип generi c? Почему бы просто не расширить этот тип?

1. Как вызвать интерфейс

interface insteadofGenericType {
  name: string,
  somethingOptional?: number
}

Как расширить и взаимодействовать с другим интерфейсом

interface Person extends insteadofGenericType {
  age: number;
}

Как назначить тип переменной

let person2: Person;

Пример переменных свойств

person2 = {
  name: 'Johnson',
  somethingOptional: 21,
  age: 41,
};

Answer 3

Редактировать: «Зачем использовать универсальный c тип?»

A)

Одна из причин заключается в возможности использовать предоставленный тип несколькими способами. Например, в официальном определении типа из React:

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

Поскольку он определен с использованием обобщенного c, интерфейс FunctionComponent "знает" следующие вещи о реализациях интерфейса:

1. Тип первого аргумента функции
2. Тип свойства propTypes stati c
3. Тип свойства defaultProps stati c

B)

Другая причина в том, что альтернатива довольно быстро запутывается. Возьмем следующее в качестве упрощенной версии интерфейса FunctionComponent, реализованного без обобщений:

import React from 'react';

export interface FunctionComponentProps {
  children: React.ReactNode;
}

export interface FunctionComponent {
    (props: FunctionComponentProps, context?: any): React.ReactElement<any, any> | null;
}

Мы столкнемся с проблемами, когда захотим использовать этот тип:

export interface MyComponentProps extends FunctionComponentProps {
  children: boolean; // invalid - can't change interface prop type
  className: string;
}

export interface MyComponent extends FunctionComponent {
  // invalid - same problem, cannot redeclare function signature
  (props: MyComponentProps, context?: any): React.ReactElement<any, any> | null;
}

// inferred types of children and classNames is any because of the re-declarations
export const Button: MyComponent = ({ children, className }) => {
  return <button className={className}>{children ? 'YES' : 'NO'}</button>;
};

Он «работает», если ваши пользовательские типы не расширяют предоставленный тип, но вы получите очень много бесполезного шаблонного кода, если заново изобретете колесо для каждого компонента.

export interface MyComponentProps {
  children: boolean;
  className: string;
}

export interface MyComponent {
  (props: MyComponentProps, context?: any): React.ReactElement<any, any> | null;
}

export const Button: MyComponent = ({ children, className }) => {
  return <button className={className}>{children ? 'YES' : 'NO'}</button>;
};

Оригинал Ответ

Синтаксис угловых скобок предоставляет дополнительную информацию системе проверки типов, поэтому преимущества предоставляются в виде улучшенной проверки типов.

Например:

Table.tsx

import React, { FunctionComponent } from "react";

export interface Props {
  filtered: string[][];
}

const Table: FunctionComponent<Props> = ({ filtered }) => {
  console.log("filtered = ", filtered);
  // Type check fails because a ReactNode is not returned
  //return <table />;
};

Table.defaultProps = {
  // Type check fails because null is not a valid value for filtered
  filtered: null
};

export default Table;

Table_bad.tsx

import React from "react";

export interface Props {
  filtered: string[][];
}

const Table = ({ filtered }: Props) => {
  console.log("filtered = ", filtered);
  // Typescript does not know enough to complain that the render function does not return a ReactNode
  //return <table />;
};

Table.defaultProps = {
  // Typescript does not know that defaultProps should implement Props
  filtered: null
};

export default Table;

Демо

https://codesandbox.io/s/so-61508203-56xum?file= / SRC / компоненты / Table_bad.tsx