Merge pull request #2111 from Shopify/dangit-typescript

Fix issue where TS couldn't infer types for things with subcomponents

Author: chloerice

UNRELEASED.md

@@ -12,6 +12,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Worked around issue where TypeScript will not generate correct types for functional components that have subcomponents ([#2111](https://github.com/Shopify/polaris-react/pull/2111))
+
 ### Documentation
 
 ### Development workflow

src/components/Autocomplete/Autocomplete.tsx

@@ -38,7 +38,15 @@ export interface AutocompleteProps {
   onLoadMoreResults?(): void;
 }
 
-export function Autocomplete({
+// TypeScript can't generate types that correctly infer the typing of
+// subcomponents so explicitly state the subcomponents in the type definition.
+// Letting this be implicit works in this project but fails in projects that use
+// generated *.d.ts files.
+
+export const Autocomplete: React.FunctionComponent<AutocompleteProps> & {
+  ComboBox: typeof ComboBox;
+  TextField: typeof TextField;
+} = function Autocomplete({
   id,
   options,
   selected,
@@ -86,7 +94,7 @@ export function Autocomplete({
       emptyState={emptyState}
     />
   );
-}
+};
 
-Autocomplete.TextField = TextField;
 Autocomplete.ComboBox = ComboBox;
+Autocomplete.TextField = TextField;

src/components/Card/Card.tsx

@@ -31,7 +31,16 @@ export interface CardProps {
   secondaryFooterActionsDisclosureText?: string;
 }
 
-export function Card({
+// TypeScript can't generate types that correctly infer the typing of
+// subcomponents so explicitly state the subcomponents in the type definition.
+// Letting this be implicit works in this project but fails in projects that use
+// generated *.d.ts files.
+
+export const Card: React.FunctionComponent<CardProps> & {
+  Header: typeof Header;
+  Section: typeof Section;
+  Subsection: typeof Subsection;
+} = function Card({
   children,
   title,
   subdued,
@@ -102,8 +111,8 @@ export function Card({
       </div>
     </WithinContentContext.Provider>
   );
-}
+};
 
-Card.Section = Section;
 Card.Header = Header;
+Card.Section = Section;
 Card.Subsection = Subsection;

src/components/TopBar/TopBar.tsx

@@ -33,7 +33,16 @@ export interface TopBarProps {
   onNavigationToggle?(): void;
 }
 
-export function TopBar({
+// TypeScript can't generate types that correctly infer the typing of
+// subcomponents so explicitly state the subcomponents in the type definition.
+// Letting this be implicit works in this project but fails in projects that use
+// generated *.d.ts files.
+
+export const TopBar: React.FunctionComponent<TopBarProps> & {
+  Menu: typeof Menu;
+  SearchField: typeof SearchField;
+  UserMenu: typeof UserMenu;
+} = function TopBar({
   showNavigationToggle,
   userMenu,
   searchResults,
@@ -123,8 +132,8 @@ export function TopBar({
       </div>
     </div>
   );
-}
+};
 
-TopBar.UserMenu = UserMenu;
-TopBar.SearchField = SearchField;
 TopBar.Menu = Menu;
+TopBar.SearchField = SearchField;
+TopBar.UserMenu = UserMenu;