Discover advanced TypeScript concepts: Gain insights into compiler flags, generic types, and discriminated unions. Delve into writing error-free code and mastering complex error messages with confidence.

typescript-3.7.5.tar.gz

TypeScript 3.7.5 Strict

TypeScript 3.7.5

Are you using TypeScript, but feel like you’re not making the most out of it? Do you find some advanced TypeScript concepts confusing? Do you get lost looking at complex type errors?

If you answered “yes” to any of these questions, then this course is for you! It introduces you to the world of advanced TypeScript concepts including: compiler flags for catching more errors, generic types, and how to compose types with discriminated unions. 

After finishing this course, you’ll feel more confident in your TypeScript skills. You will be able to write types that detect whole classes of possible runtime errors at compile time. Typing even the most untypeable JavaScript code will be a no brainer for you, and you’ll be fluent in TypeScript error messages.

Advanced TypeScript Masterclass

## Detecting a React component

How can we take advantage of conditional types and use them to extract the types of React component properties? Let's create a conditional type that checks whether a given type is a React component. 

```typescript
type IsReactComponent<T> =
  T extends React.ComponentType<any> ? "yes" : "no";
```

`IsReactComponent` takes a type argument `T` and checks whether it extends `React.ComponentType`. If yes, it returns a `"yes"` string literal type. Otherwise, it returns a `"no"` string literal type.

Since `React.ComponentType ` is a generic type, we had to specify the type parameter for `React.Component`, so we provided `any`. However, TypeScript lets us do something even cooler; we can use the `infer` keyword instead.

```typescript
type IsReactComponent<T> =
  T extends React.ComponentType<infer P> ? "yes" : "no";
```

## Extracting component props type with `infer`

`infer` creates a new type variable, `P`, that will store the type parameter of `T` if it indeed extends `React.Component`. In our case, it will be exactly what we're looking for, the type of `props`! So, instead of returning a `"yes"` literal type, it simply returns `P`.

```typescript
type IsReactComponent<T> =
  T extends React.ComponentType<infer P> ? P : "no";
```

Now, we can assume that this type will only be used with actual React components. We'd like the compilation to fail otherwise. Instead of returning `"no"`, we want it to return the `never` type. It's a special type that is intended exactly for these situations. We return `never` when we don't want something to happen. If a variable has a `never` type, then nothing can be assigned to it.

# Detecting a React component

How can we take advantage of conditional types and use them to extract the types of React component properties? Let's create a conditional type that checks whether a given type is a React component. 

```typescript
type IsReactComponent<T> =
  T extends React.ComponentType<any> ? "yes" : "no";
```

`IsReactComponent` takes a type argument `T` and checks whether it extends `React.ComponentType`. If yes, it returns a `"yes"` string literal type. Otherwise, it returns a `"no"` string literal type.

Since `React.ComponentType ` is a generic type, we had to specify the type parameter for `React.Component`, so we provided `any`. However, TypeScript lets us do something even cooler; we can use the `infer` keyword instead.

```typescript
type IsReactComponent<T> =
  T extends React.ComponentType<infer P> ? "yes" : "no";
```

# Extracting component props type with `infer`

`infer` creates a new type variable, `P`, that will store the type parameter of `T` if it indeed extends `React.Component`. In our case, it will be exactly what we're looking for, the type of `props`! So, instead of returning a `"yes"` literal type, it simply returns `P`.

```typescript
type IsReactComponent<T> =
  T extends React.ComponentType<infer P> ? P : "no";
```

Now, we can assume that this type will only be used with actual React components. We'd like the compilation to fail otherwise. Instead of returning `"no"`, we want it to return the `never` type. It's a special type that is intended exactly for these situations. We return `never` when we don't want something to happen. If a variable has a `never` type, then nothing can be assigned to it.

This lesson shows a real-life usage of conditional types in React.

Strict types

Generics

Composing types

Advanced types

TypeScript in practice

Conclusion

Conditional Types Example - React Component Props

Detecting a React component