Lære Dealing with Third-Party Libraries | Migrating and Integrating TypeScript in Real Projects

When you migrate a JavaScript project to TypeScript, you will likely rely on third-party libraries that were originally written for JavaScript. TypeScript needs to know the types for these libraries to provide accurate type checking and autocompletion. This is where DefinitelyTyped and the @types packages come into play. DefinitelyTyped is a large, community-driven repository of high-quality TypeScript type definitions for popular JavaScript libraries. These type definitions are published as @types packages on npm, and you can install them to give TypeScript the necessary information about the APIs of those libraries.


              1234567
            
// Importing lodash, a popular utility library, in TypeScript
import _ from "lodash";

// Lodash's type definitions are provided by @types/lodash
const numbers: number[] = [1, 2, 3, 4];
const doubled = _.map(numbers, n => n * 2); // TypeScript understands the types!
console.log(doubled); // Output: [2, 4, 6, 8]


              1234567891011121314151617181920
            
// Adding type definitions for date-fns, a popular date library

// 1. Install the library and its types:
// npm install date-fns
// npm install --save-dev @types/date-fns

import { format, addDays } from "date-fns";

// TypeScript now knows the types for these functions
const today: Date = new Date();
const nextWeek: Date = addDays(today, 7);
const formatted: string = format(nextWeek, "yyyy-MM-dd");
console.log(formatted);

// 2. If a library has no @types package, add a custom declaration:
// Create a file: src/types/my-legacy-lib.d.ts
// In that file, write:
declare module "my-legacy-lib" {
  export function doSomething(input: string): number;
}

Sometimes, a library does not have type definitions available on DefinitelyTyped or via an @types package. In such cases, you can create a minimal custom type declaration file to inform TypeScript about the library's API. Place your declaration in a .d.ts file, typically under a types or @types folder in your project. You only need to declare the functions, classes, or objects you actually use, keeping your custom declarations as simple as possible to avoid unnecessary complexity. This approach allows you to keep using the library with type safety, even if official types are missing.

1. What is the purpose of the @types packages in TypeScript?

2. How can you handle a library with no available type definitions?

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 2

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 7.14

Stryg for at vise menuen


              1234567
            
// Importing lodash, a popular utility library, in TypeScript
import _ from "lodash";

// Lodash's type definitions are provided by @types/lodash
const numbers: number[] = [1, 2, 3, 4];
const doubled = _.map(numbers, n => n * 2); // TypeScript understands the types!
console.log(doubled); // Output: [2, 4, 6, 8]


              1234567891011121314151617181920
            
// Adding type definitions for date-fns, a popular date library

// 1. Install the library and its types:
// npm install date-fns
// npm install --save-dev @types/date-fns

import { format, addDays } from "date-fns";

// TypeScript now knows the types for these functions
const today: Date = new Date();
const nextWeek: Date = addDays(today, 7);
const formatted: string = format(nextWeek, "yyyy-MM-dd");
console.log(formatted);

// 2. If a library has no @types package, add a custom declaration:
// Create a file: src/types/my-legacy-lib.d.ts
// In that file, write:
declare module "my-legacy-lib" {
  export function doSomething(input: string): number;
}

1. What is the purpose of the @types packages in TypeScript?

2. How can you handle a library with no available type definitions?

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 2