TypeScript Packages / Smart Monorepo / Sync TypeScript References

Sync TypeScript References

The build task for the zoo project has a sync generator defined. The @nx/js:typescript-sync generator will automatically update the references property in the tsconfig.json files across the repository to match the actual dependencies in your code.

Let’s see this behavior in action by extracting some common code into a new util library.

First, create a library with @nx/js:lib generator:

nx g @nx/js:lib packages/util

Set the bundler to tsc, the linter to none and the unit test runner to none.

Now we can move the getRandomItem function from packages/names/names.ts and packages/animals/animals.ts into the packages/util/src/lib/util.ts file.

export function getRandomItem<T>(arr: T[]): T {
  return arr[Math.floor(Math.random() * arr.length)];
}

import { getRandomItem } from '@tuskdesign/util';

31 collapsed lines
export type Animal = {
  name: string;
  sound: string;
};

export const ANIMALS = [
  {
    name: "dog",
    sound: "bark",
  },
  {
    name: "cat",
    sound: "meow",
  },
  {
    name: "cow",
    sound: "moo",
  },
  {
    name: "rooster",
    sound: "cock-a-doodle-doo",
  },
  {
    name: "pig",
    sound: "oink",
  },
];

export function getRandomAnimal() {
  return getRandomItem(ANIMALS);
}

import { getRandomItem } from '@tuskdesign/util';

101 collapsed lines
export const NAMES = [
  "Brie",
  "Vinnie",
  "Romeo",
  "Kid",
  "Stella",
  "Cody",
  "Nickers",
  "Lynx",
  "Kramer",
  "Arrow",
  "Mulligan",
  "Kallie",
  "Dante",
  "Kane",
  "Klaus",
  "Dolly",
  "Moose",
  "Bella",
  "Quincy",
  "Tuck",
  "Jenny",
  "Pirate",
  "Tucker",
  "Lilly",
  "Monkey",
  "Tessie",
  "Tyler",
  "Patty",
  "Hammer",
  "Freddy",
  "Snoop",
  "Maggie-moo",
  "Connor",
  "Erin",
  "Simone",
  "Buddie",
  "Bobo",
  "Baby Doll",
  "Bugsey",
  "Wally",
  "Bullet",
  "Bo",
  "Opie",
  "Alex",
  "Carley",
  "Mason",
  "Boris",
  "Duchess",
  "Smoke",
  "Skinny",
  "Wilber",
  "Georgie",
  "Axel",
  "Tramp",
  "Cinnamon",
  "Freckles",
  "Jimmuy",
  "Copper",
  "Toto",
  "Puck",
  "Jojo",
  "Grover",
  "Grizzly",
  "Tequila",
  "Tipr",
  "Pepper",
  "Clyde",
  "Morgan",
  "Poppy",
  "Killian",
  "Odie",
  "Ralphie",
  "Frisky",
  "Elwood",
  "Flower",
  "Ivy",
  "Kiwi",
  "Tippy",
  "Sandy",
  "Salem",
  "Sheena",
  "Flint",
  "Macho",
  "Moonshine",
  "Jetta",
  "Gabby",
  "Oscar",
  "Rollie",
  "Cotton",
  "Oakley",
  "Ruby",
  "Jackpot",
  "Dudley",
  "Fancy",
  "Howie",
];

export function getRandomName(): string {
  return getRandomItem(NAMES);
}

Now if you run the build, Nx will notice that the TypeScript project references need to be updated and ask your permission to update them.

nx build zoo

 NX   The workspace is out of sync

The @nx/js:typescript-sync sync generator identified 6 files in the workspace that are out of sync:
Based on the workspace project graph, some TypeScript configuration files are missing project references to the projects they depend on or contain outdated project references.

Please note that having the workspace out of sync will result in an error in CI.

? Would you like to sync the identified changes to get your workspace up to date? …
❯ Yes, sync the changes and run the tasks
  No, run the tasks without syncing the changes

Allow the sync to happen and you’ll see that the tsconfig.json and tsconfig.lib.json files have been updated to include references to the new util library. With this system in place, no matter how your codebase changes, the TypeScript project references will always be correct.

Add the @nx/js Plugin

Checkpoint

Files

Preparing Environment

Stubbing git
Installing dependencies