 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()

When comparing two visually similar websites, it can often be challenging to precisely identify the subtle differences between them. To facilitate a rapid analysis of these discrepancies, a practical technique involves leveraging Chrome's integrated developer tools to capture full-page screenshots of each site. Subsequently, these screenshots can be uploaded to a platform like AI Studio. There, the AI can analyze the images and generate a report detailing the variations. This entire process, leveraging a few quick shortcuts, can be completed in under a minute, delivering a comprehensive breakdown of the differences for efficient comparison and analysis.

Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


```bash
share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}
```

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

[Verdaccio](https://verdaccio.org/) is a fully featured NPM registry that you can run locally on your machine. It’s a great tool for testing your release process, running end-to-end tests, and simulating real-world scenarios like deploying packages, installing them, and verifying functionality as an end user would.

Nx includes a [generator](https://nx.dev/features/generate-code) that simplifies setting up Verdaccio. To configure it, run:

```shell
npx nx g @nx/js:setup-verdaccio   
```

This command installs the necessary NPM packages and creates a `project.json` file with a `local-registry` target. To start the local registry, open a new terminal window and run:

```shell
npx nx local-registry
```

This will:
- Launch the Verdaccio registry.
- Configure NPM to point to the local Verdaccio server at `http://localhost:4873`.

> **Note:** A `project.json` file provides an advanced way to define scripts, offering more flexibility than a traditional `package.json` for managing complex targets.

Setup local Verdaccio server to release NPM packages

Learn how to spin up a local NPM registry powered by Verdaccio to test deploy your NPM packages.

In TypeScript, developers often begin by defining the structure of their data using type definitions or interfaces, which is a powerful way to ensure type safety. However, as applications grow and become more complex, simply defining the shape of an object might not be enough to guarantee its consistent creation and behavior throughout the codebase. This often leads to situations where objects that are intended to be of a certain "type" might be missing crucial properties or have incorrect data, which can be difficult to track down and debug.

This lesson tackles the question of when and why to move beyond basic type definitions and embrace classes in TypeScript. It demonstrates how classes provide a more robust mechanism for defining object structure, enforcing type constraints, and ensuring consistent object creation. By establishing a clear blueprint for objects, classes not only improve compile-time type safety but also offer runtime benefits and better code organization, ultimately helping developers avoid common pitfalls associated with loosely structured objects in larger TypeScript projects.

Stop Avoiding Classes in TypeScript

Karabiner isn't only for your keyboard. It can also hijack your mouse buttons and enable them to be similar to layers on your keyboard, where holding down a mouse button can allow you to tap keys on your keyboard to trigger commands and macros that can completely revolutionize your workflows. For example, you can hold down the right mouse button and tap on R to go to references in VS Code. Or hold down the right mouse button and tap the left mouse button to chop up videos and Screenflow.

This completely unlocks a whole new world of possibilities and use cases for your mouse as you can hover your mouse over anywhere on the page. And just tapping keys on your keyboard allows you to trigger mouse actions, to trigger keyboard actions, or to trigger macros and applications and terminal commands. and anything that your imagination can come up with. 

Karabiner: Rethinking Right-Click as a Macro Command Center

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Any app of a decent size has event flows and messages being passed around. At a certain point it becomes complicated to explain it through prose and you want to turn towards diagrams. Now setting aside the time to create diagrams that accurately describe what's happening in your codebase can be quite time consuming. Luckily, with today's AI tools, we can now just do basic walkthroughs with rough recordings over codebase dictating what's going on along the way and then upload that to tools like AI Studio and then ask it to generate diagrams in a text-based format such as Mermaid that will then generate the flowcharts and diagrams for us. So this video walks us through this process of recording a rough video, uploading it to AI Studio and then asking AI Studio to generate the proper Mermaid diagram syntax.

Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings

I'm a diehard Karabiner user and anytime I start doing something repetitively I always move it into my Karabiner configuration. Sometimes I'll fall into scenarios where I want to trigger a command, but I also want to know if that command succeeded or failed. Since Karabiner can trigger any command, setting up the command is fairly straightforward, but knowing whether it succeeded or failed became much more difficult. Luckily for me there is a package called terminal-notifier that you can install from homebrew and you can pipe the output of your command to terminal-notifier. And have a seamless way of triggering your keyboard shortcut which runs a command and you can be notified of the results.

Use Karabiner to Trigger a Terminal Command and Get Notified of the Results

There are a lot of scenarios when inspecting a site in Chrome where you don't want any click events to fire and you don't want any scripts to run. Or maybe something is animating in and out of the page and you want to capture it at a certain moment. This is a great use case for pausing script execution, which is kind of using the debugger manually by going into the Chrome DevTools and the Sources tab and clicking the pause button to essentially pause the entire page. This will give you a chance to inspect any of the elements and styles you want to inspect. And you don't have to worry about fire and click events or anything that might interrupt your investigation into the elements and styles that you want to find.

Pause Script Execution in Chrome to Easily Inspect Elements

Gemini 2.0 has a context window of a million tokens, and this means that you can upload hundreds of files and allow it to inspect and analyze massive refactors across entire code bases. 

This lesson demonstrates concatenating an entire code base into a single file and then uploading it to AI Studio. Once within AI Studio, we ask it to find the types of tasks that it can evaluate for us. Then we select one of the tasks and ask it to generate instructions for that task. Once those instructions are complete, we then turn them over to Windsurf's Cascade agent, and we allow Windsurf's Cascade to do all of the work for us as we sit back, relax, and let the AI do our jobs.

Marius Schulz

Search Results