Некоторое понятное решение о том, как расширить существующие классы и интерфейсы в машинописи, чтобы я мог также получить автоматический импорт в веб-шторме - PullRequest
0 голосов
/ 09 мая 2019

Я начал разработку веб-приложения на машинописном языке и в vue и обнаружил, что расширять класс довольно сложно, поэтому я делаю это с помощью старых подходов java, таких как статические методы и базовые классы, но я из мира kotlin и swift, objc, где я сильноиспользовать категории, расширения, ну это в основном та же концепция.Но в машинописном тексте я попробовал множество примеров, которые было довольно сложно написать, но безуспешно, у меня все еще были проблемы со строгим компилятором.

Так что в kotlin я могу написать что-то вроде этого:

fun String.splitBySpaces(text:String) -> String {
    return ......
}

Я могу легко расширить любой тип в kotlin, поэтому, в основном, я хочу расширить свои типы или типы из импортированной библиотеки, например, импортированный тип Vue, например import { Vue } from 'vue-property-decorator'

Поэтому я попробовал примеры и попробовал это:

export interface Vue {
  testExtension(): string
}

Vue.prototype.testExtension = () => {
  return 'kokot'
}

Я пытался вызвать это из подкласса класса Vue, который я использую, и я не могу назвать его, я пытался также определить его в своем собственном пространстве имен, это работает!но ?Я получаю ошибку компиляции машинописи.

Определяется так:

import { Vue } from 'vue-property-decorator'
import { CSToast } from '@/cs/CSLang'

declare module 'vue-property-decorator' {
  interface Vue {
    testExtension(): void
  }
}

Vue.prototype.testExtension = (this: Vue): void => {
  CSToast.info('This is test of extension')
}

Ошибка:

27:5 Type 'this' is not assignable to type 'Vue'.
  Property 'testExtension' is missing in type 'Vue' but required in type 'Vue'.
    25 | 
    26 |   constructor() {
  > 27 |     this.vue = new Vue({
       |     ^
    28 |       router,
    29 |       template: '<App ref="applicationView"/>',
    30 |       components: { App }

Так что я не знаю, пробовал также другие возможности объявления, найденные в stackoverflow, но все жепочему-то не работает чисто, я надеялся, что у Microsoft есть ресурсы, чтобы сделать машинопись более предсказуемой, но кажется, что лучше использовать простые статические методы для «расширений», например:

export class CSToast {
  static success(vue:Vue, title: string) {
    vue.$toasted.show(title, {
      position: 'bottom-center',
      duration: 4000,
      fullWidth: false,
      type: 'success',
      action: {
        text: '',
        icon: 'close',
        onClick: (e, it) => { it.goAway(300) }
      }
    })
  }
}

, но статические методы должны получить все как параметр, такбыло бы необходимо передать экземпляр Vue в качестве параметра, поскольку он может стать довольно уродливым (все еще несопоставимым с некоторым синтаксисом javascript imho)

Мое «расширение» в качестве статического метода затем должно вызываться как этот CSToast.success (это, 'some message')

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

Хотелось бы получить четкое и понятное решение о том, как расширить существующие классы и интерфейсы в машинописи, если это возможно, поэтому я могу также получить автоматический импорт в веб-шторм.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...