Использование TypeScript в Nuxt или Vue может быть очень сложным. Я только хочу сделать проверку типов! Больше ничего. Мне потребовалось так много времени, чтобы узнать, как включить проверку типов в Nuxt, поэтому я поделюсь тем, что я обнаружил (и вы можете применить эти выводы и во Vue).

Шаг 1. Измените язык скрипта.

Это должно было быть очевидно. В первые веб-дни нам приходилось явно устанавливать язык тега скрипта на JavaScript. JavaScript не был языком по умолчанию в первые дни. С тех пор браузер теперь предполагает, что тег script всегда является JavaScript.

Чтобы включить TypeScript на странице .vue, измените язык скрипта.

<script lang="ts">
const myVar: string = 'hello'
</script>

Теперь мы можем использовать TypeScript. Простой.

Шаг 2: Создайте интерфейс для объекта данных

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

<script lang="ts">
interface Data {
  var1: boolean;
}
export default {
  data(): Data {
    var1: true,
  }
}
</script>

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

Шаг 3: Создайте интерфейс для этого

Страницы Vue позволяют нам использовать переменную this для доступа к свойствам Nuxt/Vue и свойствам данных. Мы должны определить интерфейс, позволяющий использовать this наших функций.

<script lang="ts">
interface Data {
  var1: boolean;
}
interface This extends Data {
  [key: string]: any;
}
export default {
  data(): Data {
    var1: true,
  },
  created(this: This) {
    this.var1 = false;
  }
}
</script>

Теперь мы можем использовать this в хуках жизненного цикла Vue, таких как created. Поскольку у this так много свойств, нам нужно было добавить общее определение ключа для учета всех остальных свойств.

(Необязательно) Шаг 4: Создайте интерфейс для объекта методов

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

<script lang="ts">
interface Data {
  var1: boolean;
}
interface Methods {
  onCreated(): void
}
interface This extends Data, Methods {
  [key: string]: any;
}
export default {
  data(): Data {
    var1: true,
  },
  created(this: This) {
    this.var1 = false;
    console.log(this.onCreated(true))
  },
  methods: <Methods>{
    onCreated(this: This, val: boolean): string {
      return `my val = ${val}`
    }
  }
}
</script>

Методы добавляются в this, поэтому мы расширили интерфейс This.

Вывод

Я предположил, что у вас уже есть tsconfig.json и все остальные необходимые элементы для добавления соответствующих пакетов TypeScript npm, чтобы этот пост был коротким и простым. Подход, который я описал, нестандартен, но он упрощает использование TypeScript на ваших страницах Vue. Кроме того, рекомендуемые подходы Nuxt и Vue не показывают, как проверять типы объектов data и methods.

Я надеюсь, что вы нашли этот пост полезным.

Примечание от автора

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

Посетите miguelacallesmba.com/subscribe и зарегистрируйтесь.

Берегите себя,
Мигель

об авторе

Мигель — главный инженер по безопасности и автор книги Безсерверная безопасность. Он работал над несколькими бессерверными проектами в качестве разработчика и инженера по безопасности, участвовал в бессерверных проектах с открытым исходным кодом и работал над большими военными системами на различных инженерных должностях.