chore(eslint): enable strict rule set form @typescript-eslint

- fix linter errors
- remove no-type-assertion plugin

Author: SimonGolms

.eslintrc.js

@@ -9,6 +9,8 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:@typescript-eslint/strict',
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:import/recommended',
@@ -31,6 +33,10 @@ module.exports = {
     },
   ],
   parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
   plugins: [
     '@typescript-eslint',
     'jsx-a11y',
@@ -39,11 +45,18 @@ module.exports = {
     'sonarjs',
     'sort-keys-fix',
     'typescript-sort-keys',
-    'no-type-assertion',
     // HINT: prettier must be the last plugin to work
     'prettier',
   ],
   rules: {
+    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+    '@typescript-eslint/no-floating-promises': ['error', { ignoreVoid: true }],
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: false,
+      },
+    ],
     '@typescript-eslint/no-unused-vars': [
       'warn',
       {
@@ -90,7 +103,6 @@ module.exports = {
     ],
     'import/prefer-default-export': 'off',
     'no-console': ['warn', { allow: ['warn', 'error'] }],
-    'no-type-assertion/no-type-assertion': 'error',
     'prettier/prettier': 'error',
     'react/jsx-sort-default-props': 'error',
     'react/jsx-sort-props': [

.lintstagedrc.js

@@ -1,8 +1,13 @@
 module.exports = {
   '*.css': ['stylelint --fix', 'git add --force'],
-  '*.{js,jsx,ts,tsx}': [
-    // Extend rule levels based on .eslintrc.js
-    "eslint --fix --rule '@typescript-eslint/no-unused-vars: error' --rule 'no-console: error'",
+  '*.{js,jsx}': [
+    // Extend rule set of .eslintrc.js with 'no-console' and 'no-unused-vars'
+    "eslint --fix --rule 'no-console: [error, { allow: [warn, error] }]' --rule 'no-unused-vars: error'",
+    'git add --force',
+  ],
+  '*.{ts,tsx}': [
+    // Extend rule set of .eslintrc.js with 'no-console' and '@typescript-eslint/no-unused-vars'
+    "eslint --fix --rule 'no-console: [error, { allow: [warn, error] }]' --rule '@typescript-eslint/no-unused-vars: [error, { argsIgnorePattern: ^_, caughtErrorsIgnorePattern: ^_, varsIgnorePattern: ^_, }]'",
     'git add --force',
   ],
   '*.json': ['prettier --write', 'git add --force'],

src/auth.ts

@@ -1,8 +1,8 @@
 import {
-  AuthenticationResult,
+  type AuthenticationResult,
   BrowserAuthError,
   type Configuration,
-  EventMessage,
+  type EventMessage,
   EventType,
   InteractionRequiredAuthError,
   PublicClientApplication,
@@ -44,15 +44,14 @@ msalInstance.enableAccountStorageEvents();
 
 msalInstance.addEventCallback((event: EventMessage) => {
   if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
-    // eslint-disable-next-line no-type-assertion/no-type-assertion
     const payload = event.payload as AuthenticationResult;
     const account = payload.account;
     msalInstance.setActiveAccount(account);
   }
 });
 
 export const aquireTokenMsal = async () => {
-  const account = msalInstance.getActiveAccount() || undefined;
+  const account = msalInstance.getActiveAccount() ?? undefined;
 
   return msalInstance
     .acquireTokenSilent({
@@ -70,8 +69,8 @@ export const aquireTokenMsal = async () => {
           account,
           scopes: ['User.Read'],
         })
-        .catch((errorSsoSilent: Error) => {
-          msalInstance.acquireTokenRedirect({
+        .catch(async (errorSsoSilent: Error) => {
+          await msalInstance.acquireTokenRedirect({
             account,
             prompt: 'select_account',
             scopes: ['User.Read'],

src/components/Avatar/Avatar.test.tsx

@@ -11,7 +11,7 @@ import { Avatar } from './Avatar';
 const { mail } = MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME;
 
 test.beforeEach(async ({ page }) => {
-  page.route(`**/v1.0/users/${mail}/photos/64x64/$value`, async (route) => {
+  await page.route(`**/v1.0/users/${mail}/photos/64x64/$value`, async (route) => {
     return route.fulfill({
       body: Buffer.from(MOCK_RESPONST_MICROSOFT_GRAPH_GET_USERS_PHOTOS_64_VALUE, 'base64'),
       contentType: 'image/jpeg',

src/components/Avatar/Avatar.tsx

@@ -18,7 +18,7 @@ export const Avatar = ({ id, expand, ...rest }: AvatarProps) => {
 
   return (
     <IonAvatar className={expand ? styles.expand : ''} {...rest}>
-      <img alt={`avatar-${id}`} src={data} />
+      <img alt={`avatar-${id ?? 'default'}`} src={data} />
     </IonAvatar>
   );
 };

src/components/ButtonLogIn/ButtonLogIn.tsx

@@ -19,10 +19,10 @@ export const ButtonLogIn = ({ prompt }: TProps) => {
    * see: https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-prompt-behavior
    */
   const { searchParams } = useSearchParams();
-  const promptBehavior = useMemo(() => (searchParams?.prompt || prompt) ?? undefined, [prompt, searchParams]);
+  const promptBehavior = useMemo(() => (searchParams.prompt || prompt) ?? undefined, [prompt, searchParams]);
 
-  const handleClickLoginRedirect = useCallback(() => {
-    instance.loginRedirect({
+  const handleClickLoginRedirect = useCallback(async () => {
+    await instance.loginRedirect({
       ...REDIRECT_REQUEST,
       prompt: promptBehavior,
     });

src/components/ButtonLogOut/ItemLogOut.tsx

@@ -9,8 +9,8 @@ export const ItemLogOut = () => {
 
   const isDisabled = useMemo(() => inProgress === InteractionStatus.Logout, [inProgress]);
 
-  const handleClickLoginRedirect = useCallback(() => {
-    instance.logoutRedirect();
+  const handleClickLoginRedirect = useCallback(async () => {
+    await instance.logoutRedirect();
   }, [instance]);
 
   return (

src/components/ButtonReset/ItemResetUserState.tsx

@@ -3,8 +3,8 @@ import { IonItem, IonLabel } from '@ionic/react';
 import { persistor } from '../../store';
 
 export const ItemResetUserState = ({ label = 'Reset', labelColor = 'danger', ...rest }: TProps) => {
-  const handleClick = useCallback(() => {
-    persistor.purge();
+  const handleClick = useCallback(async () => {
+    await persistor.purge();
   }, []);
 
   return (

src/components/Greeter/Greeter.test.tsx

@@ -5,8 +5,8 @@ import { MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME } from '../../utils/test/api.me.mo
 import { MsalMock } from '../../utils/test/MsalMock';
 import { Greeter } from './Greeter';
 
-test.beforeEach(({ page }) => {
-  page.route('**/v1.0/me/', (route) => {
+test.beforeEach(async ({ page }) => {
+  await page.route('**/v1.0/me/', (route) => {
     return route.fulfill({
       body: JSON.stringify(MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME),
       contentType: 'application/json',

src/components/Message/MessageAccessInformation.test.tsx

@@ -4,7 +4,7 @@ import { MessageAccessInformation } from './MessageAccessInformation';
 test.describe('MessageAccessInformation', () => {
   test('renders', async ({ mount }) => {
     const component = await mount(<MessageAccessInformation />);
-    await expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 
   test('shows text', async ({ mount }) => {
@@ -27,7 +27,7 @@ test.describe('MessageAccessInformation', () => {
       component.getByRole('link', { name: 'Microsoft Docs' }).click(), // Opens a new tab
     ]);
     await newPage.waitForLoadState();
-    await expect(await newPage.title()).toBeTruthy();
+    expect(await newPage.title()).toBeTruthy();
   });
 
   test('click on link to navigate to microsoft docs about app roles', async ({ context, mount }) => {
@@ -41,6 +41,6 @@ test.describe('MessageAccessInformation', () => {
       component.getByRole('link', { name: 'How to add app roles in Azure AD apps' }).click(), // Opens a new tab
     ]);
     await newPage.waitForLoadState();
-    await expect(await newPage.title()).toBeTruthy();
+    expect(await newPage.title()).toBeTruthy();
   });
 });