Difference between Record<key, type> and [key: string]: type

I want to know the difference between the Record<key, type> and the [key: string]: type. Could we use them interchangeably? Which is more dynamic and type-safe?

I have one example where I have used both of them interchangeably. Which one is good practice to use?

//Record example
interface PageInfo {
  title: string;
}

type Page = "home" | "about" | "contact";

const nav: Record<Page, PageInfo> = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" },
};

console.log(nav.about);
// object example

type Page2 = {
  [key: string]: PageInfo;
};

const navHtml: Page2 = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" },
};

console.log(navHtml.contact);

Typescript playground for this example

Solution

first of all, AFAIK, none of them is completely type safe.

See this issue

You can use union type as a key in Record - Record<Page, PageInfo>, which you can't in indexed type:

type Page2 = {
  [key: string | number | symbol]: PageInfo; // error
};

Example

//Record example
interface PageInfo {
  title: string;
}

type Page = "home" | "about" | "contact";

const nav: Record<Page, PageInfo> = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" },
};

console.log(nav.about);
// object example

type Page2 = {
  [key: string]: PageInfo;
};

const navHtml: Page2 = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" },
};

console.log(navHtml.contact);

/**
 * If you have a string as a key - no problem
 */
type Test1 = Record<string, string> extends { [p: string]: string } ? true : false // true
type Test2 = { [p: string]: string } extends Record<string, string> ? true : false // true

const foo = (arg: Record<string, string>) => arg
const indexed: { [p: string]: string } = { bar: 'bar' }
foo(indexed) // no error

/**
 * And vice-versa
 */
const bar = (arg: { [p: string]: string }) => arg
const record: Record<string, string> = { bar: 'bar' }
foo(record) // no error

/**
 * But if you have a union type as a key
 * Above approach will not work
 */
type Test3 = Record<'a' | 'b', string> extends { [p: string]: string } ? true : false // true
type Test4 = { [p: string]: string } extends Record<'a' | 'b', string> ? true : false // false

const withIndex: Record<'a' | 'b', string> = { bar: 'bar' } // missing a,b

UPDATE

/**
 * Explanation of Record<'a'|'b', string>
 * It is mean that objects should have a & b keys
 */

type CustomRecord = Record<'a' | 'b', string>

const allowedRecord: CustomRecord = {
  a: '1',
  b: '2'
} // ok

const allowedRecord2: CustomRecord = {
  a: '1',
} // error, because without b

const allowedRecord3: CustomRecord = {
  b: '1',
} // error, because without a

/**
 * You are unable to do same thing with indexed type
 */
type TypeIndexedWIthExplicitKeys = {
  [p: string | number]: string
}

interface InterfaceIndexedWIthExplicitKeys {
  [p: 'a' | 'b']: string
}

const x: InterfaceIndexedWIthExplicitKeys = { 2: 's' } // no error, but.... I would expect an error
const y: TypeIndexedWIthExplicitKeys = { 2: 's' } // no error, but.... I would expect an error


const check = (): InterfaceIndexedWIthExplicitKeys => {
  return { 2: 2 } // no error, but I would expect
}
type MyRecord = Record<'a' | 'b', string>

const z: MyRecord = { 2: '2' } // error, because we expect a & b
const c: MyRecord = { a: '2', b: '3' } // ok