Как мне убедить средство проверки Typescript, что значение является определенным подклассом в Javascript?

Question

Как мне убедить средство проверки Typescript, что значение является определенным подклассом в Javascript?

1

Я использую VS Code с включенной (относительно) новой опцией checkJS - я пишу Javascript, но это позволяет механизму машинописного машиностроения делать ограниченную проверку типов.

Я ищу элемент DOM, используя querySelector и получая доступ к свойству, специфичному для элемента:

var img = document.querySelctor("#myImage");
img.src = "image.png";

Это заставляет Code .src вторую строку как проблему, так как querySelector возвращает только Element а свойство .src является членом HTMLImageElement. В фактическом машинописном тексте я бы бросил (coerce? Assert?) Возвращаемое значение перед доступом к свойству, но поскольку это ванильный Javascript, это не вариант. Есть ли другой способ избежать переполнения моего кода с помощью флажков управления TS в комментариях?

Coderer 27 июль 2017, в 16:34

Источник

0

Я не касался какого - либо машинописного , но я видел , as быть хорошим ключевым словом для вашего сценария. var img = document.querySelector("#myImage") as HTMLImageElement
Vivick 27 июль 2017, в 14:34
0

Прежде всего, используйте var , только если вы точно знаете его область scoping : лучше вместо этого использовать let . Затем, чтобы ответить на ваш вопрос, вы должны дать type вашей переменной img как и any . typescript не знает, какой у него type при вызове querySelector .
ADreNaLiNe-DJ 27 июль 2017, в 14:36
0

Вы можете сделать это следующим образом: let img = <any>document.querySelctor("#myImage");
ADreNaLiNe-DJ 27 июль 2017, в 14:39
0

Просто чтобы быть совершенно ясным, я пишу простой JS (не TS) и упаковываю его в Babel / Webpack. Мне нужен редактор, чтобы понять, что этот метод, который возвращает Element , всегда будет с аргументами, которые я HTMLImageElement , возвращать подкласс HTMLImageElement , но мне нужны мои инструменты сборки, чтобы получить действительный JS.
Coderer 27 июль 2017, в 14:41
0

Возвращение к проблеме с Github , я обеспокоен тем, что не будет исправления этого, кроме как засорять мой код с помощью // @ts-ignore :(
Coderer 27 июль 2017, в 15:21

Показать ещё 3 комментария

Теги:

javascript

visual-studio-code

1 ответ

Ещё вопросы

Я не касался какого - либо машинописного , но я видел , as быть хорошим ключевым словом для вашего сценария. var img = document.querySelector("#myImage") as HTMLImageElement
Прежде всего, используйте var , только если вы точно знаете его область scoping : лучше вместо этого использовать let . Затем, чтобы ответить на ваш вопрос, вы должны дать type вашей переменной img как и any . typescript не знает, какой у него type при вызове querySelector .
Вы можете сделать это следующим образом: let img = <any>document.querySelctor("#myImage");
Просто чтобы быть совершенно ясным, я пишу простой JS (не TS) и упаковываю его в Babel / Webpack. Мне нужен редактор, чтобы понять, что этот метод, который возвращает Element , всегда будет с аргументами, которые я HTMLImageElement , возвращать подкласс HTMLImageElement , но мне нужны мои инструменты сборки, чтобы получить действительный JS.
Возвращение к проблеме с Github , я обеспокоен тем, что не будет исправления этого, кроме как засорять мой код с помощью // @ts-ignore :(

Coderer · Answer 1 · 2017-07-28T06-41-00.000Z

Обновление из проблемы Github, которую я связал в комментариях:

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

if (img instanceof HTMLImageElement) {
  img.src = "image.png";
}

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

const el = /* @type {HTMLImageElement} */ (document.querySelector("#definitelyAnImage"));

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