microsoft / microsoft/TypeScript

No type error when setting an unknown property of a JSX element

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

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

In Discussion Suggestion
主要言語
Go
スター
111k
フォーク
14.4k
平均マージ
1日 19時間
マージ済み PR(30日)
117

説明

Bug Report

I've augmented solid-js's JSX.IntrinsicElements with new intrinsic elements made within my solid-js-consuming application.

When I write an unknown prop manually (not with spread as detailed in https://github.com/microsoft/TypeScript/issues/18801), I do not get a type error.

https://user-images.githubusercontent.com/297678/104986944-4a9c7c00-59c9-11eb-9a24-24edb1dd8617.mp4

🔎 Search Terms

typescript no error on unknown prop

🕗 Version & Regression Information

Not sure when this happened, but I've been trying unsuccessfully to import {JSX} into particular files to as not to clash with React's global JSX definitions, but because import {JSX} does not work (https://github.com/microsoft/TypeScript/issues/41813), I've since started trying to use the new @jsxImportSource feature as comments inside my files.

So far, I have gotten types to appear using per-file @jsxImportSource comments, and there are no other global JSX types in those files (I have segregated React JSX code from Solid.js JSX code using Project References and placing the two forms of files in separate projects with their own tsconfig to ensure only certain types are available to each group of files).

So, I'm not sure, but it could be that I'm one of the few people testing unknown waters in TypeScript, and hitting this issue.

I have not tried with an older version of TypeScript, because @jsxImportSource doesn't work there, and import {JSX} has never worked for JSX markup (#41813).

⏯ Playground Link

I tried to recreate the issue in playground, but due to https://github.com/microsoft/TypeScript-Website/issues/1427, @jsxImportSource comments to not work in the playground, so I can't reproduce a small version of my environment.

The following is my attempt to try @jsxImportSource just to get started, but no luck (same example from https://github.com/microsoft/TypeScript-Website/issues/1427):

playground

I'll see if I can make a reproduction in a repo...

💻 Code

As you see in the video, I can hover on an unknown prop, and TypeScript will infer the type of the prop as whatever value I have set it to.

For example, in the next video I changed the value to a number, and now the type shows up as a number instead of a function:

https://user-images.githubusercontent.com/297678/104987468-a9aec080-59ca-11eb-83ed-11f802b4d8ba.mp4

I have double checked that the type supplied to JSX.IntrinsicElements does not contain an index signature. There are only specific properties defined in the type of the video's timeline-scrubber.

🙁 Actual behavior

It infers unknown props.

🙂 Expected behavior

It should give a type error.

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

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

はじめの一歩

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

調査の方向性

まず、報告されているファイルごとの JSX.IntrinsicElements と @jsxImportSource のシナリオを、リンクされた Playground の試行を参照し、その記載された制限を考慮しながら、縮小して再現してください。手動で記述された未知の JSX props がどのようにチェックされるかを追跡し、spread props は対象外とします。手動で記述された未知の prop が型エラーを生成し、報告されている Solid.js と React の JSX の分離を壊さなければ完了です。

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

評価

技術スタック
typescript
領域
compilers
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
35/100

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

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