fix(eslint-plugin): handle jsx attributes

bradzacher · bradzacher · commit df410a11963a · 2019-09-23T10:20:09.000-07:00
diff --git a/packages/eslint-plugin/src/rules/no-unnecessary-type-assertion.ts b/packages/eslint-plugin/src/rules/no-unnecessary-type-assertion.ts
@@ -1,6 +1,7 @@
 import { TSESTree } from '@typescript-eslint/experimental-utils';
 import {
   isCallExpression,
+  isJsxExpression,
   isNewExpression,
   isObjectType,
   isObjectFlagSet,
@@ -117,6 +118,8 @@ export default util.createRule<Options, MessageIds>({
         return parent.type
           ? checker.getTypeFromTypeNode(parent.type)
           : undefined;
+      } else if (isJsxExpression(parent)) {
+        return checker.getContextualType(parent);
       } else if (
         ![ts.SyntaxKind.TemplateSpan, ts.SyntaxKind.JsxExpression].includes(
           parent.kind,
@@ -216,10 +219,17 @@ export default util.createRule<Options, MessageIds>({
               contextualType,
               ts.TypeFlags.Null,
             );
-            if (
-              (typeIncludesUndefined && contextualTypeIncludesUndefined) ||
-              (typeIncludesNull && contextualTypeIncludesNull)
-            ) {
+
+            // make sure that the parent accepts the same types
+            // i.e. assigning `string | null | undefined` to `string | undefined` is invalid
+            const isValidUndefined = typeIncludesUndefined
+              ? contextualTypeIncludesUndefined
+              : true;
+            const isValidNull = typeIncludesNull
+              ? contextualTypeIncludesNull
+              : true;
+
+            if (isValidUndefined && isValidNull) {
               context.report({
                 node,
                 messageId: 'contextuallyUnnecessary',
diff --git a/packages/eslint-plugin/tests/rules/no-unnecessary-type-assertion.test.ts b/packages/eslint-plugin/tests/rules/no-unnecessary-type-assertion.test.ts
@@ -117,33 +117,6 @@ function Test(props: {
       `,
       filename: 'react.tsx',
     },
-    {
-      code: `
-const React = require("react");
-
-export namespace appTest {
-  type ArtificialKey = string | number;
-  interface ReactAttributeArtificial {
-    key?: ArtificialKey;
-  }
-  type Data = {
-    id?: null | string | number;
-  };
-
-  export const Test = (props: Data) => {
-    return ChildFn({ key: props.id! });
-  };
-
-  export const Test2 = (props: Data) => {
-    return <ChildCmp key={props.id} />;
-  };
-
-  const ChildFn = (props: ReactAttributeArtificial) => "Hello";
-  const ChildCmp = () => <div>Hello</div>;
-}
-      `,
-      filename: 'react.tsx',
-    },
   ],
 
   invalid: [
@@ -354,5 +327,33 @@ class Mx {
         },
       ],
     },
+    // https://github.com/typescript-eslint/typescript-eslint/issues/982
+    {
+      code: `
+const React = require("react");
+
+function Test(props: {
+  id?: string | number;
+}) {
+  return <div key={props.id!} />;
+};
+      `,
+      output: `
+const React = require("react");
+
+function Test(props: {
+  id?: string | number;
+}) {
+  return <div key={props.id} />;
+};
+      `,
+      errors: [
+        {
+          messageId: 'contextuallyUnnecessary',
+          line: 7,
+        },
+      ],
+      filename: 'react.tsx',
+    },
   ],
 });
