microsoft / microsoft/TypeScript

Missing controlsList property in HTMLMediaElement

オープン
#31,532 コメント 7 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Needs Investigation
主要言語
Go
スター
111k
フォーク
14.3k
平均マージ
2日 4時間
マージ済み PR(30日)
132

説明

TypeScript Version: 3.4.0-dev.201xxxxx

Search Terms:

controlsList HTMLMediaElement

Code

const video = $htmlVideoElement as HTMLVideoElement
video.controlsList.value = "nodownload";

Expected behavior:

Works so we can do things as shown https://googlechrome.github.io/samples/media/controlslist.html and as documented by https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList

Actual behavior:

controlsList is not valid for HTMLVideoElement

Playground Link:
https://www.typescriptlang.org/play/#src=interface%20HTMLMediaElement%20%7B%0D%0A%20%20%20%20readonly%20controlsList%3A%20DOMTokenList%20%0D%0A%7D%0D%0A%0D%0Aclass%20Greeter%20%7B%0D%0A%20%20%20%20greeting%3A%20string%3B%0D%0A%20%20%20%20constructor(message%3A%20string)%20%7B%0D%0A%20%20%20%20%20%20%20%20this.greeting%20%3D%20message%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20greet()%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20%22Hello%2C%20%22%20%2B%20this.greeting%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%0D%0Alet%20greeter%20%3D%20new%20Greeter(%22world%22)%3B%0D%0A%0D%0Alet%20video%20%3D%20document.createElement('video')%20as%20HTMLVideoElement%3B%0D%0A%0D%0Avideo.controlsList.value%20%3D%20%22nodownload%22%0D%0A%0D%0Adocument.body.appendChild(video)%3B

Related Issues:
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/19500

Workaround is to add and let the declarations get merged.

declare global {
  interface HTMLMediaElement {
    readonly controlsList: DOMTokenList 
  }
}

Or add an ambient type file

interface HTMLMediaElement {
    readonly controlsList: DOMTokenList;
}

interface DOMTokenList {
    /**
     * Returns the associated set as string.
     * Can be set, to change the associated attribute.
     */
    value: string;
}

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、HTMLVideoElement の例で使用されている HTMLMediaElement と DOMTokenList の宣言を見つけます。文書化されている controlsList API とその value プロパティを現在の宣言と比較し、提供された Playground コードが ambient workaround なしで型チェックを通過することを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
frontend
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。