TypeScript на практике

Об авторе: aoto Ant Financial Data Experience Technology Team

Резюме: я написал«Отчет об исследовании системы TypeScript», После более чем полугода реальных боев над крупномасштабным проектом JS на платформе финансовых данных Ant я накопил некоторый практический опыт программирования и идеи.

предисловие

TypeScript — это надмножество JS с определением типов, включая ES5, ES5+ и набор других функций, таких как дженерики, определения типов, пространства имен и т. д.Создан для крупномасштабных JS-приложений. Для самого TypeScript для получения дополнительной информации см.«Отчет об исследовании системы TypeScript». В этой статье описаны только некоторые полезные свойства, которые TypeScript привнес в наши реальные проекты. Наш проект основан на системе React, поэтому эта статья посвящена опыту использования системы React и TypeScript в сочетании.

React in TypeScript

При написании компонентов React в среде разработки TypeScript основным отличием от ES6 является определение свойств и состояния. Если это ES6, то, вероятно, так:

import PropTypes from 'prop-types';
class App extends React.PureComponent {
  state = {
    aState: '',
    bState: '',
  };
}

App.propTypes = {
  aProps: PropTypes.string.isRequired,
  bProps: PropTypes.string.isRequired,
};

Если он написан на TypeScript, он, вероятно, будет таким (определение интерфейса в этой статье начинается с I по умолчанию):

interface IProps {
  aProps: string;
  bProps: string;
}
interface IState {
  aState: string;
  bState: string;
}

class App extends React.PureComponent<IProps, IState> {
  state = {
    aState: '',
    bState: '',
  };
}

TypeScript поставляется с синтаксическим анализатором JSX, поэтому, чтобы в полной мере воспользоваться его собственной функцией статической проверки, для определения типов реквизитов и состояний используются дженерики. После приведенного выше определения передайте метод членаthis.props.а такжеthis.state.Intellisense и проверка типов выполняются при использовании Props и State. Вроде бы написание не сильно изменилось, но у TypeScript большое преимущество при разработке React-приложений.Свойства React-компонентов в среде TS статичны, а это значит, что их можно статически проверять и писать под IDE, поддерживающей TS. Во время процесса он может автоматически подсказывать (существует ли он и правильный ли тип)/завершение, что очень полезно для обеспечения качества кода и качества выполнения больших приложений React. **Свойство prop-types в среде ES6 является динамическим, то есть оно проверяется во время выполнения и не может автоматически запрашиваться/заполняться. Из этого следует, что в дополнение к самому JS-коду TypeScript также очень полезен для разработки компонентов React.

Redux — самая популярная библиотека управления состоянием, обычно используемая в сочетании с React. В средах TypeScript и ES6 метод написания кода Redux не сильно отличается.Одна проблема заключается в том, что функция связывания соединения React и Redux должна использовать метод написания функции, и не рекомендуется использовать метод написания декоратора. Поскольку TS не поддерживает статический анализ декораторов классов, использование декоратора для записи соединения не может использовать преимущества статического анализа TS.

const mapStateToProps = (state: {}, ownProps: IProps) => {};
const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(App);

Antd — это популярная библиотека компонентов React, которая предоставляет объявления типов TS. При написании компонентов вы можете автоматически запрашивать и проверять атрибуты. Если вы не уверены, вы можете ввести файл объявления типа для просмотра, что сократит количество обращений к онлайн-документам API. и написание атрибутов возможность ошибки.

Опыт программирования React + Redux + TypeScript:

Объектно-ориентированный дизайн

Сложное программное обеспечение требует сложного проектирования. Объектно-ориентированный подход — хороший метод проектирования. Одним из преимуществ использования TS является то, что TS предоставляет признанные в отрасли классы (также поддерживаемые ES5+), дженерики, инкапсуляцию и возможности объектно-ориентированного проектирования интерфейса. улучшить возможности объектно-ориентированного проектирования JS.

Дженерики

Проще говоря, дженерики — это обобщенные типы. Общая практика в нашем проекте в основном заключается в компонентах React, которые также заимствованы из определений React Component и PureComponent в TS. код показывает, как показано ниже:

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

P и S — дженерики, где P — Props, а S — State. Отсюда мы видим, что если мы хотим создать дизайн на основе наследования на основе компонентов React, то в игру могут вступить дженерики. Вот пример, если мы хотим разработать сложный модуль пользовательского интерфейса, есть два уровня наследования, BaseComponent наследует React.PureComponent, XComponent наследует BaseComponent, эффектXComponent extends BaseComponent extends React.PureComponent, пример кода выглядит следующим образом:

export interface IBaseProps {}

export interface IXProps {}

export class BaseComponent<
  IProps extends IBaseProps,
  IState = {}
> extends React.PureComponent<IProps, IState> {}

export class XComponent<
  IProps extends IXProps,
  IState = {}
> extends BaseComponent<IProps, IState> {}

Определением свойства (props) BaseComponent является IProps, которое наследуется от IBaseProps, поэтому свойства, определенные в IBaseProps, можно использовать в компоненте BaseComponent.

Определением свойства XComponent является IProps, которое наследуется от IXProps, а XComponent наследуется от BaseComponent, поскольку IProps наследует IBaseProps в общем определении свойства класса BaseComponent, так что два условия работают вместе в XComponent.IProps extends IXProps extends IBasePropsэффект, вы можете одновременно использовать свойства IBaseProps и IXProps в XComponent.

упаковка

Все мы знаем, что инкапсуляция очень полезна при проектировании объектно-ориентированного программного обеспечения, а инкапсуляция деталей реализации каждого модуля может эффективно управлять сложностью программного обеспечения. Помощь TS для инкапсуляции кода в основном выражается в том, что она предоставляет контроллеры доступа, аналогичные Java. имеютprivate/protected/public, мы можем самостоятельно управлять интерфейсом, который нужен классу для внешнего мира. Права доступа должны быть как можно более строгими, то есть использовать закрытые или защищенные для тех, которые не нужно подвергать внешнему миру, использовать частные, если они не должны использоваться подклассами, и использовать общедоступные для описания только интерфейсы, которые явно должны быть открыты для внешнего мира. Функция инкапсуляции особенно необходима в общедоступных классах некоторых компонентов, отличных от React.

интерфейс

Интерфейс также очень важен в объектно-ориентированном проектировании, а интерфейс — это порт, предоставляющий услуги внешнему миру. Возьмем в качестве примера общедоступный модуль класса A, который предоставляет несколько интерфейсов.findById,updateData,destroy. Затем нам нужно определить определение интерфейса, которое удобно использовать другим модулям (это немного отличается от интерфейса традиционных языков программирования, интерфейс TS не будет запускаться сам по себе):

export interface IClassA {
  findById(id: string): IModel;
  updateData(data: IModel): void;
  destroy(): void;
}

Звонивший:

const a = new IClassA();
a.findById('1');
a.updateData({ id: '1', name: 'a' });
a.destroy();

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

качество кода

статическая проверка

Теперь у популярных библиотек, таких как React, Redux, Lodash, Antd и т. д., есть объявления типов TS, а также определения полных типов нашего собственного бизнес-кода, что позволяет лучше поддерживать работоспособность всей кодовой базы. Это редкость в традиционных крупномасштабных JS-приложениях. В прошлом я всегда чувствовал, что, когда JS был сложным, мне казалось, что качество трудно гарантировать, а онлайн-операция была немного пустой.Может быть, ошибка, такая как «s», не определена, «b» не является функцией. всплывет в любой момент. Теперь со статическими проверками,я более уверен.

Фаза улучшенного проектирования

В предыдущих главах описывалось усовершенствование TS для возможностей объектно-ориентированного проектирования. Усовершенствования дизайна могут улучшить качество кода. Хороший дизайн может поддерживать ремонтопригодность и масштабируемость кода перед лицом постоянного влияния итерации спроса, что улучшает качество и работоспособность кода.

Суммировать

Многие современные веб-приложения представляют собой сложные одностраничные приложения, особенно некоторые инструментальные продукты, сложность которых постепенно приближается или даже не меньше, чем у некоторых традиционных настольных программ, таких как Word, Excel, SQL-клиент, инструменты анализа интеграции данных и т. д. И т. д. ., эти веб-приложения можно назвать крупномасштабными JS-приложениями, которые требуют совместной работы и итеративной разработки команды. Тогда эффективность совместной работы, удобочитаемость кода, ремонтопригодность, надежность и т. д. — вот на чем мы должны сосредоточиться.

Саму эффективность совместной работы трудно измерить, но ее можно объяснить сложностью и эффективностью чтения и сопровождения чужого кода. При наличии полного определения типа вкупе с умной TS IDE (такой как VS Code), исходя из практического опыта нашего проекта, читабельность и ремонтопригодность кода можно значительно улучшить. Во многих случаях проще найти некоторые проблемы и ошибки, просмотрев исходный код. Благодаря непрерывной итерации продукта время от времени повышается эффективность совместной работы всей команды.

Правила проверки ТС нашего проекта очень строгие, а это значит, что в коде таковых в принципе нет, и нужно определять конкретные типы. Для некоторых общедоступных модулей мы также строго определяем символы управления доступом, такие как private, protected и public, что означает, что код является документом, и код может объяснить, какие интерфейсы являются внешними, а какие используются внутри.

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

связанные ресурсы

• Отчет об исследовании системы TypeScript
• Практика Lyft по TypeScript
• to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/

Если вы заинтересованы в нашей команде, вы можете подписаться на колонку или отправить свое резюме на 'tao.qit####alibaba-inc.com'.replace('####', '@'). идеалы могут присоединиться~

Оригинальный адрес:GitHub.com/proto team/no…