DEV Community: Michael Sholty

Cohort 7 Recap

Michael Sholty — Mon, 06 Jul 2020 12:54:35 +0000

Here at The Collab Lab, we've wrapped up another cohort. We couldn't be more proud of the amazing work this team has put in over the last eight weeks!

First, let's take a second to appreciate the amazing work they did. Check out the live application that this team wrote from scratch!

💥 Our Participants

🐧 Nabil Kazerouni
🤩 DeVon Thompson
✨ Megan McKissack
🏆 Tanzima Chowdhury

👩‍🏫 Our Mentors

🏅 Alejandro Nanez
🙌 Stacie Taylor
🤓 Michael Sholty (me!)

🤩 Highlights!

Over the last eight weeks we collaborated together remotely to build an application, simulating a professional software company work environment setting. At the beginning of the week, these four would split off into two groups and pair program one of two features. At the end of the week, the pairs would present their features back to the rest of the team, talk about the ups-and-downs of the week, and plan out the following week's work.

It's always amazing to watch team chemistry unfold as the weeks go on, and this team was no different. Our participants worked together like they've known each other their whole lives, which is a testament to how they are all strong communicators. This is critical to succeeding in a remote environment, and they excelled way beyond expectations.

It was impressive how quickly our team members picked up the tech stack and ran with it. Some of the technologies were familiar to them, like JavaScript and React. However, they had to also learn new technologies like Firebase to be able to get the job done 👏 👏 👏

My favorite part about our this cohort was how proactive they were to owning this work. Personally I didn't have to do much to see this team succeed - they all knew how to default to action. All four team members communicated proactively early in the week to work around each other's availability, scheduled times to work and made it happen! When they ran into issues, they knew how to ask the right questions to get unblocked. These are all key qualities that I look for in teammates professionally.

🎬 Wrapping Up

It was really an honor to get to know these folx and bond during a tumultuous time in all of our lives with COVID running amok. Here at Collab Lab, we're incredibly proud of the work our team put in, and would recommend any of our four participants for tech/programming roles in a professional setting. I know they're already talking to potential companies, so if you're looking for early-career engineers you better act fast!

Using TypeScript to guard against specific React prop combinations

Michael Sholty — Fri, 10 Apr 2020 13:43:49 +0000

Preface: I know you may see the example code here and want to refactor it, but that would defeat the purpose of the exercise. Suspend disbelief!

Imagine you have a React component like so:

type Props = {
  name: string;
  isCircleBadge?: true;
  isSquareBadge?: false;
};

export function NameBadge(props: Props) {
  if (props.isCircleBadge && props.isSquareBadge) {
    console.warn('A NameBadge cannot both be circle and square. Please only pass in one of these props');
  }
  if (props.isCircleBadge) {
    return <circle>{props.name}</circle>;
  }

  return <div>{props.name}</circle>
}

In this example, we're writing JavaScript to warn a developer consuming this component to not misuse it. In regular JavaScript, this seems like a reasonable solution since we don't have the power of types static analysis. However, in TypeScript we can guard against this with our tooling so the developer gets immediate feedback in their editor when they misuse it, instead of hoping they see it in the console!

import React from 'react';

type Props = {
  name: string;
} & IndicatorStates;

type IndicatorStates =
  | {
      isCircleBadge?: true;
      isSquareBadge?: false;
    }
  | {
      isCircleBadge?: false;
      isSquareBadge?: true;
    }
  | {
      isCircleBadge?: false;
      isSquareBadge?: false;
  };

// The point here is that you should not pass in both isCircleBadge
// and isSquareBadge as true, since a name badge can only be one shape
export function NameBadge(props: Props) {
  if (props.isCircleBadge) {
    return <circle>{props.name}</circle>;
  }

  return <div>{props.name}</circle>
}

Here I am defining explicit states that are acceptable for isCircleBadge and isSquareBadge boolean props. Now when you try to misuse the component, you'll get a TypeScript error instead!

// @ts-expect-error NameBadge must have a shape defined
const test1 = <NameBadge name="Michael" />

// This is fine
const test2 = <NameBadge name="Michael" isCircleBadge={true} />

// So is this
const test3 = <NameBadge name="Michael" isSquareBadge={true} />

// This doesn't work because NameBadge cannot have both isSquareBadge and isCircleBadge true
const test4 = <NameBadge name="Michael" isSquareBadge={true} isCircleBadge={true} />

Here's the error you'd get:

If you want to play around with this example, please check out the example in the TypeScript playground

I kinda wish we could create our own TypeScript error messages for specific cases like this, but this will do for now. Hope you enjoyed my article!

Using TypeScript Function Overloads For Distinct Component Props

Michael Sholty — Wed, 26 Feb 2020 21:47:37 +0000

Have you ever written a component that has two distinct props interfaces that can be passed in?

type AspectRatioProps = {
  aspectRatio: string;
  width: number;
}

type WidthHeightProps = {
  width: number;
  height: number;
}

type Props = {
  width?: number;
  height?: number;
  aspectRatio?: string;
}

export function Image(props: Props) {
  // Imagine there is some logic to handle these props
  return <div>placeholder</div>
}

The idea here is that you want the consumer of this component to either pass in aspectRatio or width & height, but not both.

Using one Props interface, you can't communicate that you want one or the other. We know the two distinct interfaces are not a union, but you may think you can intersection the types together. I'm afraid it doesn't turn out so pretty:

export function Image(props: AspectRatioProps | WidthHeightProps) {
  // Imagine there is some logic to handle these props
  return <div>placeholder</div>
}

We want to be able to pass in an aspectRatio and width to this component, or width and height, but not both! TypeScript seems to be not cooperating.

I wouldn't be writing this article just to tell you it's not possible though!

We can accomplish our goal with TypeScript function overloads.

export function Image(props: AspectRatioProps): React.ReactElement;
export function Image(props: WidthHeightProps): React.ReactElement;
export function Image(props: AspectRatioProps | WidthHeightProps) {
  // Imagine there is some logic to handle these props
  return <div>placeholder</div>
}

Function overloads tell your code that there are different signatures for this function. In this case, the function always returns a React element but you could even make it return different types if you wanted!

Check out how TypeScript correctly validates the usage of the component in the sample code in a TypeScript Playground.

Cheers!