DEV Community: Sam Piggott

Using Framer Motion & React to build TikTok's record button

Sam Piggott — Mon, 26 Apr 2021 09:29:05 +0000

Summary

The TikTok record button is a deceivingly complicated UI element with some interesting moving parts, so I thought it would be perfect for a tutorial. In the guide above, we'll build a fully animated record button using nothing but React, Framer Motion (a fantastic animation library), and TypeScript.

Project Files

All the project files are available to download and use yourself over on my website, CodeSnap.io.

Demo

Thanks!

Thanks for watching - any and all feedback is greatly appreciated, and please share it around if you think it'll be useful to anybody else. If you're interested in learning more, I've got loads more video and written content over on my website, CodeSnap.io..

Building TikTok's record button using Framer Motion & React

Sam Piggott — Wed, 21 Apr 2021 11:51:44 +0000

Summary

Project Files

All the project files are available to download and use yourself over on my website, CodeSnap.io.

Demo

Thanks!

Using Framer Motion to make page transitions in React

Sam Piggott — Wed, 27 Jan 2021 13:10:23 +0000

In this short tutorial, we'll be learning how we can use the AnimatePresence component provided by Framer Motion to create our very own page transitions when navigating between pages in React!

We'll be using React Router for this example - but this same principle should work for other router implementations, too (have tested with the Next.js router and it worked with no issues!)

Watch the Video Tutorial:

You can also download the source code from the link above, too!

Installing the required packages

First of all, let's install the required packages into our React project. We'll need React Router for navigation, and Framer Motion for the transition behaviour.

yarn add react-router-dom framer-motion

Adding a BrowserRouter to our app

Next, in the top-level component where ReactDOM.Render is called (for me, index.tsx), we'll want to wrap our app's container in an instance of <Router> from react-router.

First, we'll add the necessary imports to index.tsx...

import { BrowserRouter as Router } from 'react-router-dom';

Then, we'll wrap our top-level component in an instance of this router.

ReactDOM.render(
  <React.StrictMode>
    <Router> // <-- Adding this...
      <App />
    </Router> // <-- ...and this!
  </React.StrictMode>,
  document.getElementById('root')
);

Building a simple switch

Next, we'll need to make some changes to the component immediately beneath the top-level component (in our example, the App component).

Inside the App component, we'll set up a basic routing system for our app. In this example, we're only going to be navigating between two simple pages - so we just need a <Switch> and two <Route> components to get us going.

So let's import those in our App.tsx file first...

import { Switch, Route } from 'react-router-dom';

Then below, we'll return our simple switch from our App component. For clarity, Page1 and Page2 components can be any valid React component.

const App = () => {
  return (
    <Switch>
      <Route path="/page1">
        <Page1 />
      </Route>
      <Route path="/page2">
        <Page2 />
      </Route>
    </Switch>
  );
};

Adding AnimatePresence from Framer Motion

Now, it's time to add the animation! First, we'll wrap our <Switch> in the <AnimatePresence> component from Framer Motion. Let's import that first...

import { AnimatePresence } from 'framer-motion';

Then, let's wrap our app in that new component.

const App = () => {
  return (
    <AnimatePresence exitBeforeEnter initial={false}>
      <Switch>
        <Route path="/page1">
          <Page1 />
        </Route>
        <Route path="/page2">
          <Page2 />
        </Route>
      </Switch>
    </AnimatePresence>
  );
};

Transitions with AnimatePresence only work when the child immediately below the AnimatePresence component changes. In that case, that's our Switch component. We'll need to add some props to help AnimatePresence recognise when that change has occurred.

Once again, in App.tsx, we're going to import the useLocation hook from react-router.

import { useLocation } from 'react-router-dom';

And now, let's add the location and key props to our Switch.

const App = () => {
  const location = useLocation();
  return (
    <AnimatePresence exitBeforeEnter initial={false}>
      <Switch location={location} key={location.pathname}>
        <Route path="/page1">
          <Page1 />
        </Route>
        <Route path="/page2">
          <Page2 />
        </Route>
      </Switch>
    </AnimatePresence>
  );
};

Adding the transition effect parameters to our page components

Great news - we're done with our App component. Now, let's add some animations to our pages, and we should be ready to go!

Here's the Page1 component I'm working with. It's super simple - just a simple div with some styles, and a Link to our other page in the app.

const Page1 = () => {
  return (
    <div style={{ ...styles.page, ...styles.page1 }}>
      <p style={styles.copy}>This is page 1</p>
      <Link style={{ ...styles.copy, ...styles.link }} to="/page2">
        Go to Page 2
      </Link>
    </div>
  );
};

To trigger an animation when this Page1 component is mounted, we'll need to wrap it in a special component called motion.div which is provided by Framer Motion. So, let's import that...

import { motion } from 'framer-motion';

Now, we'll wrap our Page1 component in our new motion.div component, and provide some props to perform the animation when it's mounted.

const Page1 = () => {
  return (
    <motion.div
      initial={{ scaleY: 0 }}
      animate={{ scaleY: 1 }}
      exit={{ scaleY: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div style={{ ...styles.page, ...styles.page1 }}>
        <p style={styles.copy}>This is page 1</p>
        <Link style={{ ...styles.copy, ...styles.link }} to="/page2">
          Go to Page 2
        </Link>
      </div>
    </motion.div>
  );
};

As you can see, we've added three new props to our motion.div component here, too.

initial - This is the style of the component at the beginning of the animation when it is animating in.
animate - This is the style of the component at the end of the animation when it is animating in.
exit - This is the style of the component at the end of the animation when it is animating out.
transition - Transition configuration. Here, we're specifying how long we want the duration to last for (in our case, 0.5 seconds).

With those props in place, we can expect the following behaviour:

When the prop is first mounted, it is invisible (scaleY: 0)
Then, it will immediately animate over 0.5 seconds to be visible (scaleY: 1).
When it is animating out, it will resize back down before it is removed from the DOM (scaleY: 0).

Finally, the only other thing we need to do is wrap our other page components that we wish to animate using the same method.

I'm animating between two pages (Page1 and Page2 in this example), so I'll need to wrap Page2 in a motion.div tag, too.

const Page2 = () => {
  return (
    <motion.div
      initial={{ scaleY: 0 }}
      animate={{ scaleY: 1 }}
      exit={{ scaleY: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div style={{ ...styles.page, ...styles.page2 }}>
        <p style={styles.copy}>This is page 2</p>
        <Link style={{ ...styles.copy, ...styles.link }} to="/page1">
          Go to Page 1
        </Link>
      </div>
    </motion.div>
  );
};

And we're done!

And with that, we are done! We have successfully set up a fancy animation when navigating between pages in React.

You should now also have all the knowledge you need to customise your transition styles, too. Each page can also have different transition styles - the sky's the limit!

CodeSnap

If you enjoyed this course, I'm uploading tutorial videos, courses, articles and plenty more. If you'd like to see more of this content, please consider signing up for the mailing list over on CodeSnap.io. It encourages me to make more videos and articles just like this one 🙏

Thanks for reading!

⚡️ Full TypeScript Beginner's Course [Free!]

Sam Piggott — Sat, 23 Jan 2021 12:27:02 +0000

Over lockdown, I wrote, shot and edited a full TypeScript course for my website, CodeSnap.

It's been designed for JavaScript developers who want to learn TypeScript in a way which they're already familiar with.

The best thing is - it's totally free!

Watch the full course here!

Details

⏰ Full 2 hour course
✅ Everything you need to know to get started with TypeScript
📹 16 videos (each around 8-10 minutes long)

All Chapters

Introduction & Setup

Chapter 1: What is TypeScript?
Chapter 2: Welcome to the course!
Chapter 3: Setting up our environment (TypeScript, ESLint and Prettier)

Getting Started

Chapter 4: Basic Types (strings, numbers etc)
Chapter 5: Type Inference
Chapter 6: Union Types
Chapter 7: Arrays & Tuples
Chapter 8: Any & Unknown
Chapter 9: Undefined & Null
Chapter 10: Enums
Chapter 11: Interfaces
Chapter 12: Functions
Chapter 13: Literal Types

Writing a mini project with everything we've learned

Chapter 14: Writing an application in TypeScript - Part 1
Chapter 15: Writing an application in TypeScript - Part 2
Chapter 16: Writing an application in TypeScript - Part 3

Support

I loved making this course, but it took bloody ages to put together...!

If you want to support me, and encourage me to make more videos & courses like this, I'd love it if you could sign up to the email list. It gives me a bit more guidance to see the amount of people interested in the content, and keeps me motivated to make more!

Thanks!

Thanks for watching - any and all feedback is greatly appreciated, and please share it around if you think it'll be useful to anybody else.

Setting up TypeScript with ESLint & Prettier for Visual Studio Code

Sam Piggott — Mon, 14 Dec 2020 08:42:24 +0000

Okay, if you've stumbled on this article, chances are you probably want this information as quick and easy as possible.

I'll keep things as short as I can, but we will be walking through everything step-by-step.

Here's a quick introduction on what everything is that we'll be setting up today:

TypeScript 4 is an evolution of JavaScript which brings strict typing (and much more!) to the JavaScript language. I've got a whole article introducing TypeScript right here if you're interested in learning more.
ESLint is a tool which scans your code for errors in your codebase, and offers fixes as you go (also known as "linting").
Prettier is a code formatter which formats your code to make it look prettier (hence the name!)

Prefer video?

Before we get started - I've recorded a video available with all of the following steps in it:

The video is part of a completely free 16 part series available to watch for free over on my YouTube channel. Click here to get the full course!

Hold up - why is this guide so long?!

There are other ways to get up and running with these tools quickly (such as running an npx command, pre-installing everything).

Here's why I think you should follow this (longer) guide instead:

Full transparency as to what you're installing, step-by-step (no unwanted libraries or bloat)
Installing everything step-by-step (with explanations) makes it easier to debug particular bugs if any of these tools fail
A greater understanding of the individual tools will make it easier to extend or change any of the tools' behaviour later!

Just want the code?

With all of that said - if you'd rather just get up and running quickly, I've written a git repo with everything described in this guide. It's available right here.

If it's useful, I'd appreciate a star! ✨

Still here? Alright! On with the show!

Installing TypeScript

Step 1: We'll start by creating a new folder to use as a root for our project. In your command line, enter the following command (replacing my-new-project with your project's name):

mkdir my-new-project

Step 2: Next, we need to get our project set up using Yarn. To do this, we'll need to enter the folder we've just created and initialise our project.

cd my-new-project
yarn init

This should give us an interactive series of steps where we can enter all the relevant information for our project in.

Enter values for all of these if you have anything specific, or just press Enter to use the defaults for each (shown in parentheses after each question).

The only one to pay attention to is the entry point - make sure you enter ./build/index.js rather than just index.js. I'll highlight why later in the article.

Step 3: Okay, now that we've initialised our project, let's go ahead and install TypeScript into our project.

Using the same command line (still navigated to the my-new-project directory), enter the following command:

yarn add typescript --dev

This will add TypeScript to our devDependencies. For more information on the difference between dependencies and devDependencies, there's an article you can check out right here.

Step 4: After that's installed, we'll need to create ourselves a configuration file for TypeScript to use.

To create that, enter the following command:

touch ./tsconfig.json

Step 5: Next, we'll create a folder to store our TypeScript files in, and create an index.ts file to get started. Back in your command line, enter the following:

mkdir ./src
touch ./src/index.ts

Great - now we've created a folder in our project's directory called src, and created a single file called index.ts inside.

Step 6: Next, you'll want to open up the tsconfig.json file that we just created, using VSCode.

We're going to set our TypeScript's configuration up with the simplest settings possible, with the idea being that you can add to and extend this. Feel free to copy and paste the following configuration (feel free to remove the comments - they're not required, more just to let you know what each line does!)

{
    "compilerOptions": {
        "rootDir": "./src", // The entry point for all of our TypeScript files (make sure all .ts files are stored in a subdirectory of this!)
        "outDir": "./build", // The directory which we'll be exporting our compiled JavaScript files to
        "lib": ["ESNext", "DOM"], // The libraries we wish to use in TS (ESNext being the latest version of JavaScript, and DOM being JavaScript DOM libraries - like console.log)
        "strict": true // Stipulating we want strict mode on. I personally would recommend this to get the most out of TS - another great article on this here: https://dev.to/briwa/how-strict-is-typescript-s-strict-mode-311a
    }
}

Note: If you're planning on setting this project up with React later down the line, there's a React-specific barebones tsconfig.json you can refer to here

For more information on tsconfig.json and all of the possible parameters you can use during setup, there's more information on the official TypeScript handbook..

Step 7: Finally, open up the root folder (not just a single file!) - in VSCode.

You should now be able to write TypeScript inside of your index.ts file! Just make sure you create all your .ts files inside of the src folder (or a sub-directory inside src) to ensure the compiler catches everything.

To build your TypeScript into JavaScript files, simply run the following command from the root directory:

yarn tsc -p ./tsconfig.json

ESLint

Alright, let's get our codebase linted with ESLint!

Step 1: First, we'll want to install the relevant ESLint plugin for VSCode. Simply search for ESLint in the Extensions bar on the left side of the screen, then hit Install to install it.

Step 2: Open up your command line once again, and navigate to your project's root directory. From there, we want to install all the required libraries to get ESLint up and running.

To do so, enter the following command:

yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

This will install:

eslint - The ESLint core package
@typescript-eslint/eslint-plugin - A plugin for ESLint to support TypeScript specifically
@typescript-eslint/parser - Further support for ESLint to lint TypeScript source files

Step 3: Next, whilst we're still in the command line, we'll need to set up our configuration file for ESLint.

To do so, enter the following command:

touch .eslintrc

(Note the . at the beginning of the eslintrc. That's really important - make sure you don't miss it!)

Step 4: To finish up the setup, we'll need to make some changes to the .eslintrc file that we've just created. If you already have VSCode open, you should now be able to navigate to .eslintrc in your project tree.

Here's what that looks like on Visual Studio Code:

Now that .eslintrc is open, update it so that it looks like the following:

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
    ]
}

This configuration applies all of the libraries that we've just installed.

Step 5: Restart VSCode!

Step 6: You should now be able to observe an ESLint marker in the status bar (bottom right corner of the screen).

If it looks like the image above - great! You're all set!

However, if it looks like this:

...you'll need to click it, and then grant the workspace the necessary permissions to use ESLint. After that, one last IDE restart should get you up and running!

Prettier

Almost there! Let's get our environment configured to use Prettier...

Step 1: Once again, open up your command line, and navigate to your project's root directory. We'll be installing a few new packages to add support for Prettier...

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

Whilst we're in here, let's create a configuration file. No need to edit it - it just needs to exist.

touch .prettierrc

Step 2: Next, let's open up our .eslintrc file and add those new libraries to the extends array in our configuration...

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ]
}

(Note: The order in which the content of the extends array is very important to ensure you don't have any trouble later on down the line!)

Step 3: Finally - restart VSCode one last time.

And that's it - feel free to breathe a sigh of relief. You've done it! You've set up a project with TypeScript, ESLint and Prettier!

Summary

It feels like a hell of a lot to do just to get your environment ready, but I honestly believe that once you've gone through this process once and have an understanding as to how all the separate components come together, it really makes things a lot more straightforward in the event that any of these tools fail. Now that you've braved the storm, you should also be in a great position to customise ESLint and Prettier to your heart's content.

One last thing...

I've made a 16-part TypeScript course, written specifically for JavaScript developers - and it's totally free. If you're interested, it's available to view on my website right here. You can also support this content by subscribing to me, or just following me on here for more TypeScript content.

Thanks so much for reading!

Setting up TypeScript 4 with ESLint & Prettier in Visual Studio Code

Sam Piggott — Fri, 11 Dec 2020 09:06:58 +0000

Okay, if you've stumbled on this article, chances are you probably want this information as quick and easy as possible.

I'll keep things as short as I can, but we will be walking through everything step-by-step.

Here's a quick introduction on what everything is that we'll be setting up today:

TypeScript 4 is an evolution of JavaScript which brings strict typing (and much more!) to the JavaScript language. I've got a whole article introducing TypeScript right here if you're interested in learning more.
ESLint is a tool which scans your code for errors in your codebase, and offers fixes as you go (also known as "linting").
Prettier is a code formatter which formats your code to make it look prettier (hence the name!)

Prefer video?

Before we get started - I've recorded a video available with all of the following steps in it:

The video is part of a completely free 16 part series available to watch for free over on my YouTube channel. Click here to get the full course!

Hold up - why is this guide so long?!

There are other ways to get up and running with these tools quickly (such as running an npx command, pre-installing everything).

Here's why I think you should follow this (longer) guide instead:

Full transparency as to what you're installing, step-by-step (no unwanted libraries or bloat)
Installing everything step-by-step (with explanations) makes it easier to debug particular bugs if any of these tools fail
A greater understanding of the individual tools will make it easier to extend or change any of the tools' behaviour later!

Just want the code?

With all of that said - if you'd rather just get up and running quickly, I've written a git repo with everything described in this guide. It's available right here.

If it's useful, I'd appreciate a star! ✨

Still here? Alright! On with the show!

Installing TypeScript

Step 1: We'll start by creating a new folder to use as a root for our project. In your command line, enter the following command (replacing my-new-project with your project's name):

mkdir my-new-project

Step 2: Next, we need to get our project set up using Yarn. To do this, we'll need to enter the folder we've just created and initialise our project.

cd my-new-project
yarn init

This should give us an interactive series of steps where we can enter all the relevant information for our project in.

Enter values for all of these if you have anything specific, or just press Enter to use the defaults for each (shown in parentheses after each question).

The only one to pay attention to is the entry point - make sure you enter ./build/index.js rather than just index.js. I'll highlight why later in the article.

Step 3: Okay, now that we've initialised our project, let's go ahead and install TypeScript into our project.

Using the same command line (still navigated to the my-new-project directory), enter the following command:

yarn add typescript --dev

This will add TypeScript to our devDependencies. For more information on the difference between dependencies and devDependencies, there's an article you can check out right here.

Step 4: After that's installed, we'll need to create ourselves a configuration file for TypeScript to use.

To create that, enter the following command:

touch ./tsconfig.json

Step 5: Next, we'll create a folder to store our TypeScript files in, and create an index.ts file to get started. Back in your command line, enter the following:

mkdir ./src
touch ./src/index.ts

Great - now we've created a folder in our project's directory called src, and created a single file called index.ts inside.

Step 6: Next, you'll want to open up the tsconfig.json file that we just created, using VSCode.

Note: If you're planning on setting this project up with React later down the line, there's a React-specific barebones tsconfig.json you can refer to here

For more information on tsconfig.json and all of the possible parameters you can use during setup, there's more information on the official TypeScript handbook..

Step 7: Finally, open up the root folder (not just a single file!) - in VSCode.

To build your TypeScript into JavaScript files, simply run the following command from the root directory:

yarn tsc -p ./tsconfig.json

ESLint

Alright, let's get our codebase linted with ESLint!

Step 1: First, we'll want to install the relevant ESLint plugin for VSCode. Simply search for ESLint in the Extensions bar on the left side of the screen, then hit Install to install it.

Step 2: Open up your command line once again, and navigate to your project's root directory. From there, we want to install all the required libraries to get ESLint up and running.

To do so, enter the following command:

yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

This will install:

eslint - The ESLint core package
@typescript-eslint/eslint-plugin - A plugin for ESLint to support TypeScript specifically
@typescript-eslint/parser - Further support for ESLint to lint TypeScript source files

Step 3: Next, whilst we're still in the command line, we'll need to set up our configuration file for ESLint.

To do so, enter the following command:

touch .eslintrc

(Note the . at the beginning of the eslintrc. That's really important - make sure you don't miss it!)

Here's what that looks like on Visual Studio Code:

Now that .eslintrc is open, update it so that it looks like the following:

This configuration applies all of the libraries that we've just installed.

Step 5: Restart VSCode!

Step 6: You should now be able to observe an ESLint marker in the status bar (bottom right corner of the screen).

If it looks like the image above - great! You're all set!

However, if it looks like this:

...you'll need to click it, and then grant the workspace the necessary permissions to use ESLint. After that, one last IDE restart should get you up and running!

Prettier

Almost there! Let's get our environment configured to use Prettier...

Step 1: Once again, open up your command line, and navigate to your project's root directory. We'll be installing a few new packages to add support for Prettier...

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

Step 2: Next, let's open up our .eslintrc file and add those new libraries to the extends array in our configuration...

(Note: The order in which the content of the extends array is very important to ensure you don't have any trouble later on down the line!)

Step 3: Finally - restart VSCode one last time.

And that's it - feel free to breathe a sigh of relief. You've done it! You've set up a project with TypeScript, ESLint and Prettier!

Summary

One last thing...

I've made a 16-part TypeScript course, written specifically for JavaScript developers - and it's totally free. If you're interested, it's available to view on my YouTube channel right here. You can also support this content by subscribing to me, or just following me on here for more TypeScript content.

Thanks so much for reading!

4 Must-Know TypeScript Tips & Tricks

Sam Piggott — Mon, 07 Dec 2020 09:21:08 +0000

TypeScript has some incredibly nifty utilities that can be used to make your codebase more readable, efficient and safer.

In this article, I've compiled a list of four of my favourite utilities that I use in my daily workflow, along with some examples and explanations of each.

They've helped my TypeScript workflow - I hope they help yours, too!

Before we get started...

If you're new to TypeScript, I have a full course for beginners available right here on my YouTube channel!

It covers all the essentials you need to get started with TypeScript as a JavaScript developer.

If that sounds like something you're looking for, check it out here - I'd love to hear your thoughts on it!

Pick and Omit

Pick and Omit are special utility types that TypeScript provides as a way to add more convenience and power when creating new types for object shapes. Let's take a look at each one in detail with some examples...

Pick

In the following example, we've constructed an interface type called Consumable, which has got a bunch of properties that relate to something you could eat or drink.

TypeScript provides the Pick utility to allow us to "pluck" properties from our object shape types, and create a new type from that. Let's create a new type, Pizza, by simply picking out the relevant properties from the Consumable type.

Nice! Let's go over that in a little more detail.

The first parameter that we pass into the Pick utility is the type that we want to pick from.
The second parameter is either a single value or a union type of all of the properties we want to pick out from the type we passed in as the first parameter.

In the above example, we're picking size and caloriesPerServing from the Consumable type to construct our brand new type, Pizza.

Let's go one step further. The cool thing about creating a new type is that we can use it just like anything else - so let's extrapolate our Pizza type and add a toppings property to our object shape...

In this example, we're declaring Pizza as an interface, so that we can extend from our new Picked type and add a brand new parameter, toppings, to it. That means that our Pizza interface, after being compiled, would have the following properties:

size: 'large' | 'medium' | 'small'
caloriesPerServing: number
toppings: string[]

Omit

Omit works just like Pick - but the inverse.

We pass Pick the properties we wish to pluck out from the object type, but with Omit, we pass the properties we wish to exclude from the initial object type.

Let's take a look at an example to make things a little clearer. Just like with Pick, we'll use the same Consumable type once again as a base - but this time, we'll create a new type called Sandwich.

Our Consumable type has a property on it called millilitresPerServing. That's not really relevant to a sandwich - so by using Omit, we can pass in two arguments:

First, the type that we wish to use as a base...
...followed by a single or union type of the keys that we wish to omit from that interface.

(Just like with Pick!)

That means in this example, our Sandwich type would have the following properties:

size: 'large' | 'medium' | 'small'
caloriesPerServing: number
gramsPerServing: number

Notice that millilitresPerServing isn't present in that list - that's because our Sandwich type intentionally omits that from our new type by using the Omit utility as described above.

What's just as cool - just like with Pick, the previous example, we can use the new type generated by the Omit utility as a base to extend from. Let's extend our Sandwich type by adding some fillings...

Omit and Pick really come into their own in more complex applications, particularly when you have a lot of overlapping object shapes that have properties which should remain identical in type. They're a dream for composition!

Required & Partial

Just like Pick and Omit that we covered above, Required and Partial are utility types that allow us to create new types from our object types. Let's take a look into each one to see how they could be used as part of a workflow.

Required

Okay, simple example - we have an interface for a (fictional) sign-up form on a website, with all the usual suspects present.

Notice that in the above example, we've got a few ?s in there.

Those are use to indicate that those properties are optional - which means that they're allowed to be undefined. Let's create an input object using our type:

(Note: I could have also just omitted all of of the properties with undefined as a value, but I wanted this example to be a bit more explicit for easy reading!)

Let's say for example that we have another form in our web app elsewhere, which uses the same shape of input - but this time, requires that we supply values to all of the properties in our MyFormInputs object.

If we wanted to, we could just re-write that same interface again, keeping all our keys and value types the same - but removing those pesky ?s to ensure that we can't pass any undefined values in...

...but, following the classic DRY rule, this should start to leave a bit of a bad taste in your mouth. There must be a better way...

Thankfully, that's where the wonderful Required utility comes in!

Let's create a new type called MyFormInputsRequired and make all of the properties on it non-nullable.

Required simply takes one parameter - the interface or object type that we want to make all properties enforced. In the above example, we also create a new object using that interface, and ensure that every single property has a corresponding value.

If the key wasn't present in requiredInputs, or if we supplied null or undefined as any of the values, this would throw an exception at compile-time.

Nice and safe!

Partial

Partial is the exact opposite of Required - instead of making all the properties in an interface or object type required, it makes them all optional. (if you've read this entire article from the top, you're probably beginning to notice a pattern...)

Let's take a look at an example on how it could be used. We'll go back to videogames to maintain some semblance of variation...

In the above example, we've introduced our VideoGame interface, which has three properties on it which are all required.

Let's say we wanted to create a new type making all of the properties optional. We'll use the power of Partial to make this happen...

In the example above, we create a new type named VideoGamePartial, and, just like how we used Required above, we pass the Partial utility a single object type.

This creates a new type, copying the exact shape of the VideoGame interface, but making all of the properties optional.

When we create a new object using our new VideoGamePartial type (as demonstrated in the nintendoGame value at the bottom of the above example), we can see that we're able to skip two of the previously required values - description and ageRating.

Taking this to an extreme, because Partial makes all of our properties optional, it would actually be valid to use that type to simply create an empty object...

...but that's probably more of a hypothetical use-case, as I can't imagine that being super useful in day-to-day 😅

Finally, topping it all off (and attempting to drive home how cool these utilities are) - let's use our new Partial type as a base to extend from!

In the above example, we create a new type called SonyVideoGame, which extends from our VideoGame type that has a set of properties which are all optional.

We've then added a new (required!) type to it called platform. That means that all of the properties (and their respective optional states would be as follows):

title: string - Optional
description: string - Optional
ageRating: '3+' | '10+' | '16+' - Optional
platform: 'PS2' | 'PS3' | 'PS4' | 'PS5' - Required

Using composition and the power of TypeScript utilities, we've created a complex type which has a series of properties which are both optional & required. Neat, right?

Summary

And that concludes our whistle-stop tour on some of TypeScript's powerful utilities that are provided with the language. There's plenty of others that you can delve into over at the TypeScript handbook - but these four are some of my favourites.

If you're looking for more TypeScript learnings, I have a full video course on the basics of TypeScript over on my website at CodeSnap.io!

Happy TypeScript'ing!

Getting started with TypeScript as a JavaScript developer

Sam Piggott — Tue, 01 Dec 2020 21:22:41 +0000

If you're a JavaScript developer, you might have heard of TypeScript already.

Or maybe you've had a quick dip into it, but the merit isn't immediately obvious.

Or perhaps your colleague hasn't stopped talking about it for the past two years, and you're keen to hear what all the hype's about.

Personally speaking, I've experienced all three of the above - and when I was first digging in to TypeScript, I found it quite difficult to find all the answers I needed as a beginner/hobbyist in one place.

I'm hoping that this article can:

Explain why you should bother learning TypeScript
Show you the advantages of why I think TypeScript's fantastic Demonstrate via examples the similarities between JavaScript and TypeScript

Why bother with TypeScript?

Let's start with an example. Spot the bug in this JavaScript code:

Did you spot it? It's a fairly common mistake - our function multiply multiplies a passed number by two…but we've gone and passed it a string.

We shouldn't be multiplying a string - we should be multiplying a number!

What's worse - we could very easily miss this bug. After all, when we run this JavaScript - perhaps embedded as part of a website, or Node.js application, myNumber will just be NaN.

Now, imagine if we passed myNumber to another function, with the intention of it to be used as a number. In the best case scenario, we'll be backtracking to find this not-so-obvious bug, and in the worst, our code is pushed live, and causes unexpected behaviour to our users!

And this, right here, is one of the main reasons TypeScript was created. TypeScript catches these problems before they reach runtime, and instead, are caught at compile time (I'll get into what that means in just a minute…)

Okay, I'm intrigued. Show me some examples!

Like a lot of developers out there, I learn best through examples. Let's check out some basic code snippets written in JavaScript, then see how each one could be written in TypeScript.

Example 1: Adding two numbers together

JavaScript:

TypeScript:

Example 2: Getting the first letter of a word

JavaScript:

TypeScript:

From these examples, you might be surprised with how similar writing TypeScript is to JavaScript is. At its core, TypeScript is just JavaScript, but with additional features to make life for a developer a little easier.

I'll explain in a bit more detail in just a minute, but first, here's a more complex example:

Example 3: Create a new object, then access a value on it

JavaScript:

TypeScript:

It's what you already know, just with some extra bits and pieces that will make your development life so much easier in the long run.

Shameless Self-Plug

If you're enjoying reading this - I have a free Introduction to TypeScript video course available over on my YouTube channel!

I'll be uploading new parts to my channel every Wednesday but if you don't want to wait, you can visit here to download and binge the whole thing right away.

Alright, back to the article…

TypeScript is (not so) secretly just JavaScript

(Sorry, couldn't resist.)

The thing is, we could write TypeScript files to our heart's content; but not a single web browser out there could understand it right now.

And therein lies the prestige. After all is said and done, TypeScript compiles into plain ol' JavaScript.

TypeScript files are written with the .ts file extension, and JavaScript is written with the .js file extension. Modern browsers can't understand TypeScript files in their native form. So, we need to turn it into something that it can understand - JavaScript!

This is where the TypeScript compiler comes in.
Once we're ready to ship our TypeScript code, we can run the TypeScript compiler on our .ts file(s), with a command like so:

tsc -w ./index.ts - outFile ./index.js

After running this on our index.ts TypeScript file, we should have an index.js file ready that we can import into our website, use as part of a Node.js application, create a Chrome extension with - anything, really, that you can do with JavaScript!

What's more, the compiler has another feature. It'll also tell us when we write bugs in our code, and even let us know how to fix it…

Uncovering bugs early

Let's take that JavaScript example from the top of this article:

…and let's write out what it would look like in TypeScript…

Now, let's see what happens when we try to compile our TypeScript code above with the TypeScript compiler, as we learned in the previous section…

tsc ./index.ts - outFile ./index.js

Uh-oh. This can't be good.

TypeScript created our index.js file, but it tells us there's something wrong with our code. It's explicitly telling us that we can't pass a string to a function which requires our value argument to be a number…so let's fix that bug!

Now, when we run it once again…

Hey, look! No errors!

We can now deploy our index.js file to wherever we want with the confidence that we don't have any type errors in our codebase.

Summary

This is the tip of the iceberg. Not even the tip - it's almost like an ice-cube balanced on top of an iceberg. If you're excited by this, then I promise you that there's much more to be excited by with TypeScript. It's insanely convenient and helpful, but also ridiculously powerful.

What's more; almost all of the major frontend frameworks (React.js, Vue, Angular) have TypeScript support nowadays - same with backend frameworks, too. You'll be able to write your TypeScript using the latest JavaScript features, but deploy JavaScript that works almost anywhere!

That's all for this introduction - but I'll be posting more articles about TypeScript in the coming weeks.

In the meantime, if you're interested in learning more TypeScript - my Introduction to TypeScript video course is available on my website, CodeSnap.io.

It's got basically everything I've mentioned here stuffed into the first two videos - and there's sixteen videos in the entire course.

If you're interested in checking out the course on YouTube, the playlist is available here, or, if you'd rather download and binge the entire thing, you can download it from here.

Thanks so much for reading - happy TypeScript'ing!