i18n: use automatic type inference of translation keys

Finally figured out a way to make typescript strongly type translation
keys so we can avoid the tedium of creating enums of translation keys.

src/explorer/newFileWizard/NewFileWizard.tsx

@@ -16,7 +16,7 @@ import {
 import { useSelector } from '../../reducers';
 import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { newFileWizardDidAccept, newFileWizardDidCancel } from './actions';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 // This should be set to the most commonly used hub.
 const defaultHub = Hub.Technic;
@@ -54,7 +54,7 @@ const NewFileWizard: React.VoidFunctionComponent = () => {
     return (
         <Dialog
             icon="plus"
-            title={i18n.translate(I18nId.Title)}
+            title={i18n.translate('title')}
             isOpen={isOpen}
             onOpening={() => setFileName('')}
             onOpened={() => fileNameInputRef.current?.focus()}
@@ -69,7 +69,7 @@ const NewFileWizard: React.VoidFunctionComponent = () => {
                         inputRef={fileNameInputRef}
                         onChange={setFileName}
                     />
-                    <FormGroup label={i18n.translate(I18nId.SmartHubLabel)}>
+                    <FormGroup label={i18n.translate('smartHub.label')}>
                         <HubPicker hubType={hubType} onChange={setHubType} />
                     </FormGroup>
                 </div>
@@ -84,7 +84,7 @@ const NewFileWizard: React.VoidFunctionComponent = () => {
                             type="submit"
                         >
                             <span id={acceptButtonLabelId}>
-                                {i18n.translate(I18nId.ActionCreate)}
+                                {i18n.translate('action.create')}
                             </span>
                         </Button>
                     </div>

src/explorer/newFileWizard/i18n.test.ts

@@ -1,12 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-import { lookup } from '../../../test';
-import { I18nId } from './i18n';
-import en from './translations/en.json';
-
-describe('Ensure .json file has matches for I18nId', () => {
-    test.each(Object.values(I18nId))('%s', (id) => {
-        expect(lookup(en, id)).toBeDefined();
-    });
-});

src/explorer/newFileWizard/i18n.ts

@@ -1,16 +1,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-import { I18n, useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import type { TypedI18n } from '../../i18n';
+import type translations from './translations/en.json';
 
-export function useI18n(): I18n {
+export function useI18n(): TypedI18n<typeof translations> {
     // istanbul ignore next: babel-loader rewrites this line
     const [i18n] = useShopifyI18n();
     return i18n;
 }
-
-export enum I18nId {
-    Title = 'title',
-    SmartHubLabel = 'smartHub.label',
-    ActionCreate = 'action.create',
-}