Изучите машинопись в исходном коде vue3🔥🦕 - "есть"

TypeScript Vue.js

vue3🔥 использоватьtypescriptРеализовано, поэтому я думаю, что его исходный код для нас, чтобы изучить tyepscriptЛучшие практики, я буду использовать примеры из его исходного кода, чтобы каждый научился использовать машинописный текст"is"характеристика.

непосредственный

Первый урок, опыт машинописи

Урок 2, Основные типы и вводные расширенные типы

Урок 3, Общие сведения

Урок 4. Интерпретация расширенных типов

Урок 5. Что такое пространство имен

Специальная статья, изучайте машинопись в исходном коде vue3🔥🦕 - "есть"

Урок 6, что такое файл декларации? 🦕 - Глобальная декларация

Где используется "есть"?

Позвольте мне сначала рассказать о том, где он используется. Он часто используется для инкапсуляции "функций оценки типа". Такие функции должны использовать свойство "есть". Эти функции обычно имеют имена.isString/isFood/isVnodeд., например:

const isString = (val: any): val is string => typeof val === 'string'

концепция

— это ключевое слово в выражении вывода типа, которое «сужает» тип параметра, сравнивая его с возвращаемым значением функции.

😠 После прочтения этого предложения"я не понимаю" , Если вы хотите понять, что означает это предложение, продолжайте смотреть на следующий пример, 😁 Я гарантирую, что вы поймете это предложение после первого примера.

где важно использовать Vue »

Сначала научите васvscodeВ поиске мы можем искать по "обычным", таким как поиск\): \w+ isМы можем найти весь код, который использует атрибут «is».

Более общие правила см. здесь: https://juejin.cn/post/6844903886004682765.

Пример объяснения

Из искомого кода мы выбираем наиболее репрезентативное описание функции.

const isString = (val: any): val is string => typeof val === 'string'

фокус

Вы можете видеть, что возвращаемое значение является не типом, а выражением"val is string", этот код означает, когдаisStringВозвращаемое значениеtrue, параметрvalто естьstringТипы.

Не можете вернуть логическое значение напрямую?

нет!Глядя на код ниже, мы знаем, что вifПосле вынесения решения aa должен бытьstring, а тс не знает, тс подскажетaaможет бытьnullтип, не может выполнитьsubstringметод.

такНужно использоватьisfeature.ts можетВывод, основанный на суждениивне текущегоaaдляstringТипы:

Еще примеры «is» в vue3

// 是否是对象
export const isObject = (val: any): val is Record<any, any> =>
  val !== null && typeof val === 'object'

// 是否ref对象
export function isRef(v: any): v is Ref {
  return v ? v[refSymbol] === true : false
}

// 是否vnode
export function isVNode(value: any): value is VNode {
  return value ? value._isVNode === true : false
}

// 是否插槽节点
export const isSlotOutlet = (
  node: RootNode | TemplateChildNode
): node is SlotOutletNode =>
  node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT

Дополнительные примеры можно найти в исходном коде.\): \w+ is, существует около 16 подобных кодов.

Обобщая, находим: «is«Это в основном применяется к функции оценки типа, так что тип параметра может быть правильно выведен в последующем логическом суждении. Что ж, теперь вы можете вернуться к объяснению в начале»is — это ключевое слово в выражении вывода типа, которое «сужает» тип параметра, сравнивая его с возвращаемым значением функции.", Теперь ты это понимаешь?

упражняться

Мы сами пишем"Определить, является ли регулярное выражение"Функция.

🚀 Ответы 
function isRegExp (input: any): input is RegExp {
    return '[object RegExp]' === Object.prototype.toString.call(input);
}

Суммировать

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

Первый урок, опыт машинописи

Урок 2, Основные типы и вводные расширенные типы

Урок 3, что такое дженерики?

Урок 4. Интерпретация расширенных типов

Урок 5. Что такое пространство имен?

Так же прошу всех побольше практиковаться.Желаю вам как можно скорее освоить ts,и выложить 2 проекта которые я написал в ts в качестве референса.

✋ Библиотека жестов для мобильных устройств/ПК, поддержка: касание/нажатие/панорамирование/пролистывание/вращение/сжатие GitHub.com/any86/anyi-he…

🍭 Превратите компонент vue в команду, подобную этой. $xxx GitHub.com/easy86/v UE-от…

Группа WeChat

Спасибо за чтение, если у вас есть какие-либо вопросы, вы можете добавить меня в WeChat, я приглашу васГруппа WeChat(Из-за ограничения Tencent на 100 участников в группах WeChat после того, как более 100 участников должны быть привлечены участниками группы)

Категории