Выдает ошибку, если элемент, переданный в класс, не является svg (машинопись)

Question

У меня есть класс машинописного текста, который принимает элемент svg html (<svg></svg>) в качестве параметра:

export class MyClass extends Base {
  private svg: SVGSVGElement;
  constructor(svg: SVGSVGElement) {
  }
}

Вы бы назвали это в JavaScript следующим образом:

new MyClass(document.getElementById("mySVGElement"));

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

constructor(svg: SVGSVGElement) {
  if (svg not svg) {
    //throw error
  }
}

Answer 1

В машинописном тексте document.getElementById возвращает HTMLElement | null (см. здесь ), и невозможно преобразовать HTMLElement в SVGSVGElement (см. здесь и выполнить поиск " HTMLElement ").

Это означает, что вы должны «принять» правильный тип внутри параметров конструктора и «проверить» правильность внутри тела конструктора.

export class MyClass extends Base {
  private svg: SVGSVGElement;

  constructor(svg: SVGSVGElement) {
    if (svg instanceof SVGSVGElement === false) {
      throw Error()
    }

    // ...
  }
}

Здесь активно обсуждается вопрос об изменении поведения document.getElementById здесь .

Answer 2

An SVGSVGElement - это правильно, верно?Как насчет if(svg instanceof SVGSVGElement){ stuff }

Answer 3

export class MyClass extends Base {
    constructor(svg: SVGSVGElement) {
        if (svg instanceof SVGElement !== true) {
            throw new Error('Invalid element passed to constructor!')
        }
    }
}

Вот как должен выглядеть код, о котором говорил Стефан-Вуллемс.

Answer 4

new MyClass(document.getElementById("mySVGElement"));

должно вызвать ошибку компилятора, потому что Document.getElementById возвращает HTMLElement.Таким образом, у вас уже есть безопасность типов во время компиляции.Однако, если вам все еще нужно применять это во время выполнения, то ответ Стефана должен быть каноническим способом проверки во время выполнения.

Answer 5

Вы можете проверить MIME-тип файлов с помощью file.type

https://developer.mozilla.org/en-US/docs/Web/API/File/type

, вы можете просто выполнить предварительную проверку следующим образом

if (!file.type == "image/svg+xml"){
   throw new Error('FileType is invalid');
} 

Answer 6

Вы можете сделать тип параметра «любым» и проверить, если он тогда svgsvgelement.

Вероятно, не самый лучший способ ..