Ignore data- props when excess property checking (#36952) (#37031)

Author: weswigham

src/compiler/checker.ts

@@ -15258,7 +15258,7 @@ namespace ts {
                     checkTypes = reducedTarget.flags & TypeFlags.Union ? (<UnionType>reducedTarget).types : [reducedTarget];
                 }
                 for (const prop of getPropertiesOfType(source)) {
-                    if (shouldCheckAsExcessProperty(prop, source.symbol)) {
+                    if (shouldCheckAsExcessProperty(prop, source.symbol) && !isIgnoredJsxProperty(source, prop)) {
                         if (!isKnownProperty(reducedTarget, prop.escapedName, isComparingJsxAttributes)) {
                             if (reportErrors) {
                                 // Report error in terms of object types in the target as those are the only ones

tests/baselines/reference/tsxUnionMemberChecksFilterDataProps.js

@@ -0,0 +1,21 @@
+//// [tsxUnionMemberChecksFilterDataProps.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+import React, { ReactElement } from "react";
+
+declare function NotHappy(props: ({ fixed?: boolean } | { value?: number })): ReactElement<any>;
+declare function Happy(props: { fixed?: boolean, value?: number }): ReactElement<any>;
+
+const RootNotHappy = () => (<NotHappy data-testid="my-test-id" />);
+const RootHappy = () => (<Happy data-testid="my-test-id" />);
+
+
+//// [tsxUnionMemberChecksFilterDataProps.js]
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/// <reference path="react16.d.ts" />
+var react_1 = __importDefault(require("react"));
+var RootNotHappy = function () { return (react_1["default"].createElement(NotHappy, { "data-testid": "my-test-id" })); };
+var RootHappy = function () { return (react_1["default"].createElement(Happy, { "data-testid": "my-test-id" })); };

tests/baselines/reference/tsxUnionMemberChecksFilterDataProps.symbols

@@ -0,0 +1,30 @@
+=== tests/cases/compiler/tsxUnionMemberChecksFilterDataProps.tsx ===
+/// <reference path="react16.d.ts" />
+import React, { ReactElement } from "react";
+>React : Symbol(React, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 1, 6))
+>ReactElement : Symbol(ReactElement, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 1, 15))
+
+declare function NotHappy(props: ({ fixed?: boolean } | { value?: number })): ReactElement<any>;
+>NotHappy : Symbol(NotHappy, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 1, 44))
+>props : Symbol(props, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 3, 26))
+>fixed : Symbol(fixed, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 3, 35))
+>value : Symbol(value, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 3, 57))
+>ReactElement : Symbol(ReactElement, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 1, 15))
+
+declare function Happy(props: { fixed?: boolean, value?: number }): ReactElement<any>;
+>Happy : Symbol(Happy, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 3, 96))
+>props : Symbol(props, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 4, 23))
+>fixed : Symbol(fixed, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 4, 31))
+>value : Symbol(value, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 4, 48))
+>ReactElement : Symbol(ReactElement, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 1, 15))
+
+const RootNotHappy = () => (<NotHappy data-testid="my-test-id" />);
+>RootNotHappy : Symbol(RootNotHappy, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 6, 5))
+>NotHappy : Symbol(NotHappy, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 1, 44))
+>data-testid : Symbol(data-testid, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 6, 37))
+
+const RootHappy = () => (<Happy data-testid="my-test-id" />);
+>RootHappy : Symbol(RootHappy, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 7, 5))
+>Happy : Symbol(Happy, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 3, 96))
+>data-testid : Symbol(data-testid, Decl(tsxUnionMemberChecksFilterDataProps.tsx, 7, 31))
+

tests/baselines/reference/tsxUnionMemberChecksFilterDataProps.types

@@ -0,0 +1,34 @@
+=== tests/cases/compiler/tsxUnionMemberChecksFilterDataProps.tsx ===
+/// <reference path="react16.d.ts" />
+import React, { ReactElement } from "react";
+>React : typeof React
+>ReactElement : any
+
+declare function NotHappy(props: ({ fixed?: boolean } | { value?: number })): ReactElement<any>;
+>NotHappy : (props: { fixed?: boolean; } | { value?: number; }) => React.ReactElement<any>
+>props : { fixed?: boolean; } | { value?: number; }
+>fixed : boolean
+>value : number
+
+declare function Happy(props: { fixed?: boolean, value?: number }): ReactElement<any>;
+>Happy : (props: { fixed?: boolean; value?: number; }) => React.ReactElement<any>
+>props : { fixed?: boolean; value?: number; }
+>fixed : boolean
+>value : number
+
+const RootNotHappy = () => (<NotHappy data-testid="my-test-id" />);
+>RootNotHappy : () => JSX.Element
+>() => (<NotHappy data-testid="my-test-id" />) : () => JSX.Element
+>(<NotHappy data-testid="my-test-id" />) : JSX.Element
+><NotHappy data-testid="my-test-id" /> : JSX.Element
+>NotHappy : (props: { fixed?: boolean; } | { value?: number; }) => React.ReactElement<any>
+>data-testid : string
+
+const RootHappy = () => (<Happy data-testid="my-test-id" />);
+>RootHappy : () => JSX.Element
+>() => (<Happy data-testid="my-test-id" />) : () => JSX.Element
+>(<Happy data-testid="my-test-id" />) : JSX.Element
+><Happy data-testid="my-test-id" /> : JSX.Element
+>Happy : (props: { fixed?: boolean; value?: number; }) => React.ReactElement<any>
+>data-testid : string
+

tests/cases/compiler/tsxUnionMemberChecksFilterDataProps.tsx

@@ -0,0 +1,10 @@
+// @jsx: react
+// @esModuleInterop: true
+/// <reference path="/.lib/react16.d.ts" />
+import React, { ReactElement } from "react";
+
+declare function NotHappy(props: ({ fixed?: boolean } | { value?: number })): ReactElement<any>;
+declare function Happy(props: { fixed?: boolean, value?: number }): ReactElement<any>;
+
+const RootNotHappy = () => (<NotHappy data-testid="my-test-id" />);
+const RootHappy = () => (<Happy data-testid="my-test-id" />);