TypeScript — способ мышления

JavaScript TypeScript

Резюме:Изучите образ мышления ТС.

FundebugПерепечатано с разрешения, авторские права принадлежат оригинальному автору.

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

На самом деле, до недавнего времени я начал систематически изучать машинопись, и на это ушло около месяца до и после. До этого я также использовал TS в некоторых проектах, чтобы подражать написанию других людей, но, честно говоря, я не понимал TS до этого раунда систематического обучения. Больше месяца назад я понял, что TS — это инструмент, который может ограничивать типы, но теперь я понимаю, что TS — это не просто инструмент, его использование повлияет на то, как я думаю при написании кода.

Как ТС повлиял на мое мышление

Для фронтенд-разработчиков TS может укрепить концепцию «интерфейсно-ориентированного программирования». Мы знаем, что чуть более сложная программа неотделима от взаимодействия между разными модулями.Функции разных модулей должны быть более понятными.TS может помочь нам разобраться в разных интерфейсах.

Явный процесс абстракции модуля

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

Например, если мы используем TS для определения функции, TS потребует от нас четкого определения параметров и возвращаемых значений функции. Простое определение некоторых типов может помочь нам найти функцию функции. Например, мы устанавливаем его Тип возвращаемого значенияvoid, понятно, что мы хотим использовать побочные эффекты этой функции;

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

Конечно, использование таких инструментов, как jsdoc, также может прояснить абстракцию функций, но это не так обязательно, поэтому эффект может быть не очень хорошим, но jsdoc можно использовать как дополнение к TS.

Пишите код с большей уверенностью

TS также позволяет мне писать интерфейсный код с большей уверенностью Эта уверенность исходит от TS, который может помочь нам избежать многих ошибок, которые могут быть вызваны нашей собственной небрежностью. На самом деле, существует специальное исследование по предотвращению ошибок с помощью TS, документ под названиемTo Type or Not to Type: Quantifying Detectable Bugs in JavaScriptВ документе показано, что использование TS для статической проверки типов может помочь нам уменьшить количество ошибок как минимум на 15% (процесс исследования в этой статье также очень интересен, вы можете щелкнуть ссылку, чтобы прочитать, если вам интересно).

Пример того, как ТС внушил мне эту уверенность.

Следующий оператор, с которым все знакомы, представляет собой метод, который DOM предоставляет для получения элементов на основе идентификатора.

const a = document.getElementById("a")

Для себя до использования ТС игнорировалdocument.getElementByIdВозвращаемое значение также может бытьnull, это непреднамеренное упущение может привести к неожиданной ошибке в будущем.

Используя ТС, нам четко напомнят в редактореaЗначение может бытьnull.

Нам не обязательно иметь дело со значениямиnullслучае, использоватьconst a = document.getElementById('id')!ТС можно прямо сказать, что не будетnull, но, по крайней мере, в это время мы четко знаем, что хотим делать.

Процесс использования ТС — это процесс обучения

После использования TS я чувствую, что трачу значительно меньше времени на поиск документов через браузер. Будь то библиотека или собственный js или nodejs, или даже типы, определенные другими членами вашей команды. В сочетании с VSCode будут очень интеллектуальные напоминания, и легко увидеть точное определение соответствующего интерфейса. Процесс использования — это процесс углубления понимания.Это правда, что «интерфейсно-ориентированное программирование» более тесно связано с естественными и статическими типами.

Например, если мы используем библиотеку Color, VSCode будет иметь следующие напоминания:

2019-05-11-002

Не заходя в документацию, мы можем увидеть API, который он предоставляет. Если мы посмотрим на исходный файл этой библиотеки, то обнаружим, что причина напоминания кроется в существовании следующих определений:

// @types/color/index.d.TS
interface Color {
    toString(): string;
    toJSON(): Color;
    string(places?: number): string;
    percenTString(places?: number): string;
    array(): number[];
    object(): { alpha?: number } & { [key: string]: number };
    unitArray(): number[];
    unitObject(): { r: number, g: number, b: number, alpha?: number };
    ...
}

Такого рода напоминания, несомненно, могут повысить эффективность разработки.Хотя на определение типа на ранней стадии потребуется определенное время, для относительно крупного проекта с длительным сопровождением использование TS очень целесообразно.

Способ выучить машинопись

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

В процессе прочтения вышеперечисленных материалов я с помощью TS переписал простой, но законченный front-end проект на основе CRA.Теперь чувствую, что с использованием TS для разработки общих потребностей в работе должно справиться. Если вы только начинаете изучать ТС, вы можете пойти по указанному ниже пути.

Создайте среду выполнения TS

Не поймите меня неправильно, он создан не с нуля. При изучении очень практичного контента практика во время обучения может помочь нам быстрее освоить его. Если вы используете React, используйтеyarnилиcreate-react-app, вы можете легко создать проект на основе TS.

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

# 使用 yarn
$ yarn create react-app TS-react-playground --typescript
# 使用 npx
$ npx create-react-app TS-react-playground --typescript

Потом, при необходимости, можноtsconfig.jsonдобавить дополнительную конфигурацию.

Лично мне нравится настраивать TS-lint и prettier синхронно, что избавляет от необходимости форматировать позже в процессе практики. Метод конфигурации может относиться кConfigure TypeScript, TSLint, and Prettier in VS Code for React Native Developmentэта статья илисм. мой журнал конфигурации.

Если вы не используете React,Официальная документация TypeScriptДомашняя страница обеспечивает использование TS в сочетании с другими платформами.

понимать ключевые понятия

Я всегда чувствовал, что очень важно выучить новый навык и прояснить о его границах, а соответствующие детали могут постепенно постепенно понимать в последующем процессе использования. Мы все знаем, что TS - суперс JS, поэтому первое, что нужно узнать о TS, - выяснить, где находится граница «Супер».

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

TS как надмножество JS, его «супер» на самом деле в основном в двух аспектах.

  • TS вводит систему типов в JS;
  • TS поддерживает некоторый формальный стандартный синтаксис, отличный от ECMAScript, например декораторы;

Что касается второго пункта, TS делает что-то похожее на babel, поэтому некоторые люди говорят, что TS представляет собой самую большую угрозу для babel. Однако эти новые синтаксисы, скорее всего, уже давно используются вами, поэтому я не буду повторять их в этой статье.

Что еще труднее понять, так это систему типов, которая имеет свою собственнуюПространства объявлений, с некоторыми собственными ключевыми словами и синтаксисом.

Для меня самая большая сложность в изучении TS заключается в том, что в этой системе типов есть некоторые понятия, которые я раньше редко понимал, с которыми можно примерно разобраться здесь.

Некоторые новые концепции в TS

На самом деле программирование — это процесс манипулирования и обработки данных. Системы типов могут помочь нам выполнять более точные манипуляции с данными. Суть TypeScript в том, что он предоставляет систему типов, которая позволяет нам иметь ограничения на типы данных. Ограничения иногда простые, а иногда абстрактные.

Типы, поддерживаемые TS, следующие:boolean,number,string,[],Tuple,enum,any,void,null,undefined,never,Object.

Более сложные структуры данных в ТС на самом деле представляют собой комбинации вышеперечисленных типов.Для базовых знаний о типах рекомендуется сначала прочитатьбазовый типРаздел, в котором обсуждаются только те концепции, которые изначально меня беспокоили:

  • enum: подумай об этом сейчасenumТипы-перечисления очень полезны. Многие другие языки имеют встроенные типы. Разумное использование перечислений может сделать наш код более читабельным, например:
const enum MediaTypes {
  JSON = "application/json"
}

fetch("https://swapi.co/api/people/1/", {
  headers: {
      Accept: MediaTypes.JSON
  }
})
.then((res) => res.json())
  • никогда:neverПредставляет код, который здесь никогда не выполняется и часто может использоваться вswitch caseизdefault, чтобы мы не пропалиcaseНе обработанные, такие как:
enum ShirTSize {
  XS,
  S,
  M,
  L,
  XL
}

function assertNever(value: never): never {
  console.log(Error(`Unexpected value '${value}'`));
}

function prettyPrint(size: ShirTSize) {
  switch (size) {
      case ShirTSize.S: console.log("small");
      case ShirTSize.M: return "medium";
      case ShirTSize.L: return "large";
      case ShirTSize.XL: return "extra large";
        // case ShirTSize.XS: return "extra small";
      default: return assertNever(size);
  }
}

Ниже приведен скриншот приведенного выше кода в моем редакторе, редактор сообщит нам, что есть еще необработанные ситуации, сообщив об ошибке.

  • Утверждение типа: Утверждение типа — это то, что вы сообщаете компилятору, что значение имеет определенный тип. Есть два разных способа добавления утверждений типа:
  • <string>someValue
  • someValue as string

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

  • Обобщения: Обобщения делают наши структуры данных более абстрактными и пригодными для повторного использования, и из-за этой абстракции их иногда не так просто понять. Сценарии применения дженериков очень широки, например:
type Nullable<T> = {
  [P in keyof T]: T[P] | null;
};

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

  • интерфейс и типinterfaceиtypeОба могут использоваться для определения некоторых сложных структур типов и в большинстве случаев являются универсальными. Сначала я не мог понять разницу между ними. Позже я обнаружил, что разница между ними заключается в следующем:
    • interfaceСоздается новый тип, а тип — это просто псевдоним, ссылка;
    • Если тип использует оператор объединения (|), вы не можете реализовать тип в классе;
    • Если используется типunion(|) оператор, его нельзя использоватьextends interface
    • тип не может быть объединен, как интерфейс, он уникален по области видимости; [1]

в видеоUse Types vs. Interfaces from @volkeron on @eggheadio, разница между ними объясняется более подробно на примерах.

Стоит отметить, что разница между типом и интерфейсом в руководстве по TypeScript все еще присутствует в версии TS 2.0, и текущее описание соответствующей главы не является точным.Если вы хотите узнать об этом больше, вы можете обратиться кInterface vs Type alias in TypeScript 2.7Эта статья.

  • Защита типаКомпилятор TS проанализирует нашу программу и укажет точный тип, насколько это возможно для переменной в указанной области.Защита типа — это метод, помогающий определить тип.В качестве защиты типа можно использовать следующие операторы:
    • typeof padding === "number"
    • padder instanceof SpaceRepeatingPadder

Примером приложения является объединение редьюсера в редукции с разными типами, TS может различать типы действий в разных областях.

  • Карты типов — это способ, который TypeScript предоставляет для создания новых типов из старых типов. Они очень практичны. Например, если мы хотим быстро сделать все свойства в интерфейсе необязательными, мы можем написать следующее:
interface Person {
    name: string;
    age: number;
}
type PartialPerson = { [P in keyof Person]?: Person[P] }

Существует также понятие, называемоетип карты, TS имеет несколько встроенных типов отображения (фактически некоторый синтаксический сахар), что позволяет нам легко выполнять отображение типов. Например, со встроенным типом сопоставления Partial приведенное выше выражение можно записать следующим образом:

interface Person {
    name: string;
    age: number;
}
type PartialPerson = Partial<Person>

Общие типы сопоставления, вы можете обратиться к этой статье —Использование и реализация некоторых дженериков инструментов в TS, за исключением типов отображения, встроенных в TS в качестве синтаксического сахара (таких какReadonly), в этой статье также упоминаются некоторые полезные типы отображения, которые не встроены в большинство TS (например,Omit).

  • Как получить поддержку типов для сторонних библиотек Нам трудно гарантировать, что все сторонние библиотеки изначально поддерживают типы TS.@types/xxxТип библиотеки, установить библиотеку, аналогичную этой, на самом деле есть файл описания библиотеки, и хранится в определении этих сторонних библиотек.DefinitelyTypedВ этом репозитории определяются часто используемые сторонние библиотеки. существуетTypeSearchПакеты определений типов, в которых можно выполнять поиск сторонних библиотек в файлах .

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

Усвоение новых изученных понятий

Я смотрел в первый разTypeScript handbook», я действительно чувствую, что многое понимаю, но обнаруживаю, что часто застреваю, когда пишу код вручную. Причина погони может заключаться в том, что было получено слишком много новых понятий сразу, а некоторые понятия не усвоились вовремя.На данный момент я рекомендую следующий онлайн-курс:

Просмотр видео — относительно простой способ обучения, а продолжительность этого занятия составляет около часа. Некоторые из наиболее важных понятий в руководстве по TypeScript будут объяснены на примерах. Вы можете следовать руководству, чтобы набрать пример один раз, и посмотреть советы, данные в vscode, После прочтения вы определенно получите более глубокое понимание некоторых основных концепций TS.

подражание и практика

Если вы хотите по-настоящему освоить TS, вам нужна практика. Имитация также является хорошей практикой.На примере React + TypeScript рекомендуемый контент для имитации выглядит следующим образом:

  1. TypeScript-React-Starter, это очень хорошая информация, предоставленная Microsoft для начинающих TS, вы можете продолжать использовать игровую площадку, которую мы построили выше, и написать ее один раз со ссылкой на readme этого репозитория, вы можете почти узнать основное использование TS в сочетании с React ;
  2. GitHub - react-typescript-cheaTSheet, этот учебник также относительно прост, но приведенный выше учебник на шаг ближе.После продолжения преобразования нашей игровой площадки в соответствии с его файлом readme, мы можем узнать, как использовать React + Redux + TypeScript вместе;
  3. react-redux-typescript-guide, в этом руководстве показано, как применять некоторые более сложные шаблоны на основе TypeScript, мы также можем имитировать предоставляемое им использование и применять его к нашим собственным проектам;
  4. Ultimate React Component Patterns with Typescript 2.8, эта статья может быть использована как дополнение к вышеизложенному содержанию, имеющемукитайский перевод, Количество лайков очень велико.Прочитав его, вы можете почти понять, используете ли вы TS для работы с различными режимами компонентов React.
  5. Используйте TypeScript для разработки приложений React — egghead.io, а затем, если вы хотите быть более расслабленным, вы можете просмотреть этот онлайн-курс еще раз, следовать объяснениям других людей и оглянуться назад на часть кода, который вы имитировали и написали, и у вас могут возникнуть другие чувства;

К этому моменту у вас уже должны быть базовые возможности разработки TS, и вы можете самостоятельно разрабатывать относительно сложные приложения в сочетании с TS.

более глубокое понимание

Конечно, возможно, вас не устраивает использование TS, вы также хотите знать, как работает TS. В это время рекомендуется прочитать следующие два содержания:

Что касается принципа TS, у меня не было времени внимательно посмотреть. Однако во внешнем интерфейсе есть много применений AST. После того, как я добавлю больше соответствующих знаний, у меня может быть более полное резюме AST.

Конечно, ТС не лишен недостатков.The TypeScript Tax [2]Очень хорошая статья.Чтение этой статьи позволяет нам более объективно взглянуть на ТС.Хотя с точки зрения автора ТС приносит больше вреда,чем пользы.Главная причина в том,что большинство функций предоставляемых ТС можно сравнить с другие инструменты в определенной степени.В какой-то степени система типов потребует написания слишком большого количества дополнительного кода, и система типов также в определенной степени разрушает гибкость динамических языков, затрудняя некоторые динамические, специфичные для языка шаблоны, которые необходимо применить. Окончательный вывод автора очень субъективен, и я не очень с ним согласен, но процесс анализа этой статьи очень захватывающий Сравнение различных особенностей TS с текущей экосистемой JS может дать нам хорошее понимание TS. Для более полного понимания настоятельно рекомендуется прочитать.Возможно, вы будете более заинтересованы в TS после прочтения этого процесса анализа, как я.

TS выпускает новую второстепенную версию каждые несколько месяцев, каждая второстепенная версияОфициальный блог TypeScript[3]На нем будут специальные инструкции, которые можно использовать в качестве справочника для последующего изучения ТС.

Рекомендуемое чтение

Следующие ссылки имеют ссылки в тексте, если вы прочитали их все, вам не нужно проверять их снова.

Ссылаться на

  • Что касается разницы между интерфейсом и типом, описание руководства устарело, см.Interface vs Type alias in TypeScript 2.7
  • В TypeScript Tax есть очень подробное описание преимуществ и недостатков TS, и настоятельно рекомендуется прочитатьThe TypeScript Tax
  • После обновления ts официальный адрес блога можно найти здесь [devblogs.microsoft.com/typescript/
Категории