Первоначально опубликовано на alexjoverm.github.io 28 июня 2017 г.

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

В этой статье мы предполагаем, что вы используете SFC (одиночные файловые компоненты), но это может сработать, даже если вы разбиваете их на несколько файлов. Итак… приступим!

Интеграция TypeScript

Мы начнем с шаблона Vue CLI Webpack, но он будет работать и с потрясающим шаблоном PWA. Не выбирайте использование ESLint, когда вас просят:

vue init webpack my-app cd my-app

Нам нужно сделать 4 шага:

1. Создайте файл tsconfig.json

Давайте начнем с чего-то очень простого, позже мы вернемся к настройке TypeScript.

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015"],
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  }
}

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

Установка "module": "es2015" сделает код сотрясаемым деревом за счет создания ESM (модулей EcmaScript).

2. Добавьте настройки ts-loader и webpack

Установите typescript и ts-loader с помощью npm:

npm i -D typescript ts-loader

Затем откройте build/webpack.base.conf.js и поместите следующий код в начало module.rules, прямо перед vue-loader:

module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
    ...

Там переименуйте запись в .ts и добавьте ее в расширения:

entry: {
  app: ‘./src/main.ts’
},
…
resolve: {
  extensions: [‘.ts’, ‘.js’, ‘.vue’, ‘.json’],
…

3. Добавьте es-module: true к build/vue-loader.conf.js

Это укажет vue-loader использовать модули ES вместо модулей CJS (CommonJS), как описано в документации vue-loader:

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  esModule: true
}

4. Используйте TypeScript в файлах

Итак, вы должны сделать 2 вещи здесь:

  • Переименуйте .js в .ts расширения в папке src
  • Используйте lang="ts" в теге script вашего файла Vue. Например, в App.vue:
<script lang="ts"> export default { name: 'app' } </script>

Исправление проблем

Если ваш редактор кричит на строку import App from './App' в файле main.js о том, что он не находит модуль App, вы можете добавить в свой проект файл vue-shim.d.ts со следующим содержимым:

declare module "*.vue" { 
  import Vue from 'vue' 
  export default Vue 
}

Я использую VSCode 1.13.1 и не вижу его, но видел раньше.

TSLint, Красивее… Богиня!

Я записал двухминутное видео на Egghead, где я объясняю, как настроить TSLint с Prettier без каких-либо конфликтов. Иди проверь!

Хорошо, я могу использовать TypeScript… так что теперь?

На данный момент TypeScript уже может указать вам на некоторые ошибки, которые вы не замечали раньше, используя встроенные и сторонние типы, и дает вам лучший опыт разработки, используя вывод типов, как описано в TypeScript в Slack, статья, рассказывающая, как Slack перевел свою кодовую базу на TypeScript.

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

В идеале вы должны использовать опцию компилятора TypeScript 2.3 strict в своем tsconfig.json, потому что это обеспечит вам максимальную безопасность типов. У Мариуса Шульца есть хорошо поясненная статья по этому поводу. В TypeScript 2.3 параметр strict представляет собой группу из 4 параметров, но в будущих выпусках может быть добавлено больше:

  • strictNullChecks
  • noImplicitAny
  • noImplicitThis
  • alwaysStrict

Однако, если у вас средняя/большая кодовая база, использование строгой опции заставит вас потратить действительно огромные усилия и время на устранение нехватки типов.

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

Вывод

TypeScript обеспечивает безопасность типов в вашей кодовой базе с самого начала, но чем больше типов вы определяете, тем легче обнаруживать ошибки и ошибки и делать код удобным для сопровождения. Vue из версии 2 поставляется с типизациями, поэтому мы можем их использовать. Они становятся более мощными, когда вы используете ООП (объектно-ориентированное программирование) в Vue, но об этом вы узнаете в другом посте.

Если вам это нравится, пожалуйста, идите и поделитесь им! Вы можете следить за мной в этом блоге или в твиттере как @alexjoverm. Любые вопросы? Стрелять!