Basic Explanation of Typescript Generics

This TypeScript tutorial explains how to use generics, allowing for different types to be passed as arguments. It discusses the use of shorthand syntax in generics and illustrates with examples. This method is useful for library creation, providing type safety and control to the user.


interface PhotoMetadata<T> {
  title: string;
  takenAt: Date;
  customData: T;
}

// Function that processes a photo with custom metadata
function processPhoto<T>(photo: PhotoMetadata<T>): {
  processedTitle: string;
  daysSinceCapture: number;
  customDataSummary: T;
} {
  const today = new Date();
  const daysSinceCapture = Math.floor(
    (today.getTime() - photo.takenAt.getTime()) / (1000 * 60 * 60 * 24)
  );

  return {
    processedTitle: photo.title.toUpperCase(),
    daysSinceCapture,
    customDataSummary: photo.customData
  };
}

// Example usage with different custom data shapes
type CameraSettings = {
  iso: number;
  aperture: string;
  shutterSpeed: string;
}

type LocationData = {
  latitude: number;
  longitude: number;
  locationName: string;
}

// Using with camera settings
const photoWithCamera: PhotoMetadata<CameraSettings> = {
  title: "Sunset at beach",
  takenAt: new Date('2024-01-15'),
  customData: {
    iso: 100,
    aperture: "f/2.8",
    shutterSpeed: "1/1000"
  }
};

// Using with location data
const photoWithLocation: PhotoMetadata<LocationData> = {
  title: "Mountain vista",
  takenAt: new Date('2024-02-01'),
  customData: {
    latitude: 45.5231,
    longitude: -122.6765,
    locationName: "Mount Hood"
  }
};

const processedCameraPhoto = processPhoto(photoWithCamera);
const processedLocationPhoto = processPhoto(photoWithLocation);

processedCameraPhoto.customDataSummary.iso
processedLocationPhoto.customDataSummary.longitude

Transcript

[00:01] All right, so this is a TypeScript file and what we want to do is process a photo. The first thing that you will notice when we are choosing to process the photo here is that we are using this typing syntax. And in this case, we are allowing a generic type here to be passed to the photo metadata that is our argument. So that means that when we pass in the arguments to process photo, the title, the day since capture and the custom data summary, that the type that we pass in here is what the custom data summary will be. Otherwise, outside of this association with T, and they often do this, so you could actually say something like custom metadata, right, and then take that like this and like this, and that would work.

[00:56] This shorthand where they just use a single letter is kind of a colloquial typescriptism for better or worse and you get used to it I think as you use it longer. That said, process photo is just a JavaScript function. The point of this comes in down here so we have two different types, camera settings and location data. So we have an object, so this is just a generic JavaScript object, but it has this typing data here. So we have a title taken at and then our custom data which is in the shape of camera settings and then we have photo with location, where the shape of our custom data is as a location.

[01:40] So the type is photo metadata, but this one has location, photo metadata, this one, the custom data is in the shape of camera settings. So down here we're actually calling it, so process photo with a camera or process photo with location. And what this does for us, if you hover this, you actually can see where it's camera settings is our custom data. So we know the shape of the custom data that's coming back with this function call. Same true for location, so you get something like process with camera and you can say custom data summary and then we know that that has these properties or again processed and it didn't show an error but we get these location properties there.

[02:30] This is handy in practice if you're writing libraries or doing any sort of work at that level where you're writing code that other people are going to consume. So then we don't have to put our needs on top of what custom data is here. We can allow the user to do that and then they get type safety with some control over it in their own applications when they're using the library that we've built.