 Courses from Marius Schulz

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

typescript

In this lesson, we're going to explore template literal types, another powerful feature of TypeScript's type system. Template literal types have the same syntax as template literals in JavaScript, but they're used in type positions. Using template literal types, we can produce a union of string literal types and perform string concatenation in the type space:

```ts
type Dimension = "block" | "inline";
type MarginProperty = `margin-${Dimension}`;
```

## Additional Reading

- [Template Literal Types](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html)
- [String Literal Types in TypeScript](https://mariusschulz.com/blog/string-literal-types-in-typescript)
- [Mapped Types in TypeScript](https://mariusschulz.com/blog/mapped-types-in-typescript)
- [`keyof` and Lookup Types in TypeScript](https://mariusschulz.com/blog/keyof-and-lookup-types-in-typescript)

Statically Type String Literals with Template Literal Types in TypeScript

Using TypeScript in your project has never been easier than it is today. The TypeScript team has continually added features to allow you to reap the benefits of static typing while reducing the overhead to get there.

This course will teach you these new language features TypeScript has to offer. You'll use optional chaining, handle undefined behavior with the unknown type and assertion functions, create private classes, handle tuple (and other data types) types, as well as learn about conditional types. 

You'll also learn how to prevent type widening with TypeScript's new const assertions and efficiently type string literals through the use of template literals.

All of these skills will be brought together into examples that Marius will show you how to apply these new TypeScript features to real-world problems.


Advanced TypeScript Fundamentals

This lesson introduces the `?.` operator which is known as [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining). We're going to look at how we can use `?.` to safely descend into an object with properties which potentially hold the values `null` or `undefined`. We're also going to learn how to access properties with an expression using the `?.[]` bracket notation and how to call functions which may not exist using the `?.()` syntax.

Use the Optional Chaining Operator in TypeScript

This lesson introduces the `??` operator which is known as [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator). The `??` operator produces the value on the right-hand side if (and only if) the value on the left-hand side is `null` or `undefined`, making it a useful operator for providing fallback values.

We'll contrast the `??` operator with the `||` [logical OR operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR) which produces the value on the right-hand side if the value on the left-hand side is _any_ falsy value (such as `null`, `undefined`, `false`, `""`, `0`, …).

## Additional Reading

- [Nullish Coalescing: The `??` Operator in TypeScript](https://mariusschulz.com/blog/nullish-coalescing-the-operator-in-typescript)
- [The `&&` and `||` Operators in JavaScript](https://mariusschulz.com/blog/the-and-and-or-operators-in-javascript)

Use the Nullish Coalescing Operator in TypeScript

In this lesson, we'll go over TypeScript's `unknown` type. The `unknown` type is the type-safe counterpart of the `any` type. Both `unknown` and `any` are so-called [top types](https://en.wikipedia.org/wiki/Top_type) (also known as universal supertypes) of the type system. This means that every type in TypeScript is assignable to both `unknown` and `any`.

The main difference between the two types is that `unknown` is much less permissive than `any`: We have to do some form of checking before performing most operations on values of type `unknown`, whereas we don't have to do any checks before performing operations on values of type `any`.

Another difference is that `any` is assignable to every type, whereas `unknown` is only assignable to `any` and `unknown` itself. To assign `unknown` to any other types, we have to narrow it to a more specific type first.

## Additional Reading

- [The `unknown` Type in TypeScript](https://mariusschulz.com/blog/the-unknown-type-in-typescript)
- [New `unknown` top type](https://github.com/Microsoft/TypeScript/pull/24439) (origin pull request by Anders Hejlsberg)

Statically Type Unknown Values with TypeScript's unknown Type

This lesson introduces assertion functions which let us narrow the type of a variable or property for the remainder of the containing scope. We're going to learn how to create an assertion function by using the `asserts` keyword in the function signature. In particular, we're going to focus on narrowing the `unknown` type to a more specific type.

## Additional Reading

- [TypeScript 3.7: Assertion Functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions)

Narrow the unknown Type with TypeScript's Assertion Functions

In this lesson, we're going over how to create private class fields using TypeScript's `private` modifier. However, as we're going to see, the `private` modifier doesn't give us any actual protection at runtime; it only exists in TypeScript's type system and is completely compiled away when emitting JavaScript code.

Create Private Class Fields Using TypeScript's private Modifier

We're going to take a look at TypeScript's `strictPropertyInitialization` compiler option and how it helps us prevent using uninitialized class instance properties. If the `strictPropertyInitialization` flag is enabled, the type checker verifies that each instance property declared in a class either

- has a type that includes `undefined`,
- has an **explicit initializer**, or
- is **definitely assigned** to in the constructor.

The `strictPropertyInitialization` option is part of the family of compiler options that is enabled automatically when the `strict` flag is set. As with all the other strict compiler options, you can set `strict` to true and selectively opt out of strict property initialization checks by setting `strictPropertyInitialization` to `false`.

## Additional Reading
- [Strict Property Initialization in TypeScript](https://mariusschulz.com/blog/strict-property-initialization-in-typescript)

Ensure Initialization of Class Instance Properties in TypeScript

A `const` assertion is a special type assertion that uses the `const` keyword instead of a specific type name. When using a `const` assertion on an object literal expression, all properties will become `readonly` properties and no literal types within the expression will be widened.

## Additional Reading

- [Const Assertions in Literal Expressions in TypeScript](https://mariusschulz.com/blog/const-assertions-in-literal-expressions-in-typescript)
- [Literal Type Widening in TypeScript](https://mariusschulz.com/blog/literal-type-widening-in-typescript)

Prevent Type Widening of Object Literals with TypeScript's const Assertions

TypeScript lets us define array types as read-only so that we get a type error if we attempt to add, remove, or replace any elements of the array. We can use the `readonly` keyword to make an array type read-only. Alternatively, we can use the `ReadonlyArray<T>` type instead of `Array<T>` or `T[]`.

## Additional Reading

- [Read-Only Array and Tuple Types in TypeScript](https://mariusschulz.com/blog/read-only-array-and-tuple-types-in-typescript)

Declare Read-Only Array Types in TypeScript

In this lesson, we're going to learn about conditional types, a powerful feature of TypeScript's type system. Conditional types let us express non-uniform type mappings, that is, type transformations that differ depending on a condition.

A conditional type describes a type relationship test and selects one of two possible types, depending on the outcome of that test. It always has the form `T extends  U ? X : Y`, which makes conditional types look similar to conditional expressions in JavaScript.

We're going to use a conditional type to implement a `NonNullish<T>` helper type. This type is identical to the `NonNullable<T>` helper type which is defined in the core type declaration files that ship with the TypeScript compiler. Step by step, we're going to resolve an application of the `NonNullish<T>` type to understand how conditional types are being evaluated.

## Additional Reading

- [Conditional Types in TypeScript](https://mariusschulz.com/blog/conditional-types-in-typescript)

Implement a NonNullish<T> Conditional Type in TypeScript

In this lesson, we're going to look at how to perform `null` checks with assertion functions. We're going to assert that a nullable value doesn't hold the value `null`. In the process, we're going to learn how assertion functions integrate with TypeScript's control flow analysis.

Perform null Checks with Assertion Functions

Closures are an alternative to truly private class fields. If you need to encapsulate a private variable so that it can only be accessed in a controlled way, you can use a closure. This technique is particularly useful when your code has to run in older JavaScript environments that don't yet support truly private class fields or the ES2015 `WeakMap` data structure.

Encapsulate Truly Private Variables in a Closure

This lesson introduces private class fields which (unlike regular class fields) cannot be examined or modified outside of the class they're defined in. We're going to contrast private class fields with TypeScript's `private` modifier and public class fields.

We're also going to take a look at the JavaScript code that the TypeScript compiler emits when downlevel-compiling private class fields. Note that this code requires that the JavaScript runtime implement the `WeakMap` data structure (introduced as part of ES2015). Finally, we're going to learn how we can use closures to get true privacy guarantees in older runtime environments that do not implement `WeakMap`.

## Additional Reading

- [Private class fields](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields)
- [Class field declarations for JavaScript](https://github.com/tc39/proposal-class-fields)
- [Private methods and getter/setters for JavaScript classes](https://github.com/tc39/proposal-private-methods)

Create Truly Private Class Fields Using the #fieldName Syntax

Similar to how we can declare read-only array types, we can declare read-only tuple types using the `readonly` modifier. Any attempt to mutate a value of a read-only tuple type will result in a type error.

## Additional Reading

- [Read-Only Array and Tuple Types in TypeScript
](https://mariusschulz.com/blog/read-only-array-and-tuple-types-in-typescript)

Declare Read-Only Tuple Types in TypeScript

In this lesson, we're going to learn how we can use `const` assertions to implement an enum-style object in TypeScript. We generally don't want widening of any literal types in this object, so we can use a `const` assertion. We're also going to compare our enum-style object to a native TypeScript enum.

Implement and Type Enum-Style Objects in TypeScript

In this lesson, we're going to write another conditional type. This time, we'll implement a `ReturnTypeOf<T>` helper type which lets us extract the return type of a function type. This type is identical to the `ReturnType<T>` helper type that's defined in the core type declaration files that ship with the TypeScript compiler.

Implement a ReturnTypeOf<T> Conditional Type in TypeScript

A `const` assertion is a special type assertion that uses the `const` keyword instead of a specific type name. When using a `const` assertion on an array literal expression, the resulting type will be a `readonly` tuple type and no literal types within the expression will be widened.

Prevent Type Widening of Array Literals with TypeScript's const Assertions

In this final lesson, we're going to dive deep into a more complex example in which we combine mapped types, key remapping, template literal types, and indexed access types to statically type a highly dynamic JavaScript function in TypeScript.

Use TypeScript's Mapped Types and Template Literal Types Together

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

The `Promise.any()` method accepts an array (or any other iterable) of promises as a parameter. It returns a `Promise` object that is fulfilled with the value of the first input promise to fulfill:

- As soon as any input promise is fulfilled, the returned `Promise` object is fulfilled with that value.
- If all input promises are rejected, the returned `Promise` object is rejected with an `AggregateError` which has an `errors` property containing an array of all rejection reasons.

`Promise.any()` can be used to race multiple promises against each other and find the first promise to be fulfilled.

**Please note** that at the moment, the Promise.any() method is only implemented in Firefox Nightly. Make sure to use a polyfill in your application to make it work across browsers. 

Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()

The `Promise.allSettled()` method accepts an array (or any other iterable) of promises as a parameter. It returns a `Promise` object that is fulfilled with an array of settlement objects. Each settlement object describes the settlement of the corresponding input promise.

Notice that the `Promise` object returned from the `Promise.allSettled()` method is only rejected if there's an error iterating over the input promises. In all other cases, it is fulfilled.

The `Promise.allSettled()` method is useful when you want to wait for multiple promises to settle, no matter whether they'll be fulfilled or rejected.

Wait for Multiple JavaScript Promises to Settle with Promise.allSettled()

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations


Using Cursor Chat, you can easily reference an entire directory of files and ask it to generate anything based on those files. This opens up the possibility of using your current code as a reference guide to create new code that follows existing patterns. With this approach, the result can be a polished prompt you can use with any AI to generate consistent and reliable output.

Focus less on crafting the perfect prompt upfront - what matters most is testing and iterating based on the AI's responses. The more results you see from the prompt, the more you can reinforce the good results and prune out the bad results until your prompt is polished enough that you can rely on the prompt to give you consistent quality results.


Create AI Prompts Based on a Directory of Files


With Cursor's "Composer" feature, you can select and entire directory and make changes to every file. This video walks through the process of selecting a folder and refactoring all the files from JavaScript to TypeScript. It also demonstrates other tips around generating terminal commands and customizing your main Cursor "Rules for AI".


Run an AI Refactor on Every File in a Directory with Cursor


This lesson breaks down the concept of asynchronous iterators and generators in JavaScript. Using the Node.js glob function as a practical example, you'll learn how Array.fromAsync facilitates the creation of arrays from asynchronous iterables and how generators can improve performance in file processing tasks.

Efficient File Processing in Node.js with Async Generators and Array.fromAsync

Learn the concept of asynchronous iterators and generators in JavaScript and Node.js Array.fromAsync


With the introduction of Svelte 5, the Svelte team has created a CLI, `sv`, that unifies all the tasks that previously spread across a handful of CLIS (create, add plugins, and migrate).

This lesson will create a Svelte project using the new `sv` CLI and build a counter component to showcase the new `$state`, `$derived`, and `$effect` runes that ship with the new version.



Get Started with Svelte 5 using the sv CLI

You'll create a SvelteKit project using the sv CLI and build a counter component showcasing Svelte $state, $derived, and $effect runes.



pnpm ships with a streamlined, easy way of managing Node.js versions for youself and your team. This video demonstrates why pnpm uses a specific version of Node.js, how to configure it globally, and how to set up your project so that anyone who is running your project will automatically use the same version of Node.js even if that version of Node.js is not installed.


use pnpm as a Node.js version manager

How you build with Angular has changed quite a lot over the years.

For example, the `inject` function was introduced in version 14 but you might still be familiar with Angular's constructor injection.

Similarly, structural directives like `ngif` or `ngfor` have been replaced with `@if` and `@for` blocks since version 17 and beyond.

These are patterns that need to be adjusted if you want to stay up-to-date with the latest Angular has to provide.

Luckily, Angular gives you great tools in the form of a migration CLI for supporting your migration efforts as you incrementally update your App from older version features and patterns. 

When you're done with this course you'll know how to target specific features, folders, and files to migrate to the latest Angular version.

You'll learn how to 'migrate':
- Structural directives with control flow syntax
- Constructor dependency inject to inject function
- Make components standalone
- Lazy load routes
- Input/Output decorators to signal-based API


Angular Migrations in Practice

Migrate old Angular patterns for version 18 and beyond

When we import assets in React components outside of the `public` folder that Nitro reads for assets by default when running the development server we need to tell Nitro how to find them with the `devProxy` configuration option.

```typescript
export default defineNitroConfig({
  renderer: './renderer.ts',
  devProxy: {
    '/app/assets': 'http://localhost:5173/app/assets'
  }
})
```

This is ultimately inadequate in scenarios where you want to import assets arbitrarily and have them "just work" but works in a pinch.



Use devProxy in Nitro Config to Serve Static Imported Assets in Dev Mode via Vite

Learn how to use devProxy in Nitro Config with Vite to serve static assets in React components in dev mode.

Marius Schulz

Search Results