Правильная позиция Vue3 для поддержки TypeScript

Vue.js
Правильная позиция Vue3 для поддержки TypeScript

TypeScriptэто надмножество JS, которое в основном обеспечиваетсистема типови **поддержка ES6,** использованиеTypeScriptМожет повысить удобочитаемость и ремонтопригодность кода, вreact иvueВсе больше и больше людей в сообществе начинают использоватьTypeScript. из самых последнихVue3Из официальной версии,Vue3Исходный код должен использоватьTypeScriptнаписано, лучшеTypeScriptПоддержка также является изюминкой этого обновления. Конечно, как правильно охватить в актуальном развитииTypeScriptтакже мигрировал вVue3Небольшая болевая точка, вот дляVue3 иTypeScriptПоговорите.

image.png

96,8% кода на TypeScript, и поддержка достаточно сильная💪

Запись Vue3

Строительство проекта

В Quickstart официального репозитория есть два рекомендуемых способа сборки нашегоSPA проект:

  • vite
npm init vite-app sail-vue3 # OR yarn create vite-app sail-vue3
  • vue-cli
npm install -g @vue/cli # OR yarn global add @vue/cli
vue create sail-vue3
# select vue 3 preset

viteэто инструмент веб-разработки и построения, управляемый родным ESM, открытыйviteзависимыйpackage.jsonможно найти вdevDependenciesБыли введены зависимости разработкиTypeScript, и дажеvuex , vue-router , less , sassЭти инструменты часто необходимы для местного развития.vite Легкий,из коробкиХарактеристики , отвечающие потребностям большинства сценариев развития, как быстрый локальный стартVueДля проектов это идеальный инструмент.

Следующий демонстрационный код также создан с помощью vite.

отvue2.xКопатели, которые пришли, должны знатьvue-cliЭти официальные леса,vue3Как может обновление быть меньшеvue-cliШерстяная ткань,vue-cliБольше внимания уделяется использованиюcliСпособ интерактивной настройки, выбор более гибкий и контролируемый. Богатая официальная адаптация подключаемых модулей, создание графического интерфейса и интерфейс управления, стандартизированный процесс разработки — все этоvue-cli специальность.

  • vue-cli ✖ TypeScriptSTEP1

vue3.png

  • vue-cli ✖ TypeScriptSTEP2

vue33.png

хотетьПредустановленный TypeScript, вам нужно выбрать ручную настройку и проверить TypeScript

забудьте использовать выборTypeScriptВсе в порядке, просто добавьте строку команды cli

vue add typescript

Наконец, не забудьте.vueкод, дайscriptтег плюсlang="ts" 

<script lang="ts">

Стиль API опционов

существуетVue2.x использовалTypeScriptКопающие друзья должны знать введениеTypeScriptНе простое дело:

  1. использоватьvue-class-componentукреплятьvueкомпонент, пустьScript служба поддержкиTypeScriptдекоратор
  2. использоватьvue-property-decoratorчтобы добавить больше комбинацийVueдекоратор функций
  3. вводитьts-loader позволятьwebpackИдентифицировать.ts  .tsxдокумент
  4. .....

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

@Component({
    components:{ componentA, componentB},
})
export default class Parent extends Vue{
  @Prop(Number) readonly propA!: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC!: string | boolean | undefined

  // data信息
  message = 'Vue2 code style'

  // 计算属性
  private get reversedMessage (): string[] {
      return this.message.split(' ').reverse().join('')
  }

  // method
  public changeMessage (): void {
    this.message = 'Good bye'
  }
}

classСтилевые компоненты, всякие декораторы вкраплены в код, такое ощущение, что не пишу немногоvue, немного сумбурно🙈, так что такая кривая спасения страны вvue3Там точно не получится.

существуетvue3можно записать прямо так:

import { defineComponent, PropType } from 'vue'

interface Student {
  name: string
  class: string
  age: number
}

const Component = defineComponent({
  props: {
    success: { type: String },
    callback: {
      type: Function as PropType<() => void>
    },
    student: {
      type: Object as PropType<Student>,
      required: true
    }
  },
  data() {
     return {
      	message: 'Vue3 code style'
    }
  },
  computed: {
    reversedMessage(): string {
      return this.message.split(' ').reverse().join('')
    }
  }
})

vue правильноpropsПри выполнении проверки сложного типа используйте его напрямуюPropTypeсделать принудительную конвертацию,dataДанные, возвращаемые в, также могут вывести большинство типов без явного определения типа.computedИспользуйте только вычисляемое свойство возвращаемого типа, код понятен, логика проста, а также гарантируетvueцелостность конструкции.

Стиль API композиции

существуетvue3 изComposition APIВ стиле кода более представительным является API.ref иreactive, давайте посмотрим, как эти два объявления типов:

ref

import { defineComponent, ref } from 'vue'

const Component = defineComponent({
  setup() {
    const year = ref(2020)
    const month = ref<string | number>('9')
    
    month.value = 9 // OK
    const result = year.value.split('') // => Property 'split' does not exist on type 'number'
  }
})

Анализируя приведенный выше код, мы можем обнаружить, что если мы не дадимrefЕсли тип определен,vue3Вы также можете выполнить вывод типа на основе начального значения, а затем просто передать универсальный тип, когда вам нужно указать сложный тип.

Советы: если есть только метод настройки, вы можете напрямую передать функцию настройки в defineComponent.

const Component = defineComponent(() => {
    const year = ref(2020)
    const month = ref<string | number>('9')
    
    month.value = 9 // OK
    const result = year.value.split('') // => Property 'split' does not exist on type 'number'
})

reactive

import { defineComponent, reactive } from 'vue'

interface Student {
  name: string
  class?: string
  age: number
}

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const student = reactive<Student>({ name: '阿勇', age: 16 })
    // or
    const student: Student = reactive({ name: '阿勇', age: 16 })
    // or
    const student = reactive({ name: '阿勇', age: 16, class: 'cs' }) as Student
  }
})

утверждениеreactiveНастоятельно рекомендуется использовать интерфейсы, и тогда есть много вариантов того, как использовать утверждения типа.TypeScriptСинтаксический сахар for по сути такой же.

Пользовательские крючки

vue3учиться уreact hooksразвитыйComposition API, то это означает, чтоComposition APIВозможна также индивидуальная упаковкаhooks, то используемTypeScriptстиль, который инкапсулирует логику счетчикаhooks(useCount):

первый взгляд на этоhooks как пользоваться:

import { ref } from '/@modules/vue'
import  useCount from './useCount'

export default {
  name: 'CountDemo',
  props: {
    msg: String
  },
  setup() {
    const { current: count, inc, dec, set, reset } = useCount(2, {
      min: 1,
      max: 15
    })
    const msg = ref('Demo useCount')

    return {
      count,
      inc,
      dec,
      set,
      reset,
      msg
    }
  }
}

Результат:

vue-type.gif

наклеитьuseCountИсходный код:

import { ref, Ref, watch } from 'vue'

interface Range {
  min?: number,
  max?: number
}
  
interface Result {
  current: Ref<number>,
  inc: (delta?: number) => void,
  dec: (delta?: number) => void,
  set: (value: number) => void,
  reset: () => void
}

export default function useCount(initialVal: number, range?: Range): Result {
  const current = ref(initialVal)
  const inc = (delta?: number): void => {
    if (typeof delta === 'number') {
      current.value += delta
    } else {
      current.value += 1
    }
  }
  const dec = (delta?: number): void => {
    if (typeof delta === 'number') {
      current.value -= delta
    } else {
      current.value -= 1
    }
  }
  const set = (value: number): void => {
    current.value = value
  }
  const reset = () => {
    current.value = initialVal
  }
  
  watch(current, (newVal: number, oldVal: number) => {
    if (newVal === oldVal) return
    if (range && range.min && newVal < range.min) {
      current.value = range.min
    } else if (range && range.max && newVal > range.max) {
      current.value = range.max
    }
  })

  return {
    current,
    inc,
    dec,
    set,
    reset
  }
}

Анализировать исходный код

Вот первыйhooksОпределяются тип входного параметра и тип возвращаемого значения функции.Rangeи вернулсяResultИспользуйте интерфейс для указания каждого. После этого самым большим преимуществом является использованиеuseCountПри использовании этой функции среда IDE автоматически подскажет, какие параметры требуются и каков тип каждого параметра, чтобы предотвратить ошибки бизнес-логики.屏幕快照 2020-09-23 下午10.49.36.pngДалее, добавлениеincи уменьшитьdecДобавлено к двум функциямtypeoВведите сторожевую проверку, потому что входящиеdeltaЗначение типа не очень точно в некоторых конкретных сценариях, например, вtemplateЕсли метод вызывается в , проверка типа может завершиться ошибкой, а входящий тип является нативным.Event.

оrefЗначение типа, здесь нет специального объявления типа, т.к.vue3Будет выполнен автоматический вывод типа, но если это сложный тип, можно использовать утверждение типа:ref(initObj) as Ref<ObjType> 

Советы 💡

AnyScript

использовать в началеTypeScriptВ то время многие землекопы любят использоватьanyтипа, резкоTypeScriptнаписано какAnyScript, хоть и очень удобен в использовании, но от этого проигрываетTypeScriptКонечно, привычку писать шрифты нужно вырабатывать медленно, не торопясь.

Vetur

veturИнструменты проверки кода могут быть очень полезны при написании кода vue, точно так же, как при созданииvueПроект незаменимvue-cli Такой же,veturпри условииvscodeПоддержка плагинов для , спешите обновитьсяvue3Эта волна работы, кстатиveturПринесите и его.屏幕快照 2020-09-23 下午10.39.12.png

Заканчивать

бессознательно,VueПришло время для эпохи One Piece 3,Vue3Новая функция пусть обнятьTypeScriptПоза более спокойная и изящная,VueТакже более уверенно разрабатывается для крупномасштабных проектов. (Если в тексте есть ошибки, вы можете их исправить)

Прекрасное прошлое📌

Один из первых пользователей Vue3: React Hooks VS Composition API

React Hooks борется с осадками: оптимизация производительности

Категории