Craft By Zen by Jeremy Wong

Svelte is a component-based JavaScript framework that compiles your code at build time rather than at runtime. This means that instead of shipping a bulky framework to the client, Svelte generates highly optimized vanilla JavaScript code that updates the DOM. This approach results in faster load times and better performance. Additionally, Svelte has a small API surface area, making it easy to learn and use.

• Svelte Website
• Svelte FAQ
• Svelte Official Tutorial

Core Concepts using an example

The following example is a simple counter application that teaches the basics of Svelte.

<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<main>
  <h1>The count is {count}</h1>
  <button on:click={decrement}>-</button>
  <button on:click={increment}>+</button>
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
  }
  button {
    margin: 0 1em;
    padding: 0.5em 1em;
  }
</style>

1. Reactive Variables: let count = 0; This variable is reactive. Any changes to count will automatically update the DOM wherever count is referenced.
2. Event Handling: The on:click directive is used to attach click event listeners to both buttons, calling the increment and decrement functions accordingly.
3. Inline Handlers: If you prefer, you could inline these functions directly in the on:click handler for something even simpler, like on:click={() => count += 1}.
4. Conditional Rendering: Suppose you want to display a message when the count is above a certain threshold. You can use an {#if} block directly in your HTML:

{#if count > 10}
  <p>You have reached a count greater than 10!</p>
{/if}

Svelte Components

Expanding our simple counter application by breaking it down into smaller components, which is a common practice for improving the organization and reusability of your code in larger applications. We’ll create two components: CounterDisplay for showing the current count and CounterButton for the increment and decrement buttons.

Create a new file named CounterDisplay.svelte in the src directory. This component will be responsible for displaying the count.

<script>
  // This component accepts a prop named `count`
  export let count;
</script>

<h1>The count is {count}</h1>

Create another file named CounterButton.svelte in the src directory. This component will represent a button that can increment or decrement the counter.

<script>
  // The component accepts two props: the button text and the click action
  export let text;
  export let handleClick;
</script>

<button on:click={handleClick}>{text}</button>

Now, update the App.svelte file to use these new components.

<script>
  import CounterDisplay from './CounterDisplay.svelte';
  import CounterButton from './CounterButton.svelte';

  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<main>
  <CounterDisplay {count} />
  <CounterButton text="-" handleClick={decrement} />
  <CounterButton text="+" handleClick={increment} />
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
  }
</style>

1. Props: Components in Svelte can accept “props”, which are custom attributes passed into components. In our case, CounterDisplay accepts a count prop, and CounterButton accepts text and handleClick props. This allows the components to be reusable and dynamic. Props are reactive, where any prop changes will trigger changes in the component.
2. Component Interaction: The App.svelte component manages the state (count) and functions (increment and decrement) and passes them down to the child components. This demonstrates a fundamental pattern of component-based architecture: lifting state up and passing data and behavior down through props.
3. Event Handling in Child Components: The CounterButton component receives a function (handleClick) as a prop and attaches it to the button’s click event. This is a common pattern for handling events in child components and allowing parent components to define the behavior.

Slots in Svelte

Slots in Svelte allow you to create components that can accept content dynamically from their parents. This is similar to transclusion or content projection in other frameworks. In other libraries like React, this is handled with children. Slots make components more flexible by letting you inject content into predefined places within a component’s template.

Basic Slot Example

Imagine you’re building a Card component that you want to reuse across your application, but with different content each time.

Card.svelte:

<div class="card">
  <slot></slot> <!-- This is where the parent's content will be injected -->
</div>

<style>
  .card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin: 10px 0;
  }
</style>

You can use this Card component in a parent component and pass in different content like so:

<script>
  import Card from './Card.svelte';
</script>

<Card>
  <h2>Title</h2>
  <p>This is some card content.</p>
</Card>

<Card>
  <p>Another card with different content.</p>
</Card>

Named Slots

Svelte also supports named slots, which allow you to define multiple slots within a single component.

Card.svelte updated with named slots:

<div class="card">
  <header>
    <slot name="header"></slot> <!-- Named slot for header content -->
  </header>
  <slot></slot> <!-- Default slot for main content -->
  <footer>
    <slot name="footer"></slot> <!-- Named slot for footer content -->
  </footer>
</div>

And you can use it like this:

<Card>
  <h2 slot="header">Card Title</h2>
  <p>Main content goes here.</p>
  <p slot="footer">Footer content.</p>
</Card>

Basic Usage of Module Scripts

Module scripts in Svelte introduce a powerful feature for managing reusable code and behaviors in your components. A module script runs once when a component is first imported, rather than each time a component instance is created. This makes it ideal for defining shared logic, helpers, and stores that can be used across all instances of a component.

To define a module script in a Svelte component, you use the <script context="module"> tag. Anything declared inside this tag is scoped to the module, not to individual instances of the component. This is particularly useful for situations where you want to maintain a shared state or perform actions that only need to happen once, regardless of how many times a component is instantiated.

Here’s a simple example:

Counter.svelte:

<script context="module">
  // This count is shared across all instances of Counter.svelte
  let count = 0;

  export function increment() {
    count += 1;
    console.log(count);
  }
</script>

<script>
  // This script block is for instance-specific logic and state
  import { onMount } from 'svelte';

  onMount(() => {
    // Call the shared increment function when the component mounts
    increment();
  });
</script>

<p>This component has been instantiated.</p>

In this example, the increment function and the count variable are defined in a module script and shared across all instances of Counter.svelte. Every time a new instance is created, it logs the incremented count, demonstrating that count is shared and persists across instances.

Use Cases for Module Scripts

• Defining shared utility functions: For components that require common functionality, you can define utility functions in a module script to avoid duplicating code.
• Creating singleton stores: If you need a store that’s shared across all instances of a component, defining it in a module script ensures that you have a single, shared store.
• Optimizing performance: Since code in a module script is executed only once, it’s an excellent place for performing expensive operations like setting up subscriptions or fetching data that should be done once per component type, rather than once per instance.

Advanced Component Composition

Module scripts complement Svelte’s component composition model by allowing you to abstract and share logic effectively. For instance, you can combine module scripts with slots, props, and context to create highly reusable and customizable components.

Imagine a scenario where you’re building a library of UI components. Using module scripts, you can provide a consistent API for configuring these components globally (like themes or internationalization settings) while using instance scripts for configuration that is specific to a component’s use case.

Considerations

• Scoping: Remember that variables and functions declared in module scripts are not directly accessible in the instance script or the component’s markup. To use them in the component, they need to be exported from the module script and then imported or used in the instance script.
• Singleton behavior: Since the module scope is shared across instances, be mindful of side effects that might occur when modifying shared state. This is similar to how static variables would behave in class-based languages.

Stores for State Management

Svelte Stores takes a reactive approach to state management, which is different than Redux. At the core of it, see the following.

1. Creating a Store: The simplest form of a store in Svelte is a writable store. For example, creating a store to hold a number could look like this:

   import { writable } from "svelte/store";
   const count = writable(0);

2. Subscribing to a Store: To access the value of a store outside of a Svelte component, you subscribe to it. This might be where syntax can get tricky. Use the $: syntax intuitive for reactive statements. Alternatively, you can directly subscribe using .subscribe method.

3. Updating Store Values: Svelte provides a few patterns for updating the store’s value, such as set, update, and using the auto-subscription feature within components with the $ prefix.

4. Reactivity: One of the powerful features of Svelte is its built-in reactivity. Reactive variables automatically propagate through your application.

Derived Stores

Derived stores let you create a store based on other store(s), automatically updating when the underlying stores change. This is useful for calculating derived values or aggregating data from multiple sources.

Example:

Suppose you have a store for a list of items and another derived store that calculates the total number of items.

<script>
  import { writable, derived } from 'svelte/store';

  const items = writable([]);

  const itemCount = derived(items, $items => $items.length);
</script>

In my Jeopardy app, I used the derived function to determine if all of the questions have been answered.

import { writable, derived } from "svelte/store";

function gameRoundStatus() {
  const { subscribe, set, update } = writable([]);

  return {
    subscribe,
    initialize: (categories) => set(categories),
    setAnswered: ({ categoryIndex, clueIndex }) =>
      update((categories) => {
        categories[categoryIndex].clues[clueIndex].answered = true;
        return categories;
      }),
    reset: () => set([]),
  };
}

// This becomes a reactive variable
export const gameRound = gameRoundStatus();

// I need to know if the game board is done playing using this derived status
export const allAnswered = derived(
  gameRoundStatus,
  ($gameRoundStatus) =>
    $gameRoundStatus.length > 0 &&
    $gameRoundStatus.every((category) =>
      category.clues.every((clue) => clue.answered)
    )
);

Store Bindings

Svelte allows you to bind component controls directly to store values, simplifying state management further.

Example:

<script>
  import { writable } from 'svelte/store';

  const count = writable(0);
</script>

<input type="number" bind:value={$count}>

Complex Store Structures

For applications with complex state, consider structuring your store as a JavaScript object or even using a custom store. Custom stores can encapsulate more complex behavior, such as asynchronous operations or integration with external data sources.

Creating a Custom Store:

function createCustomStore() {
  const { subscribe, set, update } = writable(initialValue);

  return {
    subscribe,
    // Custom methods to interact with the store
    increment: () => update((n) => n + 1),
    decrement: () => update((n) => n - 1),
    reset: () => set(initialValue),
    // More complex operations...
  };
}

Slots and advanced state management techniques in Svelte offer a combination of simplicity and power, enabling you to build complex and dynamic applications with less code and more declarative, readable structures.

Actions

Svelte actions are a powerful and somewhat under-appreciated feature that provide a neat way to interact with DOM elements directly. Actions allow you to attach reusable behavior to DOM elements, which can be especially useful for integrating third-party libraries or creating custom directives that enhance your application’s functionality without cluttering your components with imperative code.

An action is simply a function that is called when a DOM element is created, and it returns an object that can contain lifecycle methods like update and destroy. Here’s a basic outline of how actions work:

1. Creating an Action: To create an action, you define a function that takes at least one argument, the element it’s attached to. This function can return an object with optional update and destroy methods. The update method is called whenever the parameters of the action change, and destroy is called when the element is removed from the DOM.

2. Using an Action: You apply an action to a DOM element in your Svelte component using the use directive.

Here’s a simple example to illustrate:

Defining a Simple Action

Let’s say you want to create an action that automatically focuses an input element when the component mounts:

// focus.js
export function autofocus(node) {
  // Directly focus the DOM node
  node.focus();

  // No need for update or destroy in this case, but they could be added if necessary
}

Applying the Action in a Component

You can then use this action in any component like so:

<script>
    import { autofocus } from './focus.js';
</script>

<input use:autofocus />

This example is quite basic, but actions can be much more complex and powerful. For instance, you could create an action to:

• Implement drag-and-drop functionality by attaching mouse event listeners to the element.
• Integrate with third-party libraries, such as initializing a date picker on an input element.
• Add custom animations or transitions that are not easily achieved through Svelte’s native capabilities.

Svelte makes adding animations and transitions to your web applications straightforward and intuitive, enhancing user experience with visual feedback and smooth transitions. Let’s explore how to add a simple fade transition to elements in a Svelte application, and then we’ll look at a more interactive example.

Transitions and Animations

Svelte’s transition functions, such as fade, are part of the svelte/transition module. To use a fade transition on an element, first import fade from this module.

Example:

<script>
  import { fade } from 'svelte/transition';
  let isVisible = true;
</script>

<button on:click={() => (isVisible = !isVisible)}>
  Toggle
</button>

{#if isVisible}
  <div transition:fade={{ duration: 300 }}>
    Fade me in and out
  </div>
{/if}

In this example, clicking the “Toggle” button shows or hides the div element with a fade effect over 300 milliseconds.

Interactive Animation Example

For a more interactive example, let’s create a list where items can be added and removed, each with an animation. We’ll use the slide transition to make items slide in and out.

First, add slide to your imports:

<script>
  import { slide } from 'svelte/transition';
  let items = ['Item 1', 'Item 2', 'Item 3'];
</script>

Now, create a function to add a new item and another to remove an item:

function addItem() {
  items = [...items, `Item ${items.length + 1}`];
}

function removeItem(index) {
  items = items.filter((_, i) => i !== index);
}

Finally, render the list with transitions on each item:

<button on:click={addItem}>Add Item</button>

<ul>
  {#each items as item, index (item)}
    <li transition:slide={{ duration: 200 }}>
      {item}
      <button on:click={() => removeItem(index)}>Remove</button>
    </li>
  {/each}
</ul>

In the #each block, we use the slide transition to animate the addition and removal of list items. The (item) key ensures that Svelte can uniquely identify each item for correct animation, especially during removals.

Customizing Transitions

Svelte’s transitions can be customized extensively via parameters. For both fade and slide, you can adjust properties like duration, delay, and easing (to control the animation’s timing function). Svelte also supports custom CSS transitions and animations, giving you complete control over your animations’ look and feel.

Using the Basic Svelte Template

If you’re looking for something simpler or specifically want to work with just the Svelte library without the additional features offered by SvelteKit, you can start with the basic Svelte template.

1. Scaffold a New Svelte Project:

   npx degit sveltejs/template svelte-app
   cd svelte-app

   This creates a new Svelte project in a directory called svelte-app.

2. Install Dependencies:

   npm install

3. Start the Development Server:

   npm run dev

Let’s go full-stack

The developers behind Svelte created SvelteKit for building full-stack applications. I’ll expand on it in the future.

Conclusion

I love Svelte. Especially for my own personal website. I will continue to use it to build more complex apps as my go-to library.

I’ll leave you with the Svelte documentary.

What is the 7 GUIs benchmark?

The 7 GUIs is a benchmark for comparing different GUI frameworks, proposed by Eugen Kiss. See his explanation below.

There are countless GUI toolkits in different languages and with diverse approaches to GUI development. Yet, diligent comparisons between them are rare. Whereas in a traditional benchmark competing implementations are compared in terms of their resource consumption, here implementations are compared in terms of their notation. To that end, 7GUIs defines seven tasks that represent typical challenges in GUI programming. In addition, 7GUIs provides a recommended set of evaluation dimensions.
— Eugen Kiss

I’m going to walkthrough each GUI using Svelte, and annotate the code.

Counter

The task is to build a frame containing a label or read-only textfield T and a button B. Initially, the value in T is “0” and each click of B increases the value in T by one.

Link

Let’s walkthrough the code.

<script>
  // Initialize the counter with "0" (as it says in the spec)
  let count = 0;
</script>

<!-- Display the count, as a number input -->
<input
  type="number"
  bind:value={count}
/>
<!-- Add a button that will increment the counter by 1 with each click. -->
<button
  on:click={() => (count += 1)}>count</button
>

Temperature

The task is to build a frame containing two textfields T_C and T_F representing the temperature in Celsius and Fahrenheit, respectively. Initially, both T_C and T_F are empty. When the user enters a numerical value into T_C the corresponding value in T_F is automatically updated and vice versa. When the user enters a non-numerical string into T_C the value in T_F is not updated and vice versa. The formula for converting a temperature C in Celsius into a temperature F in Fahrenheit is C = (F - 32) * (5/9) and the dual direction is F = C * (9/5) + 32.

Link

Code walkthrough.

<script lang="ts">
  // Initialize the values of celsius and fahrenheit
  let c = 20;
  let f = 68;

  // Given the value from Celsius, update Fahrenheit
  function setBothFromC(value: number): void {
    // The + is to convert the string to a number
    c = +value;
    // Use the formula from the spec to update fahrenheit
    f = +(32 + (9 / 5) * c).toFixed(1);
  }

  // Given the value from Fahrenheit, update Celsius
  function setBothFromF(value: number): void {
    f = +value;
    // Use the formula from the spec to update celsius
    c = +((5 / 9) * (f - 32)).toFixed(1);
  }
</script>

<!--
Add two different inputs. Since the inputs are two-way bound by the values,
`c` and `f`, we can add an event listener to run the function to convert the
other value.
-->
<input
  value={c}
  on:input={(e) => setBothFromC(e.target.value)}
  type="number"
/>
°C =
<input
  value={f}
  on:input={(e) => setBothFromF(e.target.value)}
  type="number"
/>
°F

Flight Booker

The task is to build a frame containing a form with three textfields The task is to build a frame containing a combobox C with the two options “one-way flight” and “return flight”, two textfields T₁ and T₂ representing the start and return date, respectively, and a button B for submitting the selected flight. T₂ is enabled iff C’s value is “return flight”. When C has the value “return flight” and T₂’s date is strictly before T₁’s then B is disabled. When a non-disabled textfield T has an ill-formatted date then T is colored red and B is disabled. When clicking B a message is displayed informing the user of his selection (e.g. “You have booked a one-way flight on 04.04.2014.”). Initially, C has the value “one-way flight” and T₁ as well as T₂ have the same (arbitrary) date (it is implied that T₂ is disabled).

Link

<script>
  const DAY_IN_MS = 86400000
  const tomorrow = new Date(Date.now() + DAY_IN_MS);

  // Create an array of year, month, day, in this format: YYYY-MM-DD
  let start = [
    tomorrow.getFullYear(),
    pad(tomorrow.getMonth() + 1, 2),
    pad(tomorrow.getDate(), 2),
  ].join("-");

  // our reactive variables
  let end = start;
  let isReturn = false;

  // Running statements reactively, updating the variables when they are changed
  $: startDate = convertToDate(start);
  $: endDate = convertToDate(end);

  // Click handler for the button
  function bookFlight() {
    // Determine type of return
    const type = isReturn ? "return" : "one-way";

    let message = `You have booked a ${type} flight, leaving ${startDate.toDateString()}`;
    if (type === "return") {
      message += ` and returning ${endDate.toDateString()}`;
    }

    alert(message);
  }

  // Convert a string in the format YYYY-MM-DD to a Date object
  function convertToDate(str) {
    const split = str.split("-");
    return new Date(+split[0], +split[1] - 1, +split[2]);
  }

  // Pad a number with leading zeros
  function pad(x, len) {
    x = String(x);
    while (x.length < len) x = `0${x}`;
    return x;
  }
</script>

<!-- Create your select input for one-way or return flight option -->
<select bind:value={isReturn}>
  <option value={false}>one-way flight</option>
  <option value={true}>return flight</option>
</select>

<!-- Bind the inputs -->
<input type="date" bind:value={start} />
<input type="date" bind:value={end} disabled={!isReturn} />

<!-- Attempt to book flight -->
<button on:click={bookFlight} disabled={isReturn && startDate >= endDate}
  >book</button
>

Timer

The task is to build a frame containing a gauge G for the elapsed time e, a label which shows the elapsed time as a numerical value, a slider S by which the duration d of the timer can be adjusted while the timer is running and a reset button R. Adjusting S must immediately reflect on d and not only when S is released. It follows that while moving S the filled amount of G will (usually) change immediately. When e ≥ d is true then the timer stops (and G will be full). If, thereafter, d is increased such that d > e will be true then the timer restarts to tick until e ≥ d is true again. Clicking R will reset e to zero.

Link

<script>
  // It turns out, you can't run this in Astro without saying this component is client only
  import { onDestroy } from "svelte";

  // Start elapsed at 0 milliseconds
  let elapsed = 0;
  // Set the range input to be 5 seconds / 5000 milliseconds
  let duration = 5000;

  let last_time = window.performance.now();
  let frame;

  // IIFE for animation loop
  (function update() {
    // pass in the function for the animation frame (infinite looping)
    frame = requestAnimationFrame(update);

    // performance.now() is like Date.now(), but more accurate to tenths of a milliseconds
    const time = window.performance.now();

    // Take the minimum of the time elapsed and add it to the new elapsed time
    elapsed += Math.min(time - last_time, duration - elapsed);

    last_time = time;
  })();

  // When the component is destroyed, cancel the animation frame
  onDestroy(() => {
    cancelAnimationFrame(frame);
  });
</script>

<!-- Create the label and use the progress tag to show the time elapsed vs duration -->
<label>
  elapsed time:
  <progress value={elapsed / duration} />
</label>

<div>{(elapsed / 1000).toFixed(1)}s</div>

<label>
  duration:
  <!-- Bind the input to the duration. Max 20 seconds -->
  <input type="range" bind:value={duration} min="1" max="20000" />
</label>


<!-- Allow the user to reset the timer -->
<button on:click={() => (elapsed = 0)}>reset</button>

CRUD

The task is to build a frame containing the following elements: a textfield T_prefix, a pair of textfields T_name and T_surname, a listbox L, buttons B_C, B_U and B_D and the three labels as seen in the screenshot. L presents a view of the data in the database that consists of a list of names. At most one entry can be selected in L at a time. By entering a string into T_prefix the user can filter the names whose surname start with the entered prefix—this should happen immediately without having to submit the prefix with enter. Clicking B_C will append the resulting name from concatenating the strings in T_name and T_surname to L. B_U and B_D are enabled if an entry in L is selected. In contrast to B_C, B_U will not append the resulting name but instead replace the selected entry with the new name. B_D will remove the selected entry. The layout is to be done like suggested in the screenshot. In particular, L must occupy all the remaining space.

<script>
  // Have some people to start with
  let people = [
    { first: "Hans", last: "Emil" },
    { first: "Max", last: "Mustermann" },
    { first: "Roman", last: "Tisch" },
  ];

  // Initialize the bound variables
  let prefix = "";
  let first = "";
  let last = "";
  // Initialize the selected item index
  let i = 0;

  // Reactive statements when the changes
  $: filteredPeople = prefix
    ? people.filter((person) => {
        const name = `${person.last}, ${person.first}`;

        // Filter based off first or last name
        return name.toLowerCase().startsWith(prefix.toLowerCase());
      })
    : people;

  // Reactively change the selected when filtered people
  $: selected = filteredPeople[i];

  // Reset all inputs when new selection made
  $: reset_inputs(selected);

  // Create a new person
  function create() {
    people = people.concat({ first, last });
    i = people.length - 1;
    first = last = "";
  }

  // Update the selected person
  function update() {
    selected.first = first;
    selected.last = last;
    people = people;
  }

  // Remove the selected person
  function remove() {
    // Remove selected person from the source array (people), not the filtered array
    const index = people.indexOf(selected);
    people = [...people.slice(0, index), ...people.slice(index + 1)];

    first = last = "";
    i = Math.min(i, filteredPeople.length - 2);
  }

  // Reset the input for first and last names
  function reset_inputs(person) {
    first = person ? person.first : "";
    last = person ? person.last : "";
  }
</script>

<input
  placeholder="filter prefix"
  bind:value={prefix}
/>

<select bind:value={i} size={5}>
  <!-- Loop through the filtered people -->
  {#each filteredPeople as person, i}
    <option value={i}>{person.last}, {person.first}</option>
  {/each}
</select>

<!-- Create inputs for first and last names -->
<label
  ><input
    bind:value={first}
    placeholder="first"
  /></label
>
<label
  ><input
    bind:value={last}
    placeholder="last"
  /></label
>

<!-- CRUD operators -->
<div class="buttons">
  <button on:click={create} disabled={!first || !last}>create</button>
  <button on:click={update} disabled={!first || !last || !selected}
    >update</button
  >
  <button on:click={remove} disabled={!selected}>delete</button>
</div>

Circle Drawer

The task is to build a frame containing an undo and redo button as well as a canvas area underneath. Left-clicking inside an empty area inside the canvas will create an unfilled circle with a fixed diameter whose center is the left-clicked point. The circle nearest to the mouse pointer such that the distance from its center to the pointer is less than its radius, if it exists, is filled with the color gray. The gray circle is the selected circle C. Right-clicking C will make a popup menu appear with one entry “Adjust diameter…”. Clicking on this entry will open another frame with a slider inside that adjusts the diameter of C. Changes are applied immediately. Closing this frame will mark the last diameter as significant for the undo/redo history. Clicking undo will undo the last significant change (i.e. circle creation or diameter adjustment). Clicking redo will reapply the last undoed change unless new changes were made by the user in the meantime.

Link

<script>
  // Initialize the bound variables
  let i = 0;
  let undoStack = [[]];
  let circles = [];
  let selected;
  let adjusting = false;
  let adjusted = false;

  // On handling click, create circle with default radius 50 px
  function handleClick(event) {
    if (adjusting) {
      adjusting = false;

      // if circle was adjusted,
      // push to the stack
      if (adjusted) push();
      return;
    }

    const circle = {
      cx: event.clientX,
      cy: event.clientY,
      r: 50,
    };

    // Add circles to list of circles. The selected circle is the current circle
    circles = circles.concat(circle);
    selected = circle;

    push();
  }

  function adjust(event) {
    selected.r = +event.target.value;
    circles = circles;
    adjusted = true;
  }

  function select(circle, event) {
    if (!adjusting) {
      event.stopPropagation();
      selected = circle;
    }
  }

  // Use a stack for keeping track of the circles
  function push() {
    const newUndoStack = undoStack.slice(0, ++i);
    newUndoStack.push(clone(circles));
    undoStack = newUndoStack;
  }

  function travel(d) {
    circles = clone(undoStack[(i += d)]);
    adjusting = false;
  }

  function clone(circles) {
    return circles.map(({ cx, cy, r }) => ({ cx, cy, r }));
  }
</script>

<!-- Put in the buttons for controls -->
<div class="controls">
  <button on:click={() => travel(-1)} disabled={i === 0}>undo</button>
  <button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}
    >redo</button
  >
</div>

<!-- Draw with an SVG. Bind the click handler -->
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
<svg on:click={handleClick}>
  <!-- Draw all of the circles -->
  {#each circles as circle}
    <!-- svelte-ignore a11y-click-events-have-key-events -->
    <circle
      cx={circle.cx}
      cy={circle.cy}
      r={circle.r}
      on:click={(event) => select(circle, event)}
      on:contextmenu|stopPropagation|preventDefault={() => {
        // When right-clicking, open the adjuster
        adjusting = !adjusting;
        if (adjusting) selected = circle;
      }}
      fill={circle === selected ? "#ccc" : "white"}
    />
  {/each}
</svg>

<!-- Show the adjuster if adjusting a circle's size -->
{#if adjusting}
  <div class="adjuster">
    <p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
    <input type="range" value={selected.r} on:input={adjust} />
  </div>
{/if}

Cells

The task is to create a simple but usable spreadsheet application. The spreadsheet should be scrollable. The rows should be numbered from 0 to 99 and the columns from A to Z. Double-clicking a cell C lets the user change C’s formula. After having finished editing the formula is parsed and evaluated and its updated value is shown in C. In addition, all cells which depend on C must be reevaluated. This process repeats until there are no more changes in the values of any cell (change propagation). Note that one should not just recompute the value of every cell but only of those cells that depend on another cell’s changed value. If there is an already provided spreadsheet widget it should not be used. Instead, another similar widget (like JTable in Swing) should be customized to become a reusable spreadsheet widget.

Link

This one isn’t in the Svelte documentation, so I found a different implementation that went through it perfectly. Link

Cells is split up into two Svelte components: Cell and Cells.

<!-- Cell.svelte -->
<script>
  // Initialized props
  export let j;
  export let i;
  export let focused;
  export let data;
  export let p;
  export let handleFocus;
  export let handleBlur;
  export let handleKeydown;
  export let handleInput;

  // Keep track of the current key
  let key = j + i;

  // Keep track if a cell is focused
  let hasFocus = false;
  $: if (focused === key && !hasFocus) {
    hasFocus = true;
  } else if (focused !== key && hasFocus) {
    hasFocus = false;
  }
</script>

<!-- When focused, change the cell into an input -->
<!-- Otherwise parse the formula -->
{#if hasFocus}
  <input
    id={"input-" + key}
    value={$data[key] || ""}
    autofocus
    on:focus={() => handleFocus(key)}
    on:blur={() => handleBlur(key)}
    on:keydown={(e) => handleKeydown(e, j, i)}
    on:input={(e) => handleInput(e, key)}
  />
{:else}
  <div>{p.parse($data[key]) || ""}</div>
{/if}

<!-- Cells.svelte -->
<script>
  import Cell from "./Cell.svelte";
  import { data } from "./store.js";
  import { sampleData } from "./sampleData.js";
  import { Parser } from "./parse.js";

  // Initialize with the sample data set
  data.set(sampleData);

  // Create 26 columns w/ the letters of the alphabet
  const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  // Max 100 x 100 cells
  export let shape = [100, 100];
  const rows = range(shape[1]);
  const columns = letterRange(shape[0]);
  const p = new Parser(data, columns, rows);
  let focused;
  let tBody;

  // Create range array
  function range(n) {
    return [...Array(n).keys()];
  }

  // Create letter range
  function letterRange(n) {
    return range(n).map(getNumberAsLetters);
  }

  // Loop through letters
  function getBase26(n) {
    let result = [];
    while (n > 25) {
      let remainder = n % 26;
      result.push(remainder);
      n = Math.floor(n / 26) - 1;
    }
    result.push(n);
    return result.reverse();
  }

  // Get the letter range and join them
  function getNumberAsLetters(n) {
    let arr = getBase26(n);
    return arr.map((num) => LETTERS[num]).join("");
  }

  function handleFocus(key) {
    if (focused !== key) {
      $data[key] = $data[key] || "";
      focused = key;
      setTimeout(() => {
        let target = tBody.querySelector("#input-" + key);
        if (target) {
          target.focus();
          target.setSelectionRange(0, 9999);
        }
      }, 10);
    }
  }

  function handleBlur(key) {
    if (focused === key) focused = undefined;
  }

  function handleInput(e, key) {
    $data[key] = e.target.value;
  }

  function handleKeydown(e, column, row) {
    // Navigate across the spreadsheet with arrow keys (and alt/option key)
    let selector;
    if (e.key === "ArrowUp") {
      let newRow = findAdjacent(rows, row, "before");
      selector = newRow !== null ? column + newRow : null;
    }
    if (e.key === "ArrowDown" || e.key === "Enter") {
      let newRow = findAdjacent(rows, row, "after");
      selector = newRow !== null ? column + newRow : null;
    }
    if (e.key === "ArrowLeft" && e.altKey) {
      let newColumn = findAdjacent(columns, column, "before");
      selector = newColumn !== null ? newColumn + row : null;
    }
    if (e.key === "ArrowRight" && e.altKey) {
      let newColumn = findAdjacent(columns, column, "after");
      selector = newColumn !== null ? newColumn + row : null;
    }

    if (selector) {
      e.preventDefault();
      handleFocus(selector);
    }
  }

  function findAdjacent(arr, value, direction) {
    let index = arr.indexOf(value);
    if (index === -1) return null;
    if (direction === "before")
      return arr[index - 1] === undefined ? null : arr[index - 1];
    if (direction === "after") return arr[index + 1] || null;
    return null;
  }

  function clear() {
    data.set({});
  }
</script>

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <td class="row-key" />
        {#each columns as column}
          <td class="column-key">{column}</td>
        {/each}
      </tr>
    </thead>
    <tbody bind:this={tBody}>
      {#each rows as i}
        <tr id={"row-" + i}>
          <td class="row-key">{i}</td>
          {#each columns as j}
            <td id={j + i} on:click={() => handleFocus(j + i)}>
              <Cell
                {j}
                {i}
                {focused}
                {data}
                {p}
                {handleFocus}
                {handleBlur}
                {handleKeydown}
                {handleInput}
              />
            </td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>
<button on:click={clear}>Clear</button>

There are two utility functions to help out the operations: parse and store (the latter being the Svelte store to save in local state).

// parse.js
export class Parser {
  constructor(store, columns, rows) {
    this.cells = {}
    this.store = store
    this.columns = columns
    this.rows = rows
    this.operations = {
      sum: (a, b) => a + b,
      sub: (a, b) => a - b,
      mul: (a, b) => a * b,
      div: (a, b) => a / b,
      mod: (a, b) => a % b,
      exp: (a, b) => a ** b
    }

    // subscribe to store
    this.store.subscribe(value => {
      this.cells = value
    })
  }

  cartesianProduct(letters, numbers) {
    var result = []
    letters.forEach(letter => {
      numbers.forEach(number => {
        result.push(letter + number)
      })
    })
    return result
  }

  findArrRange(arr, start, end) {
    let startI = arr.indexOf(start)
    let endI = arr.indexOf(end)
    if (startI == -1 || endI == -1 || startI > endI) return []
    return arr.slice(startI, endI + 1)
  }

  getRange(rangeStart, rangeEnd) {
    rangeStart = this.splitOperand(rangeStart)
    rangeEnd = this.splitOperand(rangeEnd)
    let letters = this.findArrRange(this.columns, rangeStart[0], rangeEnd[0])
    let numbers = this.findArrRange(this.rows, rangeStart[1], rangeEnd[1])
    return this.cartesianProduct(letters, numbers)
  }

  splitOperand(operand) {
    return [operand.match(/[a-zA-Z]+/)[0], Number(operand.match(/\d+/)[0])]
  }

  rangeOperation(op, rangeStart, rangeEnd) {
    if (!(this.isWellFormed(rangeStart) && this.isWellFormed(rangeEnd)))
      return this.originalString

    let range = this.getRange(rangeStart, rangeEnd)

    return range
      .map(address => Number(this.parse(this.cells[address])))
      .reduce(this.operations[op])
  }

  singleOperation(op, operand1, operand2) {
    let first = this.parseOperand(operand1)
    let second = this.parseOperand(operand2)

    if (first === null || second === null) return this.originalString

    return this.operations[op](first, second).toString()
  }

  isWellFormed(operand) {
    return /[a-zA-Z]+\d+/.test(operand)
  }

  parseOperand(operand) {
    if (!isNaN(Number(operand))) return Number(operand)
    if (operand in this.cells) return Number(this.parse(this.cells[operand]))
    if (this.isWellFormed(operand)) return 0

    return null
  }

  parseOperation(op, formula) {
    if (!(formula.startsWith('(') && formula.endsWith(')')))
      return this.originalString

    formula = formula.slice(1, formula.length - 1)

    let operationType
    let formulaArr
    if (formula.includes(',')) {
      operationType = 'single'
      formulaArr = formula.split(',')
    } else if (formula.includes(':')) {
      operationType = 'range'
      formulaArr = formula.split(':')
    }

    if (formulaArr.length !== 2) return this.originalString

    if (operationType === 'single')
      return this.singleOperation(op, formulaArr[0], formulaArr[1])

    if (operationType === 'range')
      return this.rangeOperation(op, formulaArr[0], formulaArr[1])

    return this.originalString
  }

  parse(str) {
    this.originalString = str
    if (typeof str !== 'string') return ''
    if (!str.startsWith('=')) return str

    let formula = str.slice(1)
    if (formula.slice(0, 3).toLowerCase() in this.operations) {
      return this.parseOperation(
        formula.slice(0, 3).toLowerCase(),
        formula.slice(3).toUpperCase()
      )
    } else {
      return this.cells[formula] || str
    }
  }
}

// store.js
import { writable } from "svelte/store";

export const data = writable({});

The last file is to load prefilled data, but we don’t need to go over that.

// An example of the sampleData file
export let sampleData = {
  A0: "Data",
  A1: "20",
  A2: "15"
};

SolidJS is a Javascript framework for building fast, declarative UIs on the web. It shares many ideas with React, but does not use the virtual DOM to deliver a more performant and pragmatic developer experience.

• SolidJS Website
• New Docs
• Old Docs (API Reference)

Try SolidJS

• Playground link
  • In the playground, you can view the compiled output.
  • Also, you can change the compile mode, between “Client side rendering”, “Server side rendering”, and “Client side rendering with hydration”
  • Any code that you write in the playground can be exported to a coding sandbox, like Codesandbox. So helpful!

Philosophy - Think Solid

1. Declarative Data
2. Vanishing Components

• Solid updates are completely independent of the components. Component functions are called once and then cease to exist.

3. Read/Write segregation

• We don’t need true immutability to enforce unidirectional flow, just the ability to make the conscious decision which consumers may write and which may not.

4. Simple is better than easy

Compilation

Solid’s JSX compiler doesn’t just compile JSX to JavaScript; it also extracts reactive values (which we’ll get to later in the tutorial) and makes things more efficient along the way.

This is more involved than React’s JSX compiler, but much less involved than something like Svelte’s compiler. Solid’s compiler doesn’t touch your JavaScript, only your JSX.

• A Look at Compilation in JavaScript Frameworks

Differences to React

Props Destructuring

Destructuring props is usually a bad idea in Solid. Under the hood, Solid uses proxies to hook into props objects to know when a prop is accessed. When we destructure our props object in the function signature, we immediately access the object’s properties and lose reactivity.

So in general, avoid the following:

function Bookshelf({ name }) {
  return (
    <div>
      <h1>{name}'s Bookshelf</h1>
      <Books />
      <AddBook />
    </div>
  );
}

And replace with props instead.

Dependency Arrays

In React, you’d declare the dependencies explicitly using the dependency array. If you didn’t, the effect would rerun whenever any state in the component changes. In Solid, dependencies are tracked automatically, and you don’t have to worry about extra reruns.

Looping with array.map

If we used array.map in Solid, every element inside the book would have to rerender whenever the books signal changes. The For component checks the array when it changes, and only updates the necessary element. It’s the same kind of checking that React’s VDOM rendering system does for us when we use .map.

Conditional if statements on re-rendering

In the Building UI with Components section of this tutorial, we noted that component functions run only once in Solid. This means the JSX returned from that initial function return is the only JSX that will ever be returned from the function.

In Solid, if we want to conditionally display JSX in a component, we need that condition to reside within the returned JSX. While this takes some adjustment when coming from React, we have found that the fine-grained control afforded by Solid’s reactive system is worth the trade-off.

Reactivity and proxy objects

In Solid, props and stores are proxy objects that rely on property access for tracking and reactive updates. Watch out for destructuring or early property access, which can cause these properties to lose reactivity or trigger at the wrong time.

onChange vs. onInput

In React, onChange fires whenever an input field is modified, but this isn’t how onChange works natively. In Solid, use onInput to subscribe to each value change.

No VDOM or VDOM APIs

Finally, there is no VDOM so imperative VDOM APIs like React.Children and React.cloneElement have no equivalent in Solid. Instead of creating or modifying DOM elements directly, express your intentions declaratively.

Solid Primitives

• Signals - The basic way to manage state in the application
  • I go much deeper into Signals in Intro to Reactivity with SolidJS
  • Similar to useState in React, but as a reactive value
  • Derived state - you can track a computed state from a signal, which is also reactive
  • You can pass the signal as a prop like this: <BookList books={books()} />. It’s not a typo to use the function as it’s passing an accessor, which is important for reactivity.
• Effects - ability to react to signal changes

A driving philosophy of Solid is that, by treating everything as a signal or an effect, we can better reason about our application.

Looping

Solid has a component called <For /> with an each prop. You can pass in a signal that will make this reactive.

<For each={books()}>
  {(book) => {
    return (
      <li>
        {book.title} {book.author}
      </li>
    );
  }}
</For>

Note that since each element doesn’t re-render, there is no need for a key prop, like they do in React.

Inputs

In the following example, we are adding a book to a bookshelf. The props.setBooks is a signal from the parent to set the bookshelf’s books.

import { createSignal } from "solid-js";

const emptyBook = { title: "", author: "" };

export function AddBook(props) {
  const [newBook, setNewBook] = createSignal(emptyBook);

  const addBook = (event) => {
    event.preventDefault();
    props.setBooks((books) => [...books, newBook()]);
    setNewBook(emptyBook);
  };

  return (
    <form>
      <div>
        <label for="title">Book name</label>
        <input
          id="title"
          value={newBook().title}
          onInput={(e) => {
            setNewBook({ ...newBook(), title: e.currentTarget.value });
          }}
        />
      </div>
      <div>
        <label for="author">Author</label>
        <input
          id="author"
          value={newBook().author}
          onInput={(e) => {
            setNewBook({ ...newBook(), author: e.currentTarget.value });
          }}
        />
      </div>
      <button type="submit" onClick={addBook}>
        Add book
      </button>
    </form>
  );
}

As you can see, onInput is the event handler that takes in the event. In this case, we are setting the new book for each input (the title and author).

The onClick handler for the button uses the addBook function where it can prevent the form from submitting, set the books using a new array, then resetting the new book. It should be noted that setBooks is using a callback function where you access the current state. Also, it should be noted not to mutate state by creating that new array (much like in Redux practice).

Here’s another example of that callback.

setCount((currentCount) => {
  return currentCount + 1;
});

Control Flow

SolidJS gives us a component called Show. This has two props: when for conditions and fallback when the condition fails.

The reason you only get this component is because the component only renders once, not like React where there is logic for re-renders.

import { createSignal, Show } from "solid-js";
import { BookList } from "./BookList";
import { AddBook } from "./AddBook";

const initialBooks = [
  { title: "Code Complete", author: "Steve McConnell" },
  { title: "The Hobbit", author: "J.R.R. Tolkien" },
  { title: "Living a Feminist Life", author: "Sarah Ahmed" },
];

function Bookshelf(props) {
  const [books, setBooks] = createSignal(initialBooks);
  const [showForm, setShowForm] = createSignal(false);
  const toggleForm = () => setShowForm(!showForm());

  return (
    <div>
      <h1>{props.name}'s Bookshelf</h1>
      <BookList books={books()} />
      <Show
        when={showForm()}
        fallback={<button onClick={toggleForm}>Add a book</button>}
      >
        <AddBook setBooks={setBooks} />
        <button onClick={toggleForm}>Finished adding books</button>
      </Show>
    </div>
  );
}

function App() {
  return <Bookshelf name="Solid" />;
}

export default App;

Fetching Data

The primitive for any external data source is createResource. The function returns a deconstructed array with the data. It takes two arguments: the signal and the data fetching function.

const [data] = createResource(signal, dataFetchingFunction);

If we break down a data fetching function, it should look like the following.

export async function searchBooks(query) {
  if (query.trim() === "") return [];

  const response = await fetch(
    `https://openlibrary.org/search.json?q=${encodeURI(query)}`
  );

  const results = await response.json();

  return results.docs.slice(0, 10).map(({ title, author_name }) => ({
    title,
    author: author_name?.join(", "),
  }));
}

Putting it all together, query is the signal. searchBooks is the data fetching function. Once the data is returned, we can loop over it, and for each item, we can set the books if selected.

import { createSignal, JSX, createResource, For, Show } from "solid-js";
import { searchBooks } from "./searchBooks";

export function AddBook(props) {
  const [input, setInput] = createSignal("");
  const [query, setQuery] = createSignal("");
  const [data] = createResource(query, searchBooks);

  return (
    <>
      <form>
        <div>
          <label for="title">Search books</label>
          <input
            id="title"
            value={input()}
            onInput={(e) => {
              setInput(e.currentTarget.value);
            }}
          />
        </div>
        <button
          type="submit"
          onClick={(e) => {
            e.preventDefault();
            setQuery(input());
          }}
        >
          Search
        </button>
      </form>
      <Show when={!data.loading} fallback={<>Searching...</>}>
        <ul>
          <For each={data()}>
            {(book) => (
              <li>
                {book.title} by {book.author}{" "}
                <button
                  aria-label={`Add ${book.title} by ${book.author} to the bookshelf`}
                  onClick={(e) => {
                    e.preventDefault();
                    props.setBooks((books) => [...books, book]);
                  }}
                >
                  Add
                </button>
              </li>
            )}
          </For>
        </ul>
      </Show>
    </>
  );
}

Intro to Reactivity w/ SolidJS

The following is a code example introducing how Reactivity or Reactive Programming works.

import { createSignal, createEffect } from "solid-js";

const [count, setCount] = createSignal(2);
const [multipler, setMultiplier] = createSignal(2);

const product = () => count() * multipler();

// Change the count every second
setInterval(() => {
  setCount(count() + 1);
}, 1000);

// Change the multiplier every 2.5 seconds
setInterval(() => {
  setCount(multipler() + 1);
}, 2500);

// Effect automatically detects when a signal has changed
// So you don't have to add a dependency array.
// This is defined as "reactivity"
createEffect(() => {
  console.log(`${count()} * ${multiplier()} = ${product()}`);
});

• createSignal works by creating a data structure that can read and write. To each of these functions, subscribers are added and updated
• CreateEffect works by executing on a context queue (JS array). It takes its queue, executes it, then pops it (at least in pseudocode)

SolidJS uses “granular updates” so only the variables that change only update the DOM, and not entire components.

import { createSignal } from "solid-js";
import { render } from "solid-js/web";

function App() {
  const [count, setCount] = createSignal(2);
  const [multipler, setMultipler] = createSignal(2);

  const product = () => count() * multipler();
  return (
    <div>
      <h1>
        {count()} * {multipler()} = {product()}
      </h1>
      <button onClick={() => setCount(count() + 1)}>Counter</button>
      <button onClick={() => setMultipler(count() + 1)}>Multiplier</button>
    </div>
  );
}

Of course, you can move all of the code into its own component, and call components from other components.

import { createSignal } from "solid-js";
import { render } from "solid-js/web";

const [count, setCount] = createSignal(2);

function Multipler(props) {
  return (
    <div>
      <h1>
        {count()} * {props.by} = {count() * props.by}
      </h1>
      <button onClick={() => setCount(count() + 1)}>Counter</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Multipler by={2} />
      <Multipler by={3} />
      <Multipler by={11} />
    </div>
  );
}

In this example, we extracted Multipler into its own component, added props, like React, and called it multiple times in App. As you will also notice, signals do not have to be in the function scope! This is counter to what you do in React. Of course, if you don’t want to share the signal across other components, you can keep it in the functional lexical scope.

Introduction

I started this journey into Typescript by taking a ton of notes with Github Copilot X, “Typescript in 50 Lessons”, and the official documentation. I was able to tailor my experience in understanding how to create types through this method. Without further ado, here’s some notes that I generated (and modified).

What is Typescript?

TypeScript is a superset of JavaScript that adds optional static typing and other features to the language. It is designed to make it easier to write and maintain large-scale JavaScript applications. TypeScript code is compiled into JavaScript code that can run in any browser or JavaScript runtime.

TypeScript provides features such as classes, interfaces, enums, and modules that are not available in standard JavaScript. It also includes support for modern JavaScript features such as async/await and decorators.

TypeScript is developed and maintained by Microsoft, and it is open source and free to use. It is widely used in web development, and many popular frameworks and libraries such as Angular, React, and Vue have TypeScript support.

Static Typing

Static typing in TypeScript allows you to specify the types of variables, function parameters, and return values. This means that you can catch type-related errors at compile-time rather than at runtime.

For example, you can specify that a variable is of type string, and TypeScript will give you an error if you try to assign a number to that variable. Similarly, you can specify that a function takes a parameter of type number, and TypeScript will give you an error if you try to call that function with a string.

Here’s an example of a function that takes two numbers and returns their sum, with static typing:

function addNumbers(x: number, y: number): number {
  return x + y;
}

In this example, the x and y parameters are of type number, and the function returns a value of type number. If you try to call this function with non-numeric arguments, TypeScript will give you an error.

In addition, you can declare types for functions separately to the function implementation. This allows you to define a function type once and reuse it in multiple places.

type SearchFn = (
  query: string,
  tags?: string[] | undefined
) => Promise<Result[]>;

The void type is used to indicate that a function does not return a value. You can use void as the return type of a function to explicitly indicate that the function does not return anything.

Here’s an example of a function that returns void:

function logMessage(message: string): void {
  console.log(message);
}

In this example, the logMessage function takes a parameter of type string and logs it to the console. The function returns void, which means it does not return a value.

Type Assertions

A type assertion is a way to tell the compiler that you know more about the type of a value than it does. Type assertions are sometimes necessary when working with values that have a more general type than you need.

You can use a type assertion by adding the type you want to assert to the end of an expression, preceded by the as keyword. Here’s an example:

let myValue: any = "hello world";
let myLength: number = (myValue as string).length;

In this example, the myValue variable is declared as type any, which means it can hold any value. We then use a type assertion to tell the compiler that we know myValue is actually a string, so we can access its length property.

You can also use angle bracket syntax (< >) to perform a type assertion:

let myValue: any = "hello world";
let myLength: number = (<string>myValue).length;

In this example, the type assertion is performed using angle bracket syntax instead of the as keyword.

It’s important to note that type assertions do not change the runtime behavior of your code. They only affect the type checking performed by the TypeScript compiler.

You can use rest parameters to represent an indefinite number of arguments as an array. Rest parameters are denoted by an ellipsis (…) followed by the parameter name.

Here’s an example of a function that uses rest parameters:

function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

Primitive Types

There are several primitive types that represent the most basic types of values. These primitive types include:

• number: represents numeric values, including integers and floating-point numbers.
• string: represents textual values, such as words and sentences.
• boolean: represents logical values, either true or false.
• null: represents the intentional absence of any object value.
• undefined: represents the unintentional absence of any object value.
• symbol: represents a unique identifier that can be used as an object property.

let age: number = 30;
let name: string = "John";
let isStudent: boolean = true;
let favoriteColor: string | null = null;
let phoneNumber: string | undefined = undefined;
let id: symbol = Symbol("id");

Non-primitive types are types that are based on objects rather than simple values. These types include:

• object: represents any non-primitive value, including arrays, functions, and objects.
• array: represents an ordered list of values of a single type.
• function: represents a callable object that can be invoked with arguments.
• class: represents a blueprint for creating objects that have properties and methods.
• interface: represents a contract that describes the shape of an object.
• enum: represents a set of named constants.

Dynamically Generated Types

Dynamically generated types are types that are generated at runtime based on the shape of the data. There are several ways to generate types dynamically in TypeScript:

1. Index signatures: You can use index signatures to define an object type with dynamic keys. For example:

interface Dictionary<T> {
  [key: string]: T;
}

This interface defines a dictionary type with a dynamic key of type string and a value of type T.

2. Type assertions: You can use type assertions to cast a value to a specific type at runtime.

const data = JSON.parse(jsonString) as MyType;

This code uses a type assertion to cast the parsed JSON data to a specific type called MyType.

3. Type guards: You can use type guards to check the type of a value at runtime and conditionally cast it to a specific type. For example:

function isPerson(obj: any): obj is Person {
  return "name" in obj && "age" in obj;
}

function printPerson(obj: any) {
  if (isPerson(obj)) {
    console.log(`Name: ${obj.name}, Age: ${obj.age}`);
  } else {
    console.log("Not a person");
  }
}

4. Intersection types: You can use intersection types to combine multiple types into one.

Union Types

A union type is a type that can represent values of multiple types. Union types are denoted by the | symbol between the types.

function printId(id: number | string) {
  console.log(`ID is ${id}`);
}

Union types are useful when you want to write code that can handle multiple types of values.

Intersection Types

An intersection type is a type that combines multiple types into one. Intersection types are denoted by the & symbol between the types.

interface Named {
  name: string;
}
interface Loggable {
  log(): void;
}
function logName(obj: Named & Loggable) {
  console.log(`Name is ${obj.name}`);
  obj.log();
}

Intersection types are useful when you want to write code that can handle objects with multiple sets of properties and methods.

Value Types

This interface definition ensures that this Event must have a kind property with one of the three specified values. This can help prevent errors and make the code more self-documenting.

interface Event {
  kind: "conference" | "meetup" | "webinar";
}

Type Guards

You can use a type guard function to check the type of a value at runtime and conditionally cast it to a specific type. A type guard is a function that returns a boolean value and has a special obj is Type syntax that tells TypeScript that the value is of a specific type.

function isPerson(obj: any): obj is Person {
  return "name" in obj && "age" in obj;
}

You can then use the type guard function to conditionally cast a value to a specific type. Here’s an example:

function printPerson(obj: any) {
  if (isPerson(obj)) {
    console.log(`Name: ${obj.name}, Age: ${obj.age}`);
  } else {
    console.log("Not a person");
  }
}

Type Assertions

Type assertions in TypeScript are a way to tell the compiler that you know more about the type of a value than it does. Type assertions are similar to type casting in other languages, but they don’t actually change the type of the value at runtime. Type assertions use the as keyword.

const myValue: any = "hello world";
const myLength: number = (myValue as string).length;

This can be useful in JSX format too.

const myComponent = (
  <MyComponent prop1={value1} prop2={value2} />
) as JSX.Element;

Type Aliases

Type aliases in TypeScript are a way to create a new name for an existing type. They allow you to define a custom name for a type that may be complex or difficult to remember.

type MyType = {
  prop1: string;
  prop2: number;
};

const myVar: MyType = { prop1: 'hello', prop2: 42 };

function myFunc(param: MyType) {
  // function body
}

Type aliases can also be used with union types, intersection types, and other advanced type constructs. They can help make your code more readable and maintainable by giving complex types a simpler name.

Mapped Types

Mapped types in TypeScript are a way to create new types based on an existing type by transforming each property in the original type in a consistent way. Mapped types use the keyof keyword to iterate over the keys of an object type and apply a transformation to each key.

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

interface Person {
  name: string;
  age: number;
}

const myPerson: Readonly<Person> = { name: 'John', age: 30 };
myPerson.name = 'Jane'; // Error: Cannot assign to 'name' because it is a read-only property.

Mapped types can be used to create many other types, such as Partial, Pick, and Record. They are a powerful feature of TypeScript that can help make your code more expressive and maintainable.

Partial is a mapped type that creates a new type with all properties of the original type set to optional. Here’s an example:

interface Person {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
  };
}

type PartialPerson = Partial<Person>;

const myPerson: PartialPerson = { name: 'John' };

Pick is a mapped type that creates a new type with a subset of the properties of the original type. Here’s an example:

interface Person {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
  };
}

type PersonNameAndAge = Pick<Person, 'name' | 'age'>;

const myPerson: PersonNameAndAge = { name: 'John', age: 30 };

Record is a mapped type that creates a new type with a set of properties of a given type. Here’s an example:

type MyRecord = Record<string, number>;

const myObj: MyRecord = { a: 1, b: 2, c: 3 };

Type Predicates

A type predicate in TypeScript is a function that takes an argument and returns a boolean value indicating whether the argument is of a certain type. Type predicates are used to narrow the type of a variable or parameter based on a runtime check.

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function myFunc(value: unknown) {
  if (isString(value)) {
    // value is now of type string
    console.log(value.toUpperCase());
  } else {
    console.log('Not a string');
  }
}

We define a function myFunc that takes an argument value of type unknown. We then use the isString function to check if value is of type string. If it is, we can safely call the toUpperCase method on value because TypeScript has narrowed the type to string.

never, undefined, null Types

never is a type that represents a value that will never occur. It is used to indicate that a function will not return normally, or that a variable will never have a certain value.

function throwError(message: string): never {
  throw new Error(message);
}

undefined and null are both types and values. The undefined type represents a value that is not defined, while the null type represents a value that is explicitly set to null.

TypeScript also has a --strictNullChecks compiler option that can help prevent null and undefined errors. When this option is enabled, variables that are not explicitly set to null or undefined are considered to be of a non-nullable type. This means that you cannot assign null or undefined to these variables without first checking for their existence.

Classes

Classes in TypeScript are a way to define object-oriented programming (OOP) constructs. They allow you to define a blueprint for creating objects that have properties and methods.

Here’s an example of a class in TypeScript:

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(
      `Hello, my name is ${this.name} and I am ${this.age} years old.`
    );
  }
}

In this example, the Person class has two properties (name and age) and a method (sayHello). The constructor method is used to initialize the properties when a new object is created.

You can create a new Person object like this:

const person = new Person("Alice", 30);
person.sayHello(); // logs "Hello, my name is Alice and I am 30 years old."

One of the main differences between TypeScript and JavaScript classes is that TypeScript allows you to specify the types of class properties, method parameters, and return values. This helps catch type-related errors at compile-time rather than at runtime.

Another difference is that TypeScript provides access modifiers such as public, private, and protected, which allow you to control the visibility of class members. This can help you write more secure and maintainable code.

Finally, TypeScript classes can implement interfaces, which are contracts that describe the shape of an object. This can help enforce type checking on objects that implement the interface.

Access modifiers in TypeScript classes are keywords that determine the visibility of class members (properties and methods). There are three access modifiers in TypeScript:

• public: Public members are accessible from anywhere, both inside and outside the class.
• private: Private members are only accessible from within the class. They cannot be accessed from outside the class, not even from derived classes.
• protected: Protected members are accessible from within the class and from derived classes. They cannot be accessed from outside the class hierarchy.

Here’s an example of a class with access modifiers:

class Person {
  public name: string;
  private age: number;
  protected address: string;

  constructor(name: string, age: number, address: string) {
    this.name = name;
    this.age = age;
    this.address = address;
  }

  public sayHello() {
    console.log(
      `Hello, my name is ${this.name} and I am ${this.age} years old.`
    );
  }

  private getAge() {
    return this.age;
  }

  protected getAddress() {
    return this.address;
  }
}

In this example, the name property is public, so it can be accessed from anywhere. The age property is private, so it can only be accessed from within the Person class. The address property is protected, so it can be accessed from within the Person class and from derived classes.

Abstract Class

An abstract class is a class that cannot be instantiated directly. Instead, it is meant to be subclassed by other classes that provide concrete implementations of its abstract methods.

An abstract class can have both abstract and non-abstract methods. Abstract methods are declared without an implementation, and must be implemented by any concrete subclass. Non-abstract methods can have an implementation, and can be called by concrete subclasses.

Here’s an example of an abstract class in TypeScript:

abstract class Animal {
  abstract makeSound(): void;

  move(distanceInMeters: number) {
    console.log(`Animal moved ${distanceInMeters}m.`);
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog();
dog.makeSound(); // logs "Woof! Woof!"
dog.move(10); // logs "Animal moved 10m."

In this example, the Animal class is an abstract class that defines an abstract makeSound method and a non-abstract move method. The Dog class is a concrete subclass of Animal that provides an implementation of the makeSound method. The Dog class can also call the move method inherited from Animal.

But then, what’s the difference between an abstract class and an interface? Take a look at the following example:

abstract class Animal {
  abstract makeSound(): void;
  move(): void {
    console.log("Moving...");
  }
}

interface IAnimal {
  makeSound(): void;
  move(): void;
}

In this example, the Animal abstract class and the IAnimal interface both describe objects with a makeSound method and a move method. However, the Animal class is meant to be subclassed, while the IAnimal interface is meant to be implemented.

Some advantages of using inheritance instead of interfaces are:

• Multiple Inheritance: An interface can be implemented by multiple classes, while an abstract class can only be subclassed by one class. This can help you create more flexible and reusable code.
• Lighter Weight: An interface is a lighter weight construct than an abstract class, since it does not have any implementation details. This can help you write more modular and composable code.

Interfaces

In TypeScript, interfaces are contracts that describe the shape of an object. They define a set of properties and methods that an object must have in order to be considered an implementation of the interface.

Here’s an example of an interface in TypeScript:

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

In this example, the Person interface has two properties (name and age) and a method (sayHello). Any object that implements the Person interface must have these properties and method.

You can use an interface to enforce type checking on objects that implement it. For example, you can define a function that takes a Person object as a parameter:

function greet(person: Person) {
  person.sayHello();
}

In this example, the greet function takes a Person object as a parameter. TypeScript will give you an error if you try to call this function with an object that does not implement the Person interface.

While interfaces and classes have similar ways in defining object types, here are some differences:

• Implementation: A class can have both properties and methods, while an interface can only have properties and method signatures. A class is an implementation of an object, while an interface is just a description of an object.
• Instantiation: A class can be instantiated to create objects, while an interface cannot. An interface is just a contract that describes the shape of an object.
• Inheritance: A class can inherit from another class or multiple classes, while an interface can only extend other interfaces.
• Access Modifiers: A class can have access modifiers (public, private, protected) to control the visibility of its members, while an interface cannot.

The benefits of using an interface are the following:

1. Type checking: Interfaces allow you to enforce type checking on objects that implement them. This can help catch errors at compile-time rather than at runtime.
2. Code reuse: Interfaces can be used to define a common set of properties and methods that multiple objects can implement. This can help reduce code duplication and make your code more modular.
3. Abstraction: Interfaces can be used to abstract away implementation details and focus on the contract between objects. This can help make your code more maintainable and easier to reason about.
4. Polymorphism: Interfaces can be used to create polymorphic behavior, where different objects can be used interchangeably as long as they implement the same interface.

Polymorphism

Polymorphism is the ability of objects to take on multiple forms. In TypeScript, interfaces can be used to create polymorphic behavior, where different objects can be used interchangeably as long as they implement the same interface.

Here’s an example of polymorphism in TypeScript:

interface Shape {
  getArea(): number;
}

class Rectangle implements Shape {
  constructor(private width: number, private height: number) {}

  getArea() {
    return this.width * this.height;
  }
}

class Circle implements Shape {
  constructor(private radius: number) {}

  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

function printArea(shape: Shape) {
  console.log(`The area of the shape is ${shape.getArea()}`);
}

const rectangle = new Rectangle(10, 20);
const circle = new Circle(5);

printArea(rectangle); // logs "The area of the shape is 200"
printArea(circle); // logs "The area of the shape is 78.53981633974483"