Table of Contents

• Module Introduction
• Using JavaScript (!) Libraries with TypeScript
• Using “declare” as a “Last Resort”
• No Types Needed: class-transformer
• TypeScript-embracing: class-validator
• Wrap Up
• Useful Resources & Links

Chapter Details

Module Introduction

Use 3rd-pary libraries so we don’t reinvent the wheel just focus on core business logic. Normal libraries and TS-specific libraries

Using JavaScript (!) Libraries with TypeScript

Lodash is a utility library and will act as an example for another library you want to use.

npm install --save lodash

Import into our code files and use there. We get a “could not find a declaration file” error. This is because it is a JS library, and built for JS. inside of “node_modules,” in the “lodash” folder we will see all “.js” files and so TS will not understand it.

Need to translate a package built for JS to TS by installing the “types” for a third-party library.

“DefinitelyTyped” is a GitHub repo with a huge collection of translation, including “types,” for third-party libraries. You will see “.dts” file extensions. Declaration files that don’t contain logic but translations from JS to TS. Define types used.

npm install --save-dev @types/lodash

As soon as this is installed we will no longer get any errors and we will now have auto-completion.

Exist for any major third-party library but not all.

Using “declare” as a “Last Resort”

Can’t install “types” for a package or set a global variable in “index.html”

For these cases we have a “declare” keyword that tells TS, “don’t worry it will exist.”

declare var GLOBAL: any

No Types Needed: class-transformer

Certain 3rd-party libraries embrace TS, class-transformer is one.

Common scenario if you are fetching some data from a server that responds with JSON. The data is not attached to instances of our model. We can do that manually with a “map” function and then loop through that.

Doing this manually is cumbersome and this is where “class-transformer” comes in.

npm install class-transformer --save

npm install reflect-metadata --save

// in app.ts

import 'reflect-metadata'
import { plainToClass } from "class-transformer"

Use the “plainToClass” method and pass it two arguments a and b, where a is class to add it do and b is the data to add.

This package also works in vanillaJS

TypeScript-embracing: class-validator

Another 3rd-party library embrace TS.

Allows us to add validation rules, with the help of some decorators, inside of a class and whenever we instantiate it, we can run the validation we set up, and with the help of decorators.

npm install class-validator --save

We will rebuild our own basic version created earlier in the course when we learned about decorators.

// in app.ts file
import {validate} from "class-validator"


// in product.model.ts file

import { IsNotEmpty, IsNumber, IsPositive} from "class-validator"


// down in the code we will use with the @ symbol

@IsNotEmpty()
@IsNumber()
@IsPositive()

Make sure in “tsconfig.js” file the “experimentalDecorators” option is turned on ad set to true.

Note: need to restart the dev server when you update the “tsconfig.js” file.

Need to execute “validate” method on a concrete instance of the class where we added our decorators to.

// always end up in the then block even if there are errors

validate(newProd).then(errors => {
  if (errors.length) {
    console.log("Validation Errors")
    console.log(errors)
  } else {
    console.log(newProd.getInformation())
  }
})

This package does not work in VanillaJS.

Wrap Up

Tons of 3rd party libraries out there. Regular JS packages without issues by importing the types, (translation packages).

May also have 3rd-party packages that work in both JS and TS, and others that only work in TS.

Useful Resources & Links