My set of Examples for Utility Types

utilityTypesExamples.ts

/* -------- Partial utility type ---------- */

interface FrontendDeveloper {
  name?: string;
  country?: string;
  languages?: string[];
}

type BackendDeveloper = Partial<FrontendDeveloper>;

const RequestedDeveloper: BackendDeveloper = {
  name: "Alvison Hunter",
};

console.log(RequestedDeveloper);

/* -------- Required utility type ---------- */

interface SoftwareEngineer {
  name?: string;
  stack: string;
  languages: string[];
}

const newSoftwareEng: Required<SoftwareEngineer> = {
  name: 'Alvison Hunter',
  stack: 'MERN',
  languages: ['JavaScript', 'TypeScript', 'Python', 'Golang'],
};

console.log(newSoftwareEng);

/* -------- Omit utility type ---------- */
interface PythonDeveloper {
  name?: string;
  country: string;
  language: string;
}

type PythonDevWithoutCountry= Omit<PythonDeveloper, 'country'>;

const newPythonDev: PythonDevWithoutCountry = {
  name: 'Declan Hunter',
  language: 'Python',
};

console.log(newPythonDev);

/* -------- Pick utility type ---------- */
interface JavaDeveloper {
  name?: string;
  country: string;
  language: string;
}

type CoreAttributes = Pick<JavaDeveloper, 'name' | 'country'> & { strongLanguage: string };

const newJavaDeveloper: CoreAttributes = {
  name: 'Francisco Membreno',
  country: 'Nicaragua',
  strongLanguage: 'Java',
};

console.log(newJavaDeveloper);

/* -------- ReadOnly utility type ---------- */
interface GolangDeveloper {
  name?: string;
  country: string;
  language: string;
}

const newGolangDev: Readonly<GolangDeveloper> = {
  name: 'Alvison Hunter',
  country: 'Nicaragua',
  language: 'JavaScript',
};

// Error: Cannot assign to 'name' because it is a read-only property.
newGolangDev.name = 'Alvison Lucas Hudson';
console.log(newGolangDev);


/* -------- Record utility type ---------- */
interface RubyDeveloper {
  name?: string;
  country: string;
  language: string;
}

type RubyDevsTeam = Record<'jsDev' | 'pyDev' | 'rbDev', RubyDeveloper>;

const newRubyDevTeam: RubyDevsTeam = {
  jsDev: { name: 'Alvison Hunter', country: 'Nicaragua', language:"JavaScript" },
  pyDev: { name: 'Declan Hunter', country: 'Unknown', language:"Python" },
  rbDev: { name: 'Liam Hunter', country: 'Unknown', language:"Ruby" },
};

console.log(newRubyDevTeam);

/* -------- ReturnType utility type ---------- */
interface WordPressDeveloper {
  name: string;
  pluginDev: boolean;
  blockEditor: string;
}

type greetWordPressDevProps = Pick<WordPressDeveloper, "name">;

const generateWelcomeMessage = ({ name }: greetWordPressDevProps): string => {
  return `Welcome, ${name}!`;
};

const TwelcomeMessage: ReturnType<typeof generateWelcomeMessage>= "Alvison";
console.log(typeof TwelcomeMessage);


/* -------- Parameters utility type ---------- */

const greetDeveloper = (name: string, country: string): string => {
  return `Welcome, ${name} from ${country}!`;
}

type ParametersType = Parameters<typeof greetDeveloper>;

const fnWithRetrievedParams = (params: ParametersType) => {
  const [name, country] = params;
  return [name, country];
}

console.log(fnWithRetrievedParams(["Alvison", "Nicaragua"]));

/* -------- NonNullable utility type ---------- */

type DeveloperWithNullableTitle = {
  name: string;
  title: string | null;
  country: string;
};

type NoNullsKeysProps<T> = {
  [K in keyof T]: NonNullable<T[K]>;
};

const nonNullableWebDevObj: NoNullsKeysProps<DeveloperWithNullableTitle> = {
  name: 'Alvison Hunter',
  title: "Senior Web Developer",
  country: 'Nicaragua',
};

console.log(nonNullableWebDevObj);

/* -------- Awaited utility type ---------- */
type TPromiseReturnType = {
  name: string;
  title: string;
  country: string;
};

const fakeResponse = {
  name: "Alvison Hunter",
  title: "Senior Web Developer",
  country: "Nicaragua",
};

async function fetchData(): Promise<TPromiseReturnType> {
  return fakeResponse;
}

type TfetchedDataReturnType = Awaited<ReturnType<typeof fetchData>>;

// Use an async function to await the fetchData promise
async function getFetchedData() {
  let fetchedData: TfetchedDataReturnType = await fetchData();
  console.log(fetchedData);
}

getFetchedData();