Автор: God Q Superman
Переводчик: Front-end Xiaozhi
Источник: medium
Если у вас есть мечты и галантерея, вы можете поискать [Великое движение в мир] в WeChat и обратить внимание на эту Шаванжи, которая все еще моет посуду ранним утром.
Включена эта статья GitHub https://github.com/qq449245884/xiaozhi , там полные тестовые сайты, материалы и мой цикл статей для интервью с производителями первой линии.
Поскольку JavaScript сам по себе является слабым языком, он часто страдает из-за того, что не знает, какой тип переменной находится в разработке. его тип с первого взгляда.Когда эта переменная имеет значение object, сложнее понять, что keyв ней находится, поэтому люди постепенно начинают использовать TypeScript в качестве основного инструмента разработки.
Я не знаю, чувствуете ли вы, что TypeScript особенно раздражает при разработке с помощью TypeScript, хотя очень приятно знать, что эти действия по проверке типов могут помочь нам уменьшить количество потенциальных ошибок, которые могут возникнуть. эта проблема, когда мы сталкиваемся с такой проблемой в разработке.
сцена первая
Я не знаю, сталкивались ли вы с такой проблемой.Сегодня я хочу, чтобы эта переменная проверяла, enumсоответствует определенному значению в , но TypeScript неправильно распылил его для вас, как показано ниже.
На самом деле, есть много способов решить вышеуказанную красную букву.Первый-использовать @ts-ignoreее,чтобы ошибка исчезла.Конечно,этот метод очень плохой.Это равносильно указанию TypeScript не проверять следующую строку.
В это время я могу подумать о другом методе.Приведенное выше сообщение об ошибке состоит в том, что оно maleне было получено этимassign , поэтому я просто заставляю его сделать это , например:GENDERtypetype
Но так писать все равно нехорошо, значит вы принудительно меняете переменную, из-за чего переменная теряет свою гибкость.Далее мы представим более полезный метод, давайте продолжим его читать!
Тип гвардии
Первое, что нужно ввести, это Type Guard . Type Guard, как следует из его названия, является защитой типа. Сейчас TypeScript сообщит об ошибке, потому что тип отличается, поэтому, пока мы создаем защиту типа, пусть TypeScript знает, что это переменная обязательно будет enumсоответствовать value, красная буква в это время не появится, и обычно Type Guard будет писаться functionтак :
const assertsIsGender = (gender: any) : gender is GENDER => {
return Object.values(GENDER).includes(gender)
}
В настоящее время мы можем обнаружить, что genderэта переменная менялась от stringтипа к GENDERтипу, поэтому, даже если мне будет скучно и я сделаю includesдругое суждение, TypeScript не сообщит об ошибках.
Здесь genderя присваиваю переменной stringтип перед присвоением значения.Это действие очень важно.Если сначала не присваивается тип переменной, а затем присваивается значение, переменная не может быть typeизменена .
сцена вторая
Я не знаю, сталкивались ли вы с данными, возвращаемыми в API, и будут возникать ошибки, потому enumчто разным, например следующим:
С приведенной выше концепцией Type Guard читатели в настоящее время должны знать, как написать functionдля обработки этого сообщения об ошибке:
Это правда, что сообщение об ошибке исчезло, но очень genderстранно стало neverтипом, и это механизм защиты типа, который будет делать Type Guard: Сужение .
Тип Сужение
Сужение в переводе на просторечие — это сужение типов . В мире TypeScript каждый enumв принципе независим и не имеет пересечений друг с другом. Схема взаимосвязей выглядит следующим образом:
Следовательно, чтобы выполнить преобразование типов между двумя перечислениями, легко сгенерировать тип, который может не существовать.Для типа, который может не существовать, TypeScript определяет этот тип как never, и в это время, когда мы используем технику Type Guard , TypeScript автоматически сужает тип до never typeодного вместо автоматического преобразования его в enumдругой .
Конечно, вы можете думать так, если вы сообразительны: тогда мне просто нужно function returnопределить еще один enum, чтобы я мог гарантировать, что результат моего Type Guard будет преобразован в перечисление, которое я хочу, например следующее:
Кажется, нет проблем в написании таким образом, и результат, который мы хотим, изменился от сужения типов к преобразованию типов , но на самом деле это немного несовместимо с духом Type Guard, ведь Type Guard выполняет проверку типов вместо Type преобразование, и если то, что мы хотим сделать, является преобразованием типов, это также сделает functionвозможность повторного использования этого невысокой, поэтому далее мы представим лучший метод преобразования типов.
Перечисление картографа
Прежде всего, мы можем подумать о том, как повторно использовать преобразование типов.Мы могли бы также упростить идею, то есть functionсоздать Aтип преобразования в Bтип , а в это время мы должны использовать универсальный тип Generics в TypeScript. так:
const createEnumMapper = <T>(mapping: T) => (value: keyof T | null) : T[keyof T] | undefined => {
return value === null ? undefined : mapping[value]
}
createEnumMapperФункция this — это one currying function, и первая переданная переменная — это само перечисление.В это время Generics of TypeScript будет знать, что Tmy связано с enumсамим собой.
Чтобы Genericsэто правильно соединило два enum mapping, мы должны сначала создать пару objectиз enumдвух key value, как это:
const mapper = {
[BE_GENDER.MALE]: FE_GENDER.MALE,
[BE_GENDER.FEMALE]: FE_GENDER.FEMALE
}
Так как выше mapperмы рассматривали enum valueкак key, поэтому мы можем напрямую преобразовать dataзначение , как показано ниже:
[Не удалось передать изображение по внешней ссылке, исходный сайт может иметь механизм защиты от пиявки, рекомендуется сохранить изображение и загрузить его напрямую (img-uaof0Gel-1645574343364)(/img/bVcXRjL)]
В это время мы можем обнаружить, что мы успешно BE_GENDERпреобразовали значение типа в FE_GENDERзначение типа, и нам не нужно использовать концепцию Type Guard.
Суммировать
Сегодня я представил методы, используемые для проверки типов в TypeScript. Если читатели столкнутся с подобными проблемами в будущем, они могут использовать Type Guard, чтобы проверить больше, вместо того, чтобы использовать их напрямую. @ts-ignoreИли asэти два метода, помимо введения проверки типов, также введение Что касается того, как выполнять преобразование типов, я надеюсь, что эти методы позволят читателям использовать их без особых проблем в будущем.
Я Шаванжи В новый год давай чистить вместе.
Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, рекомендую полезный инструмент мониторинга ошибок , Fundebug .