Как использовать тс в vue

внешний интерфейс Vue.js

Примечание: Эта статья не о замене vue на ts, а о вживлении ts-файла в исходный проект.На данный момент это только этап практики, переход к процессу конвертации ts.

Какая польза от тс?

Проверка типов, компиляция непосредственно в нативный js, введение нового синтаксического сахара

Зачем использовать тс?

TypeScript должен быть разработан для решения «болевых точек» JavaScript: слабая типизация и отсутствие пространств имен, что затрудняет модульность и не подходит для разработки крупномасштабных программ. Кроме того, он также предоставляет некоторый синтаксический сахар, который поможет вам легче практиковать объектно-ориентированное программирование.

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

Angular: Почему мы выбрали TypeScript?

  • Отличные инструменты в TypeScript

  • TypeScript — это надмножество JavaScript.

  • TypeScript делает абстракции видимыми

  • TypeScript упрощает чтение и понимание кода

Да, я знаю, что это не кажется интуитивным. Позвольте мне проиллюстрировать, что я имею в виду, на примере. Давайте посмотрим на функцию jQuery.ajax(). Какую информацию мы можем получить из его подписи?

Единственное, что мы знаем наверняка, это то, что эта функция принимает два параметра. Мы можем угадать эти типы. Возможно, первое — это строка, а второе — объект конфигурации. Но это всего лишь догадки, и мы можем ошибаться. Мы не знаем, какие параметры входят в объект настроек (их имена и типы), или что возвращает функция.

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

Итак, хотя jQuery.ajax(url, settings) легко читать, чтобы действительно понять, как вызывать эту функцию, нам нужно прочитать ее реализацию или ее документацию.

Вот типовая версия:

Это дает нам больше информации.

  • Первый параметр этой функции — строка.

  • Установка параметров не является обязательной. Мы можем видеть все параметры, которые можно передать в функцию, не только их имена, но и их типы.

  • Функция возвращает объект JQueryXHR, и мы можем видеть его свойства и функции.

Типизированные подписи определенно длиннее, чем нетипизированные, но :string, :JQueryAjaxSettings и JQueryXHR не запутаны. Это важные документы для улучшения понимания вашего кода. Мы можем глубже понять код, не углубляясь в реализацию или читая документацию. Мой личный опыт показывает, что я могу читать типизированный код быстрее, потому что типы предоставляют больше контекста для понимания кода.

Взято из Angular: почему мы выбрали TypeScript?

Легко ли выучить ТС?

Одним из основных моментов дизайна TypeScript является то, что он не отказался от синтаксиса JavaScript и не начал заново, а сделал его надмножеством JavaScript (эта заслуга должна быть отдана Андерсу), так что любое допустимое утверждение JavaScript является законным в TypeScript, и Кроме того, стоимость обучения очень низкая.Если у вас есть относительно глубокое понимание JavaScript, вы можете очень быстро начать работу с TypeScript, потому что он разработан с учетом привычек использования и соглашений JavaScript.

Некоторые простые примеры легко понять с первого взгляда:

базовый тип

  let isDone: boolean = false;  // 布尔值

  let decLiteral: number = 6;    // 数字

  let name: string = "bob";  // 字符串

  let list: number[] = [1, 2, 3]; // 数组
  ...
  ...скопировать код

интерфейс

function printLabel(labelledObj: { label: string }) {    console.log(labelledObj.label);
  }  let myObj = { size: 10, label: "Size 10 Object" };
  printLabel(myObj);скопировать код

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

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

Как применить ts в проекте vue?

1. Сначала установите ТС

npm install --save-dev typescript npm install --save-dev ts-loader

2. Создайте файл tsconfig.json в корневом каталоге.

{
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["dom","es2016"],
      "target": "es5"
    },
    "include": ["./src/**/*"]  }скопировать код

3. Добавляем ts-loader в конфигурацию

{
    test: /\.tsx?$/,
    loader: 'ts-loader',    exclude: /node_modules/,      options: {
      appendTsSuffixTo: [/\.vue$/],
    }
  }скопировать код

4. Наконец, можно добавить суффикс .ts в файл webpack.base.conf.js.

Теперь мы можем использовать файл ts в нашем исходном проекте.

Как практиковать?

1. Как ссылаться на файлы ts в js?

Поскольку файл js не имеет определения типа, когда мы импортируем файл ts, файл ts будет преобразован в файл js, поэтому механизм определения типа метода ссылки на файл ts в файле js не будет работать. То есть механизм определения типа есть только в файле ts.

Итак, как использовать механизм определения типа в файлах js? Редактор инкапсулировал набор методов декоратора typeCheck только для справки! Использование заключается в следующем:

@typeCheck('object','number')  deleteItem(item,index) {}скопировать код

Определить параметры метода deleteItem: элемент — это тип объекта, индекс — числовой тип, если тип не совпадает, будет выдано исключение

Часть кода для предложения:

const _check = function (checked,checker) {
        check:            for(let i = 0; i < checked.length; i++) {              if(/(any)/ig.test(checker[i]))                    continue check;              if(_isPlainObject(checked[i]) && /(object)/ig.test(checker[i]))            continue check;              if(_isRegExp(checked[i]) && /(regexp)/ig.test(checker[i]))            continue check;              if(Array.isArray(checked[i]) && /(array)/ig.test(checker[i]))            continue check;              let type = typeof checked[i];              let checkReg = new RegExp(type,'ig')              if(!checkReg.test(checker[i])) {                    console.error(checked[i] + 'is not a ' + checker[i]);                    return false;
      }
    }    return true;
  }  /**
   * @description 检测类型
   *   1.用于校检函数参数的类型，如果类型错误，会打印错误并不再执行该函数；
   *   2.类型检测忽略大小写，如string和String都可以识别为字符串类型；
   *   3.增加any类型，表示任何类型均可检测通过；
   *   4.可检测多个类型，如 "number array",两者均可检测通过。正则检测忽略连接符 ；
   */
  export function typeCheck() {          const checker =  Array.prototype.slice.apply(arguments);              return function (target, funcName, descriptor) {                    let oriFunc = descriptor.value;
              descriptor.value =  function () {                      let checked =  Array.prototype.slice.apply(arguments);                          let result = undefined;                          if(_check(checked,checker) ){
                      result = oriFunc.call(this,...arguments);
        }             return result;
      }
    }
  };скопировать код

Обнаружение типов ts и typeCheck в основном удовлетворили наши потребности.

2. Как ссылаться на файлы js в ts?

Поскольку в файле js нет определения типа, файл ts будет преобразован в любой тип при импорте в файл js.Конечно, мы также можем объявить тип в файле .d.ts.

например файл global.d.ts

Конечно, иногда нам нужно использовать некоторые библиотеки, но файла объявления нет, поэтому, когда мы будем ссылаться на него в файле ts, он будет неопределенным. Что нам делать в это время?

Например, когда я хочу использовать «строку запроса» в файле util.ts, мы будем ссылаться на нее следующим образом:

import querystring from 'query-string';скопировать код

Однако, когда вы печатаете строку запроса, она не определена. Как это решить? Мой метод только для справки

Создайте новый файл module.js

import querystring from 'query-string';  export const qs = querystring;скопировать код

файл утилиты.ts

import { qs } from './module.js';скопировать код

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

Пока на этой статье заканчивается знакомство с настройкой ts в vue.Эта статья представляет собой только личное мнение.Учитывая масштабируемость проекта, не все заменено на ts.Это лишь предварительное введение ts в vue.Еще есть много областей для улучшения. , если у вас есть лучшие предложения и комментарии, вы можете связаться со мной!

Категории