Стартер нового проекта Vue + TypeScript

JavaScript TypeScript Vue.js

Я знаю, что вы, ребята, давно хотели использовать строгую типизацию vue + ts.

есть продолжениеРасширенные статьи Vue + typescript

  • Установитьvue-cli
  • Установитьtsполагаться
  • настроитьwebpack
  • Добавить кtsconfig.json
  • Добавить кtslint.json
  • позволятьtsИдентифицировать.vue
  • Модернизация.vueдокумент

что такое машинопись

TypeScriptдаJavaScriptСтрого типизированная версия . Затем удалите тип и конкретный синтаксис во время компиляции, чтобы сгенерировать чистыйJavaScriptкод. Поскольку то, что в конечном итоге работает в браузере, по-прежнемуJavaScript,такTypeScriptЭто не зависит от поддержки браузера и не вызывает проблем с совместимостью.

TypeScriptдаJavaScriptнадмножество , что означает, что он поддерживает всеJavaScriptграмматика. и вдобавок к этомуJavaScriptДобавлены некоторые расширения, такие какclass / interface / moduleЖдать. Это значительно улучшит читаемость кода.

в то же время,TypeScriptСлишкомJavaScript ES6надмножество ,GoogleизAngular 2.0также объявленоTypeScriptразвивать. Это полностью показывает, что это ориентированный на будущее и приземленный язык.

Преимуществом строго типизированных языков является статическая проверка типов, подробнее см. http://www.zhihu.com/question/28016252/answer/39056940. Подводя итог, он в основном включает следующие пункты:

  1. проверка статического типа
  2. Умные советы по IDE
  3. Рефакторинг
  4. удобочитаемость

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

предисловие

вместе сvue2.5лучше одинTypeScriptИнтеграция, и из-за возможности нового проекта я готов попробоватьtypescript + vue

сказатьtsЭто все хорошо, это не так интуитивно, как шутка, программист использовал его с тех порtsПосле этого последовательно написал3000+Одна строка кода была скомпилирована и завершена за один раз, а потом я был очень рад позвонить жене, чтобы показать ее, и моя жена ответила哦

Я всегда думал, что прочитал статью или демонстрацию раньшеvue + typescriptНе могу после этого писать дружелюбно.vueодним файлом, и я также прошу в различных живыхvue + tsилиflowинтеграцияtsИдея, одним словом, заключается в том, чтобы сделать это!

В итоге решил сделать сам, то следующий изvue-cliначать настройкуts, чтобы убедиться в том, что интегрированиеtsКаким был ваш опыт?

Сначала вставьте окончательный настроенный файл .vue, шаблон и стиль соответствуют предыдущему написанию, изменяется только сценарий.

Запустить vue-кли

Этот шаг не должен быть написан

Vue представляет TypeScript

После первого Cli вам нужно установить некоторые необходимые / позже необходимые плагины.

安装vue的官方插件
npm i vue-class-component vue-property-decorator --save

// ts-loader typescript 必须安装，其他的相信你以后也会装上的
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

Общие функции этих библиотек могут быть представлены по мере необходимости:

  • vue-class-component: улучшайте компоненты Vue, используйте TypeScript/декораторы для улучшения компонентов Vue.

  • vue-property-decorator:существуетvue-class-componentРасширьте возможности декораторов, сочетающих функции Vue.

  • ts-loader: TypeScript предоставляет Webpackts-loader, фактически, чтобы позволить веб-пакету распознавать файлы .ts .tsx

  • tslint-loaderиtslint: Я думаю, ты тоже будешь там.ts .tsxФормат кода ограничения файла (эквивалент eslint)

  • tslint-config-standard:tslintнастроитьstandardограничения стиля

настроить веб-пакет

найди первым./build/webpack.base.conf.js

  • оказатьсяentry.appбудетmain.jsизменить наmain.ts, кстати положил в файл проектаmain.jsтакже изменился наmain.ts, содержимое не меняется
entry: {
  app: './src/main.ts'
}
  • оказатьсяresolve.extensionsдобавить внутрь.tsСуффикс (чтобы не писать суффикс, когда .ts вводится позже)
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'],
    alias: {
      '@': resolve('src')
    }
  }
  • оказатьсяmodule.rulesдобавить пару веб-пакетов.tsАнализ
module: {
  rules: [
    {
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        formatter: require('eslint-friendly-formatter')
      }
    },
// 从这里复制下面的代码就可以了
    {
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader'
    },
    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
      }
    },
// 复制以上的
  }
}

Это закончено? Позвольте мне объяснить сейчас

ts-loaderбудет искать текущий каталогtsconfig.jsonФайл анализируется в соответствии с определенными в нем правилами.tsфайл (так же, как.babelrcтот же эффект)

tslint-loaderЭффект эквивалентенeslint-loader

добавить tsconfig.json

Затем создайте его по корневому путиtsconfig.jsonдокумент

Вот ссылкаtsconfig.jsonКонфигурация, пожалуйста, нажмите для полной конфигурацииtsconfig.json:

{
  // 编译选项
  "compilerOptions": {
    // 输出目录
    "outDir": "./output",
    // 是否包含可以用于 debug 的 sourceMap
    "sourceMap": true,
    // 以严格模式解析
    "strict": true,
    // 采用的模块系统
    "module": "esnext",
    // 如何处理模块
    "moduleResolution": "node",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 将每个文件作为单独的模块
    "isolatedModules": false,
    // 启用装饰器
    "experimentalDecorators": true,
    // 启用设计类型元数据（用于反射）
    "emitDecoratorMetadata": true,
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": false,
    // 不是函数的所有返回路径都有返回值时报错。
    "noImplicitReturns": true,
    // 从 tslib 导入外部帮助库: 比如__extends，__rest等
    "importHelpers": true,
    // 编译过程中打印文件名
    "listFiles": true,
    // 移除注释
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允许编译javascript文件
    "allowJs": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 指定特殊模块的路径
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // 编译过程中需要引入的库文件的列表
    "lib": [
      "dom",
      "es2015",
      "es2015.promise"
    ]
  }
}

Кстати, вставьте свою конфигурацию

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

добавить tslint.json

Создано по корневому путиtslint.jsonдокумент

Здесь все очень просто, это ввестиtsизstandardСпецификация

{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  }
}

Пусть ТС распознает .vue

так какTypeScriptНе поддерживается по умолчанию*.vueфайлы с суффиксами, поэтому вvueПри внедрении в проект необходимо создатьvue-shim.d.tsФайл помещается в соответствующий каталог использования проекта проекта, напримерsrc/vue-shim.d.ts

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

Стучите по доске, ниже ключевые моменты!

значит рассказатьTypeScript *.vueфайлы с суффиксом могут быть переданыvueмодуль для обработки.

при импорте в код*.vueфайл, вам нужно написать.vueсуффикс. Причина в том, чтоTypeScriptТолько распознавать по умолчанию*.tsфайл, не распознанный*.vueдокумент:

import Component from 'components/component.vue'

Модернизация.vueдокумент

Перед этим давайте взглянем на необходимые плагины (следующий контент необходимо освоитьes7издекоратор, это символ @, используемый ниже)

vue-class-component

vue-class-componentправильноVueКомпонент инкапсулирован в слой, так чтоVueСинтаксис компонента объединенTypeScriptПосле того, как синтаксис станет более плоским:

<template>
  <div>
    <input v-model="msg">
    <p>msg: {{ msg }}</p>
    <p>computed msg: {{ computedMsg }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  @Component
  export default class App extends Vue {
    // 初始化数据
    msg = 123

    // 声明周期钩子
    mounted () {
      this.greet()
    }

    // 计算属性
    get computedMsg () {
      return 'computed ' + this.msg
    }

    // 方法
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
</script>

Код выше совпадает с кодом ниже

export default {
  data () {
    return {
      msg: 123
    }
  }

  // 声明周期钩子
  mounted () {
    this.greet()
  }

  // 计算属性
  computed: {
    computedMsg () {
      return 'computed ' + this.msg
    }
  }

  // 方法
  methods: {
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
}

vue-property-decorator

vue-property-decoratorвvue-class-componentУлучшено с большей привязкойVueДополнительные декораторы, эти 7 декораторов были добавлены:

  • @Emit
  • @Inject
  • @Model
  • @Prop
  • @Provide
  • @Watch
  • @Component(отvue-class-componentнаследовать)

Вот несколько часто используемых@Prop/@Watch/@Component, для получения дополнительной информации см.официальная документация

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  
  @Prop()
  propA: number = 1

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}

Приведенный выше код эквивалентен:

export default {
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
    propD: { type: null }
  }
  methods: {
    onChildChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    }
  }
}

начать редактированиеApp.vueдокумент

  1. существуетscriptдобавить на этикеткуlang="ts", то есть пустьwebpackОпределите этот код какtypescriptвместоjavascript

  2. Измените способ построения компонента vue (следуяreactКомпоненты написаны аналогично, см. подробностиофициальный), Как показано ниже

  3. использоватьvue-property-decoratorКод до изменения синтаксиса

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

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({})
export default class App extends Vue {
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

Затем аналогичным образом измените HelloWorld.vue.

npm run dev

В это время проект должен работать нормально.

На этом наша конфигурация закончена

Наконец

Если он не настроен согласно статье, вы можете обратиться к этомуrepo vue-typescript-starter(Смело следуйте пошаговой версии статьи)

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

можно продолжать использовать.vueотдельный файл

И я лично думаю добавитьtypescript, проект вынужден проапгрейдиться на 2 уровня, а так же может заставить старших братьев бэкенда не жаловаться на слабый язык js

после того, как поверилvueзаtsИнтеграция будет более дружественной, с нетерпением жду следующего действия Youda

Справочные ссылки / рекомендуемое чтение

Категории