> Supporting multiple exports with full type declarations in a Typescript package isn't always straightforward.

You've mastered typescript basics, conquered generics and squashed overloads; but there's one thing you still haven't tackled - multiple package exports in typescript.

To get started, let's look at the anatomy of a regular single export starting with our package's manifest.

```json[class="line-numbers"]
{
  "name": "my-typescript-module",
  "version": "1.0.0",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts"
}
```

In the above example, the first 2 lines should look familiar with our modules name and version. Moving on to the next 2 lines:

- `main` lets node know the entry point to our package when we required/import it
- `types` is typescript specific and lets our editor know where to find type declarations for our module

For a module with a single export, the above setup works great - upon requiring/importing we get type information and all is well. However, should you want to have multiple exports, we'll need to change up our `package.json` in a few ways shown in the example below.

```json[class="line-numbers"]
{
  "name": "my-typescript-module",
  "version": "1.0.0",
  "exports": {
    ".": "./dist/index.js",
    "./engine": "./dist/engine.js"
  },
  "typesVersions": {
    "*": {
      "*": ["./dist/*"]
    }
  }
}
```

In the above example, we can see the same 2 familiar first lines with name and version. We've also removed the `main` and `types` declarations in favor of the lines below it as follows:

- `exports` is effectively `main` on steroids and allows us to define an object containing all of our exports. The key denotes the name of the export with `.` being a special placeholder for our "root export"
- `typesVersions` is a typescript-specific object containing a nested object where the top level key matches `semver` range Typescript version where `*` matches any. Within that key is another object containing a path map allowing us to specify where our type declarations live.

The `typesVersions` in the above example is essentially globbing for all type declarations regardless of Typescript version and what export were referencing, allowing us to quickly manage multiple exports with room to target specific versions of Typescript and more specific declarations in the future, should we need it.


> It's easy to pull in `lodash` for javascript array operations, but here are a few quick hits that give the same results - without yet another dependency!

While libraries like `lodash` can help us be more productive and not re-invent the wheel, they can also be a crutch and source of trouble when we don't make the effort to understand how the functions we rely on, operate. In an effort to not rely on these crutches, let’s talk about how to use plain Javascript arrays to manipulate arrays of data into our desired final result.

Let’s assume we have two arrays constructed like so:

```typescript[class="line-numbers"]
const pets: string[] = ['cat', 'dog'];
const animals: string[] = ['dog', 'alligator', 'shark'];
```

## Union

Union is the simplest of all, just adding items from each array and coming up with a final aggregated array of items.

```typescript[class="line-numbers"]
const results: string[] = [...pets, ...animals];

console.log(results); // ['cat', 'dog', 'dog', 'alligator', 'shark']
```

If you didn’t notice, there’s a problem with the output above. `dog` shows up twice. The reason for this is that spreading both arrays into a single array doesn’t enforce any kind of uniqueness across array elements.

The good news is that there’s an easy fix for this using ES6’s `Set` object which can only contain unique values and will automatically de-duplicate - then we can just spread the set back to a plain array.

```typescript[class="line-numbers"]
const results: string[] = [...new Set<string>([...pets, ...animals])];

console.log(results); // ['cat', 'dog', 'alligator', 'shark']
```

While the above syntax is correct, it can look and feel a bit awkward - the following, using `Array.from` will convert the contents of the `Set` back to a plain array.

```typescript[class="line-numbers"]
const results: string[] = Array.from(new Set([...pets, ...animals]));

console.log(results); // ['cat', 'dog', 'alligator', 'shark']
```

## Intersection

Intersection is just a fancy way of saying “give me the elements that only exist in both arrays”. Using our arrays above, we should end up with an array containing `dog`.

```typescript[class="line-numbers"]
const results: string[] = animals.filter((animal) => pets.includes(animal));

console.log(results); // ['dog']
```

## Difference

Difference will return to us the elements in our “first” array that are not in our “second” array. First denotes the array that we are calling `filter` on and second is the array that we are calling `includes` on.

```typescript[class="line-numbers"]
const petResults: string[] = pets.filter((pet) => !animals.includes(pet));

console.log(petResults); // ['cat']

const animalResults: string[] = animals.filter(
  (animal) => !pets.includes(animal),
);

console.log(animalResults); // ['alligator', 'shark']
```

## XOR

XOR (exclusive or) or symmetric difference is especially handy when we want to get an array of results that only contain elements that don’t exist in the other array and vice versa. Imagine a Venn diagram where we return _only_ the results that don't exist in the center overlapping area. This is best illustrated with an example.

```typescript[class="line-numbers"]
const results: string[] = pets
  .filter((pet) => !animals.includes(pet))
  .concat(animals.filter((animal) => !pets.includes(animal)));

console.log(results); // ['cat', 'alligator', 'shark']
```

---

Knowing that we can succinctly come up with arrays of filtered/union’ed data we have to ask whether we really need `lodash` or `underscore` for this low hanging fruit. Gone are the days of old StackOverflow articles with solutions initializing empty arrays and using forEach loops to put elements into the array.

Go forth and conquer one difference, intersection or xor at a time.


Posts tagged "javascript"

Implementing difference, intersection, union and xor in ES6 javascript

Multiple exports with types in a Typescript Package

Posts tagged .css-iyeiwk{color:var(--chakra-colors-themeGray-500);}"javascript"

Implementing difference, intersection, union and xor in ES6 javascript

Multiple exports with types in a Typescript Package

Posts tagged "javascript"