[00:00] In this exercise, we are using an external library called diff. We have a message called hello world, and then a second message called goodbye world, and we're calling diff.diffchars message second message. This is a real library that's out there that you can use, but there's an issue with it. When you try to use it in TypeScript,

[00:19] it's saying could not find a declaration file for module diff. Try npm isavediff types diff to see if it exists. Your job is to try to work out how to solve this error, and we're gonna talk through the method through which you solve it because it's very interesting. Good luck.


In this exercise, we are using an external library named `diff` that is designed to compare two strings:

```tsx
import Diff from "diff"; // red squiggly line under "diff"

const message = "Hello, world!";

const secondMessage = "Goodbye, world!";

const diff = Diff.diffChars(message, secondMessage);
```

Currently, TypeScript is showing us an error under the `diff` import:

```tsx
// hovering over "diff" shows:
Could not find a declaration file for module 'diff'.
Try `npm i --save-dev @types/diff` if it exists or add a new declaration (.d.ts) file containing `declare module 'diff';`
```

This error arises due to the lack of TypeScript declarations for the 'diff' library.

## Challenge

Your task is to determine how to resolve this TypeScript error by adding the correct declaration file.

The error message provides a hint that may be useful!

Learn how to resolve missing types when integrating external libraries.

[00:00] Okay, the first thing I want to do to solve this exercise is actually CD down to the directory inside my terminal So I'm going inside source 065 times you don't control 175 definitely type dot solution and I'm in here and so I've now got if I LS I've got access to all of these files

[00:16] Now the thing that we're going to need to do is actually install a package to fix this We can see that we're getting an error here saying try npm I save dev types diff if it exists now This is interesting problem because what's happening here is the external library that we're using called diff is very popular

[00:36] But it doesn't itself ship any type definitions with it If we come on click and look in there, then if we go take a look in node modules, or it's going to be Where is it inside not you inside here inside node modules? We have our diff there and if we look at the package dot JSON inside here

[00:55] It's telling us that the main of the file or the main entry point is index dot JS here So inside lib, so if we look at lib index dot JS You notice there's no accompanying declaration files for this and typescripts can't find any now

[01:10] This means that we're going to have to grab those from somewhere because we really need like this is a very very common problem Especially when typescript was first starting out was there was tons of libraries out there used in JS that didn't have

[01:24] declaration files that were there to describe what they did to typescript and so what typescript is saying if we go back to the This error here is it's saying it can't find a declaration file and it doesn't really know how to interpret this code So this npm I save dev types diff. Let's see. Let's just try that out. So we need to use pnpm instead

[01:45] So we'll say pnpm I types diff like that and we're going to save it as a dev Dependency here now what this is doing this sort of at types Syntax is it's going to an actual repo out in the world called definitely typed which I think might be one of the biggest github repos certainly on github and

[02:05] What it's doing is it's pulling down the types for a certain library. So this now installs itself Inside types diff here. So we're inside node modules types diff and there we have an index dot D dot TS And what this is doing is it's basically

[02:23] like adds a dot D dot TS file which describes what that diff library does and Typescript is smart enough to know that if there's something in this at types folder here Then it can look at that and see okay now I've found the declaration files for this

[02:39] So if we look at this long output here, we can see that there's at types diff node modules types diff index So it's looking for that so this is amazing because it means that we can essentially use JavaScript libraries which don't have their own types in and the community which on definitely typed is basically just run by a massive community of people is

[02:59] They are contributing the types for that And so sometimes you will have libraries that you're trying to use that just don't have types And so you can look on definitely type to see if there is an equivalent for that library That has been contributed to the by the community and of course you can go and look at those type definitions yourself make PRS for them

[03:17] It's a wonderful very active community And so now diff is fully typed and we get our diff chars function strongly type So we've got old string new string here Whereas before we could just pass in like 12 and it wouldn't give us any errors here and now diff

[03:32] We've actually got proper types called diff dot change array here beautiful stuff. So that is definitely typed That's how to handle sometimes when JavaScript libraries don't ship their own types. That's how to give them the types


Despite its popularity, the `diff` library does not ship with its own TypeScript type definitions, leading TypeScript to give us an error.

However, as the error message showed us, we can install type definitions for the 'diff' library by installing `@types/diff` as a dev dependency.

Here's the installation command for pnpm:

```
pnpm i @types/diff -D
```

## DefinitelyTyped

The `@types/` syntax is leveraged to pull type definitions from the DefinitelyTyped repository. This repo houses high-quality TypeScript type definitions for numerous well-known JavaScript libraries that don't ship their own definitions.

When you install an `@types/` package, it adds a `.d.ts` declaration file to your project's `node_modules`. This file contains the type definitions for the library, which TypeScript uses to understand the library's API.

With the package installed, the error disappears, and we can see that the `diff` library is now strongly typed:

```tsx
const diff = Diff.diffChars(message, secondMessage);

// hovering over `diff` shows:
const diff: Diff.Change[]
```

## Wrapping Up

With the help of DefinitelyTyped, you can use several popular JavaScript libraries in your TypeScript projects even if they don't ship with their own types.

If you end up finding a library that doesn't have type definitions, you can contribute to DefinitelyTyped to help improve the TypeScript ecosystem!

The DefinitelyTyped repository houses high-quality TypeScript type definitions for many well-known JavaScript libraries.

Install Type Definitions from DefinitelyTyped

Adding Type Definitions for External Libraries

Total TypeScript Pro Essentials is the **ultimate guide to becoming a TypeScript Wizard**.

Pro Essentials **requires zero TypeScript knowledge** to get started. We'll start with setting up your IDE and understanding TypeScript's place in the build process. We'll cover everything you need to go from a good JavaScript developer to a great TypeScript developer.

But we won't stop there. The material goes all the way up to advanced topics like generics, type guards and building shared utilities. If you feel like **you never _really_ learned TypeScript**, now's your chance.

We don't believe in sitting back and learning passively. With over **200 lessons in 17 sections**, the Pro Essentials workshop is a _practical_ course. The material has been tested in several in-person workshops and refined with feedback from hundreds of students.

Whether you're picking up TypeScript for the first time, or want to deepen your knowledge, Pro Essentials is the course for you.

Here’s what’s included:

## Introduction to TypeScript

Kickstart your TypeScript setup with a refresher on the core benefits and concepts of TypeScript: initial configuration, the TypeScript compiler, and type inference.

Follow the recommended setup and extensions for your editor, with a focus on Visual Studio Code, and become familiar with features like navigation, autocompletion, refactoring, and writing self-documenting code.

Understand TypeScript's role in the build process, and why browsers need help understanding the syntax. Structure your project to work nicely with the compiler, and configure for working with modern build tools like Vite and hot module replacement (HMR). Practice setting up type checking in a CI/CD pipeline, preventing errors from reaching production.

## TypeScript Fundamentals

Reinforce your foundational skills by working with TypeScript's essential types and annotations. You'll work with function parameters and return types, and model data with object literal types, arrays, and tuples. Write reusable type aliases, correctly type async code, and handle data that comes from external sources. Create more flexible types by using unions, intersections, and interfaces.

Write more expressive code that refines types through several narrowing techniques, and recognize the role of any, never, and unknown in your codebase.

## Objects, Classes, and Mutability

Types, interfaces, and classes all have their place in TypeScript. Learn the differences between them, and how to choose the right structure for your needs. Work with dynamic data in objects, and and overcome index signature limitations by using mapped types. Practice using essential type helpers like Pick, Omit, and Partial, and how to build your own helper when you need to.

Develop the mental model for how mutability affects type inference and safety. Recognize the benefits of immutable data structures, and how to work around their quirks.

Apply object-oriented programming principles to your TypeScript code. Understand the role of classes, constructors, and access modifiers, and how to use inheritance and composition to build complex systems that follow real-world design patterns.

## Working with the Compiler

Harness the power of the TypeScript compiler to derive types from values, while furthering your understanding of type inference. Create new kinds of type aliases, and use indexed access types to target nested properties.

Recognize when TypeScript needs your help through type annotations and assertions, and the purpose of as, asserts, and satisfies. Apply these techniques to real-world scenarios like working with DOM APIs, parsing JSON, and creating configuration objects.

## Understanding the Environment

Distinguish between TypeScript modules and scripts, and prevent global scope pollution. Provide types for JavaScript files and third-party libraries, and understand the role of ambient declarations.

Safely modify global interfaces like Window through declaration merging, work with namespaces like JSX, and understand when to use .d.ts type definition files vs. modules.

Learn best practices for configuring TypeScript's behavior based on the type of project you're working on. Adjust strictness levels, module resolution, and generate type declaration files. Use TypeScript as a linter, and optimize build performance for large projects.

## Advanced Application Development

Understand the core differences between CommonJS (CJS) and ES Modules (ESM), and how TypeScript handles module syntax. Learn to use file extensions for guiding module resolution, and configure TypeScript settings for more consistent behavior. Make informed decisions about when to adopt ESM into your projects, and build libraries that support both CJS and ESM consumers for maximum compatibility.

Practice domain modeling by representing real-world concepts and encoding business logic within your types. Establish single sources of truth for type definitions, and create reusable generic type utilities. Enforce stricter type checking with well-placed constraints.

Combine generics and function overloads for maximum flexibility, and create custom type guards and predicates to enhance type inference. Create type-safe APIs with template literal types, mapped types, and custom error types.


Learn TypeScript by setting up a pro environment, using advanced IDE features, and mastering type annotations, unions, object types, inference, and generics.

Pro Essentials Workshop

Total TypeScript Pro Essentials is your comprehensive workshop to master TypeScript. With over 200 lessons across 12 sections, from foundational setup to advanced techniques, conquer type-related challenges and optimize your development workflow with confidence. Whether you're starting fresh or refining your expertise, unlock the full potential of TypeScript today.

TypeScript Pro Essentials

Total TypeScript Complete Volume is a set of five full TypeScript workshops for the advanced-beginner to expert professional TypeScript programmer that wants to take their skills to the next level. This bundle includes all of the Total TypeScript self-paced workshops.

Type Transformations

TypeScript Generics

Advanced TypeScript Patterns

Advanced React with TypeScript

TypeScript Expert Interviews

Complete Volume

Discover the history of TypeScript, how it evolved from JavaScript, and how it can drastically improve your development experience with better tooling.

TypeScript's Relationship with JavaScript

Learn the differences between TypeScript and JavaScript in terms of build processes, file extensions, and how code is run in browsers and Node.js.

JavaScript vs. TypeScript in the Build Process

To get set up for TypeScript development, you'll need an IDE, Node.js, and an execution environment.

Essential Tools for TypeScript Development 

A quick guide to installing Node.js and Visual Studio Code to create a stable environment for web development.

Set up Node.js and VS Code

The pnpm package manager is a faster and more disk-efficient alternative to npm.

Installing pnpm for Package Management

The Total TypeScript VS Code extension provides helpful hints, syntax guidance, and error translations for an improved TypeScript coding experience.

Installing the Total TypeScript VS Code Extension

Kickstart Your TypeScript Set Up

Troubleshoot an unexpected token error in the browser when trying to import a TypeScript file.

Browsers are only able to understand JavaScript syntax, so we need to convert TypeScript syntax to JavaScript syntax for browser execution.

Browsers Can't Understand TypeScript Syntax

Unexpected Token Error in the Browser

Use the TypeScript CLI to convert a TypeScript file into a JavaScript file.

The tsc command can be used to convert TypeScript files into JavaScript files.

Compile TypeScript to JavaScript with the TypeScript CLI

Convert a TypeScript File into a JavaScript File

Currently we have to manually run the TypeScript CLI every time we make a change. The tsc CLI features a watch mode to do this automatically.

Running tsc in watch mode allows you to automatically compile TypeScript files as you make changes.

Use tsc's Watch Mode to Automatically Compile TypeScript Files

Automating TypeScript Compilation

Currently our TypeScript files are compiled to the same directory as our source files. Let's change that!

Using the outDir setting in tsconfig.json, you can configure the output directory for all emitted files.

Configure the Output Directory for Compiled Files

Compiling TypeScript Files to a Directory

Vite provides a simple and efficient way to build front-end apps for web development.

Create a new project with Vite and TypeScript to improve upon our current setup.

Configure Vite for a Vanilla TypeScript Project

Use Vite for a Frontend App with TypeScript

Now that we are using Vite to transpile TypeScript files into JavaScript files, the tsc command doesn't seem to do anything at all.

When the noEmit option is set to true in the tsconfig.json file, TypeScript acts more like a linter than part of the build process.

TypeScript as a Linter

Comparing Vite with tsc

Integrating TypeScript into a CI/CD system allows it to catch errors before they make it to production.

TypeScript in a CI/CD System

There is some controversy around whether or not TypeScript should block your dev server when there are errors. Let's explore the pros and cons of different approaches.

Should TypeScript Block Your Dev Server?

The tsx CLI tool allows you to quickly run scripts written in TypeScript.

Quickly Create Scripts with tsx

TypeScript in The Build Process

Learn how to identify and fix common type errors in your functions.

Common sense tells us that the booleans in the `add` function should be replaced with some sort of `number` type.

Fixing Errors in the `add` Function

Understanding Function Errors

Learn about annotating empty function parameters in TypeScript.

As a general rule, you should always annotate the parameters with their respective types when writing functions.

Annotating Function Parameters

Annotating Empty Parameters

TypeScript has several basic types that can be used to annotate variables.

TypeScript comes with a set of basic types to help define what kind of values can be assigned to variables.

TypeScript Basic Types

Basic Types in TypeScript

Learn how to make function parameters optional in TypeScript to handle different argument formats.

Using the `?` , add optional parameters in TypeScript functions.

Optional Function Parameters in TypeScript

Optional Function Parameters

By adding default parameters to a function, you can specify a value that is used when an argument is not provided by the caller.

Default parameters in TypeScript are specified using the `=` syntax.

Add a Default Parameter with `=`

Default Parameters in JavaScript Functions

Annotate the type of object literals to avoid TypeScript errors and improve inference.

The ({ }) Syntax is used for objects in TypeScript so, this doesn't need to be shown.

Annotating with {}

Typing Object Literals

Object property types can be made optional, allowing for flexibility in the shape of objects.

TypeScript allows you to mark properties as optional within an object. This lets you be more expressive when defining types.

Specifying Optional Properties

Making Object Property Types Optional

Having a single source of truth for type definitions in TypeScript functions helps to reduce duplication and make changes in the future easier.

The `type` keyword allows us to reference a type by a different name. This is useful when we want to consolidate multiple types into a single type alias.

Creating `type` Aliases

A Single Source of Truth for Type Definitions

To add an array to an object, we need to define the type of items the array contains.

Learn about the two different syntaxes for defining arrays in TypeScript.

Two Syntaxes for Arrays

Add an Array to an Object

When working with arrays of objects in TypeScript, you need to define the type properly.

There are few different ways in which an array of objects can be expressed

Representing an Array of Objects

Arrays of Objects in TypeScript

Update rest parameters to specify the type of arguments being passed into a function in TypeScript.

Learn how to use rest parameters to pass an indefinite number of arguments of the same type to a function in TypeScript.

Using Rest Parameters in TypeScript

Rest Parameters in TypeScript

Tuples provide a way to enforce precise array structures in TypeScript.

Tuples in TypeScript allow you to define fixed-length arrays with specified types for each member.

Using Tuple Syntax in TypeScript

Tuples for Precise Array Structures in TypeScript

TypeScript allows for optional members in tuples, allowing for more flexibility in type definitions.

Learn how to specify optional members in a tuple using named tuples and the optional operator in TypeScript.

Working with Optional Tuple Members in TypeScript

Using Optional Tuple Members in TypeScript

Learn about the use cases for the `any` type.

Using "any" in TypeScript may seem like a quick fix, but it actually turns off type checking and can cause issues down the line.

The Dangers of Using "any"

The Controversial `any` Type

How to make sure a function and its parameters and return types fit certain criteria, and how to annotate functions passed as arguments

Type aliases can be used to annotate function types for arguments, callbacks, and return values to enforce type safety and enable proper inference.

Function Types for Type Aliases in TypeScript

Function Types

An example of strictly typing a webpage event listener with no return value.

The `void` type is useful for functions that have no return value, like event listeners or functions with side effects.

The `void` Type

Typing an Event Listener

Learn how to restrict the types of elements that can be added to a Set in TypeScript.

Generics are used specify the type of data that can be used in a Set.

Creating Typed Sets

Restricting `Set` Types

Ensure proper TypeScript typing with Maps by specifying the key and value types needed.

Types in Maps ensure that only correct key-value pairs are added or retrieved.

Adding Types to Maps

Type Checking Maps

Learn how to parse JSON with TypeScript, and the common problems and gotchas that can occur.

The parsed data returned by JSON.parse is expected to be any. To resolve this, we remove the generic type arguments.

Decoding the JSON.parse Error

Debugging JSON Parsing

Learn how TypeScript infers types when working with async functions and API responses.

Unlike regular functions, you can't pass type arguments to the methods called inside an async function.

Adding Types to an Async Function

Typing Fetch API Responses in Async Functions

Essential Types And Notations

Learn how the TypeScript server in your IDE helps you catch errors and enables features like autocomplete and hovers.

Understanding How TypeScript Works in Your IDE

One of the coolest features of the TS server is the ability to introspect variables and declarations in TypeScript.

Introspecting Variables and Declarations in TypeScript

Hovering over a function call can give hints about what arguments a function requires.

By using hovers effectively, you can quickly understand and fix errors in your code without having to read lengthy error messages.

Fixing Errors with Hovering

Hovering Over a Function Call

Learn how to add comments that appear when a function is hovered over in TypeScript.

TSDoc comments allow you to document the purpose and usage of your code, providing a powerful way to communicate with others.

TSDoc Comments

Adding Documentation for Hovers

Take advantage of TypeScript's powerful autocomplete feature by knowing when and where to trigger it.

Hitting Control + Space in VS Code will open a list of all sorts of available options such as properties, methods, and DOM events.

The Control + Space Shortcut

Manually Triggering Autocomplete

TypeScript's Approach to Errors

Learn how to quickly rename symbols using VS Code's built-in features.

Quick Renaming in VS Code

Learn how to utilize TypeScript's "Go-To Definition" feature to easily navigate and understand code across files, making it a valuable tool for managing large codebases.

Navigating Code with "Go to Definition"

There are several ways to quickly import multiple variables from another module in VS Code.

Manually importing variables can be time-consuming and tedious. TypeScript supports autocomplete and quick fix hotkeys to make this process faster.

Using Autocomplete and Quick Fix to Import Variables

Fast Imports in VS Code

Visual Studio Code provides an "Organize Imports" command to help clean up import statements in large files.

VS Code provides a a hotkey for the Organize Imports command, making it quick and easy to clean up your code.

The Organize Imports Hotkey in VS Code

Organizing Imports in Large Files

The Quick Fixes menu in VS Code provides several helpful options for refactoring your code.

Targeting different sections of your code in this editor allows for a wide range of Quick Fixes.

Refactoring with Quick Fixes

Quick Fix Refactoring

Prettier is a code formatting tool for JavaScript and other languages. It can be added to a project or used as a VS Code extension.

Automatic Code Formatting with Prettier

Learn how to restart the TypeScript Server in VS Code and ensure that errors are correct.

Restarting the TypeScript Server in VS Code

Integrated Development Environments Superpowers

Learn how to handle null values in TypeScript and avoid type errors in your code.

Understand how union types allow you to express an "or" relationship between types.

Introducing Union Types in TypeScript

Handling Null Values in TypeScript

Understanding union types and assignability is essential to working effectively with TypeScript.

Diving Deeper into Unions and Assignability

TypeScript allows you to specify exactly which values are allowed as function arguments.

By combining literal & union types, we can restrict what values are allowed in certain scenarios.

Combining Literal & Union Types

Restricting Function Parameters

Literal types are assignable based on their literal values.

Literal Type Assignability

Learn how to combine unions in TypeScript to create type aliases with as little duplication as possible.

Transcript

Adding Type Definitions for External Libraries

Transcript