Replace interfaces to types

They are almost the same, but interfaces has fewer features than types. Excellent explanation here
https://www.youtube.com/watch?v=oiFo2z8ILNo

src/components-connected/album-ratings.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 
 import { useAlbumRatings } from 'src/stores/music-store'
 
-interface AlbumRatingsProps {
+type AlbumRatingsProps = {
   albumId: string
 }
 

src/components/error-boundary.tsx

@@ -1,11 +1,11 @@
 import { Component, ErrorInfo, ReactNode } from 'react'
 
-interface ErrorBoundaryProps {
+type ErrorBoundaryProps = {
   children: ReactNode
   fallback: ReactNode
 }
 
-interface ErrorBoundaryState {
+type ErrorBoundaryState = {
   hasError: boolean
 }
 

src/components/tooltip.tsx

@@ -1,7 +1,7 @@
 import { Tooltip as MUITooltip } from '@mui/material'
 import { ReactNode } from 'react'
 
-interface TooltipProps {
+type TooltipProps = {
   title: string
   /**
    * In some cases, we may want to disable the tooltip,

src/services/music-service.ts

@@ -9,11 +9,11 @@ export async function findTopAlbums(limit = 10): Promise<TopAlbumsResponse> {
 }
 
 // Generated by https://transform.tools/json-to-typescript
-export interface TopAlbumsResponse {
+export type TopAlbumsResponse = {
   feed: Feed
 }
 
-interface Feed {
+type Feed = {
   author: Author
   entry: Entry[]
   updated: Updated
@@ -24,20 +24,20 @@ interface Feed {
   id: Id2
 }
 
-interface Author {
+type Author = {
   name: Name
   uri: Uri
 }
 
-interface Name {
+type Name = {
   label: string
 }
 
-interface Uri {
+type Uri = {
   label: string
 }
 
-interface Entry {
+type Entry = {
   'im:name': ImName
   'im:image': ImImage[]
   'im:itemCount': ImItemCount
@@ -52,134 +52,134 @@ interface Entry {
   'im:releaseDate': ImReleaseDate
 }
 
-interface ImName {
+type ImName = {
   label: string
 }
 
-interface ImImage {
+type ImImage = {
   label: string
   attributes: Attributes
 }
 
-interface Attributes {
+type Attributes = {
   height: string
 }
 
-interface ImItemCount {
+type ImItemCount = {
   label: string
 }
 
-interface ImPrice {
+type ImPrice = {
   label: string
   attributes: Attributes2
 }
 
-interface Attributes2 {
+type Attributes2 = {
   amount: string
   currency: string
 }
 
-interface ImContentType {
+type ImContentType = {
   'im:contentType': ImContentType2
   attributes: Attributes4
 }
 
-interface ImContentType2 {
+type ImContentType2 = {
   attributes: Attributes3
 }
 
-interface Attributes3 {
+type Attributes3 = {
   term: string
   label: string
 }
 
-interface Attributes4 {
+type Attributes4 = {
   term: string
   label: string
 }
 
-interface Rights {
+type Rights = {
   label: string
 }
 
-interface Title {
+type Title = {
   label: string
 }
 
-interface Link {
+type Link = {
   attributes: Attributes5
 }
 
-interface Attributes5 {
+type Attributes5 = {
   rel: string
   type: string
   href: string
 }
 
-interface Id {
+type Id = {
   label: string
   attributes: Attributes6
 }
 
-interface Attributes6 {
+type Attributes6 = {
   'im:id': string
 }
 
-interface ImArtist {
+type ImArtist = {
   label: string
   attributes?: Attributes7
 }
 
-interface Attributes7 {
+type Attributes7 = {
   href: string
 }
 
-interface Category {
+type Category = {
   attributes: Attributes8
 }
 
-interface Attributes8 {
+type Attributes8 = {
   'im:id': string
   term: string
   scheme: string
   label: string
 }
 
-interface ImReleaseDate {
+type ImReleaseDate = {
   label: string
   attributes: Attributes9
 }
 
-interface Attributes9 {
+type Attributes9 = {
   label: string
 }
 
-interface Updated {
+type Updated = {
   label: string
 }
 
-interface Rights2 {
+type Rights2 = {
   label: string
 }
 
-interface Title2 {
+type Title2 = {
   label: string
 }
 
-interface Icon {
+type Icon = {
   label: string
 }
 
-interface Link2 {
+type Link2 = {
   attributes: Attributes10
 }
 
-interface Attributes10 {
+type Attributes10 = {
   rel: string
   type?: string
   href: string
 }
 
-interface Id2 {
+type Id2 = {
   label: string
 }

src/stores/store-provider.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 import { RecoilRoot } from 'recoil'
 import { RecoilURLSyncJSON } from 'recoil-sync'
 
-interface StoreProviderProps {
+type StoreProviderProps = {
   children: ReactNode
 }