TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Learn to use some of the tips and tricks that can help you write better TypeScript. 

We'll look at some utility types, understand how immutable types work, learn how to use conditional types, and finally go through some examples to see how we can write them better.

This collection is a must-watch for those unfamiliar with TypeScript and wanting to learn some skills that make types in TypeScript easy. 

Maggie Appleton

In this lesson, we learn how to use TypeScript's `Partial` types to make the `required` properties of your types optional; allowing you to reuse the same types for the cases where you may not have all the data.

Use Partial to Create Partially Fillable Types in TypeScript

In our [last lesson](https://egghead.io/lessons/javascript-use-partial-to-create-partially-fillable-types-in-typescript), we saw how we can make all the required fields in a type to be optional. Here we learn the opposite i.e. how to make all the optional fields to be required with the help of `Required`.

Make your optional fields required in TypeScript

There might be cases where you have selective data for your entities. Let's say that you are building a public API endpoint to get all the registered users from your `users` collection. Now there might be sensitive data in your `User` entity type that you may not want to return in the response. In such cases, `Pick` can help you be selective and get only the properties you need.

In this lesson, we will learn how to extract properties from a type and create a new type from it. 

Create a Type with Some Fields of Another Type in TypeScript with Pick

There might be cases where you would want to create a type while excluding some of the properties from a type. Let's say you have a database query on a `users` table where you are not selecting the `password` field. In this case, you will not be able to assign the query results to your `User` type because it is not going to have all the fields available. 

In this lesson, we are going to learn how we can use TypeScript's `Omit` utility type to exclude properties from a type. 

Exclude Properties from a Type in TypeScript

Unlike JavaScript's `const` variable declarations, TypeScript allows you to create fully immutable types. In this lesson, we learn how to create immutable types in TypeScript with the help of `as const`, `readonly` and `Readonly<T>`.

Create Immutable Types in TypeScript

You can use the non-null assertion operator in TypeScript to take a typed variable and remove the `undefined` and `null` types from it. In this lesson, we look at different ways to work around the null/undefined typed values; including `as [type]` and the use of non-null assertion operator which is as simple as adding an exclamation mark to the end of any given variable while reading the value from it.

Ignore Null or Undefined Values with TypeScript Non-Null Assertion Operator

TypeScript can infer the type of a variable by looking at the data assigned to it. It also allows you to create a reusable type that it has inferred and later reuse it in your application. In this lesson, we look at the `typeof` operator and see how we can use it to create reusable types from data.

javascript

Create Type From Any Given Data in TypeScript

Template literal types allow you to create dynamically typed strings. In this lesson, we learn how to further solidify your typings using the template literal types. They have the same syntax as template literal strings in JavaScript, but are used in type positions. When used with concrete literal types, a template literal produces a new string literal type by concatenating the contents.

```typescript
type World = "world";

// Greeting type can now only be assigned hello world
type Greeting = `hello ${World}`;
```

When a union is used in the interpolated position, the type is the set of every possible string literal that could be represented by each union member:

```typescript
type EmailLocaleIDs = "welcome_email" | "email_heading";
type FooterLocaleIDs = "footer_title" | "footer_sendoff";

// Possible values for this type: "welcome_email_id" | "email_heading_id" | "footer_title_id" | "footer_sendoff_id"
type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
```

You can also read more about them in the [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html).

Create Dynamically Typed Strings Using Template Literal Types

Instead of manually creating the class properties and assigning them values in the constructor, TypeScript has a better way to let you create and assign values to class properties. All you have to do is prefix the constructor arguments with private or public, TypeScript will automatically create the class properties for the given argument name with the proper access specifier.

Create Class Properties using Constructor Assignment

`unknown` is the type-safe counterpart of the `any` type. The main difference between `unknown` and `any` is that with `any` you can do anything with the variable with the type set as `any`; while the variable with the type `unknown` only allows you to assign it the values and perform equality checks i.e. `===`, `==`, `!==` and `!=`, for any other operation, you must either create a type guard or specify the type using `val as SomeType`. 

You should prefer to use `unknown` over `any` whenever possible because it gives you the same flexibility of `any` when assigning values to the variables but you must specify the type while using the variable.

Avoid errors using unknown type

Record type allows you to create object types in a shorter way. Types for objects are normally defined in the below format:

```typescript
type UserDetailType = {
  name: string;
  age: string;
};

type Users = {
   [name: string]: UserDetailType
};
```

However, with the `Record` utility you can construct the same type as follows

```typescript
type UserDetailType = {
  name: string;
  age: string;
};

type Users = Record<string, UserDetailType>;
```

Create mapped types using Record type

TypeScript allows us to create reusable types called Generics i.e. creating types that can work as a variety of types. Let's say that we have a `Box` type which can hold different types of `content` i.e.

```typescript
type Box = {
   name: string;
   content: string;
}
```
In the above type, we can only store the `content` of the type `string`. Using generic types, we can modify our type as follows to allow storing different types of `content`.

```typescript
type Box<T> = {
   name: string;
   content: T;
}

// It can now be used as follows to store contents of type 
// string, number, boolean or any other type
type NumberBox = Box<number>;
type StringBox = Box<string>;
type BooleanBox = Box<boolean>;
```
In this lesson, we discuss how we can benefit from generic types to avoid duplicate types. You can also learn more about the [Generic types in the TypeScript docs](https://www.typescriptlang.org/docs/handbook/2/generics.html).


Reduce duplicate types with Generic Types

There might be times when you want to extend a type, i.e., to add new fields to it. Instead of copying the types and creating duplicates, the better way to do that is to use the intersection operator `&`. In this quick lesson, you will learn what it does and how you can use it to reduce duplicate types.

Merge Types using Intersection Operator

In this lesson you will learn how to verify if some literal value satisfies any given type or not. There are two ways to do this i.e. either by declaring a variable of some given type and assigning it the value or we can use the `satisfies` keyword. We will take an example and look at both of the ways in this video.

Verify if some literal value satisfies a given type

Learn the newest language features TypeScript has to offer. Learn how to use optional chaining, const assertions, conditional types, and more!

Advanced TypeScript Fundamentals

You'll learn about using the TypeScript compiler, configuring your project, definition files, and all the ins-and-outs of understanding how to use TypeScript in your project.

Up and Running with TypeScript

TypeScript applies a fundamental change to JavaScript and applies static typing to the code in our apps. This course will dive into the type system that TypeScript provides.

TypeScript: Tips and Tricks

Kamran Ahmed

You might also like these resources:

Advanced TypeScript Fundamentals

Up and Running with TypeScript

Use Types Effectively in TypeScript

Credits

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use