DEV Community: Phil Smith

Conditional Properties for React TypeScript Functional Components

Phil Smith — Fri, 23 Apr 2021 16:00:00 +0000

Pattern Description

A property or properties should only be present when another property has a specific value.

Example Problem

For example: Say you want three possible actions on a component, download, preview, and print, and you want to have buttons who's click events execute those actions. The actions are grouped as follows, the component will either allow the user to preview and print a PDF OR to download a PDF.

You could make the methods optional and qualify for them at run time, but this defeats the purpose of TypeScript. Something like:

interface ActionComponent {
    className:string,
    ... // other properties go here
    purpose:"print" | "download",
    onDownload?:()=>void,
    onPreview?:()=>void,
    onPrint?:()=>void,
}

And then in your code you can wire up events to these with something like ...

 return (
     {props.purpose === "download" && ( 
         <button onClick={props.onDownload!}>
         </button>
     )}
     {props.purpose === "print" && (
         // render print buttons wired to with props.onPreview and props.Print 
     )})

Here, we're using ! to force TypeScript to compile with the optional props.onDownload method, we'll have to do the same for the print buttons, and we're assuming that the properties will be populated. In our parent component we can set the purpose property to "download" and not populate the onDownload property resulting in exactly the type of runtime error TypeScript is designed to avoid. There are other approaches that will also cause avoidable problems, such as using a ternary operator to qualify if props.onDownload is populated and handling its absence at runtime, again defeating the purpose of using TypeScript.

Solution

With TypeScript we can create conditional properties using custom types and discriminating unions. Create an interface with the common properties for the component

interface BaseProps {
    className:string,
    ... // other properties go here
}

And now create a type from a discriminating union, I'll explain how that works as we go along.

type PdfButtonProps = 
| {
    purpose: "download",
    onDownload:()=>void,
} | {
    purpose: "print",
    onPreview:()=>void,
    onPrint:()=>void,
}

The type of PdfButtonProps is determined by the discriminating union between the two types. The discrimination occurs on the shared property, which is purpose. You could think of it in terms of a ternary operator, and it equates to something like this:

const pdfButton = purpose === "download" ? new PdfDownloadButton() : new PdfPrintButtons();

When we declare our functional component we can create a new type as an intersection of our BaseProps interface and our PdfButtonProps type, and use that as our functional component props (change this to suit your preferred approach to declaring functional components).

type PdfComponentProps = BaseProps & PdfButtonProps;

const PdfComponent: React.FC<PdfComponentProps> = (props) => {
    ...
    return (
        ...// other possible components
        {props.purpose === "download" && (
            // render download button wired with props.onDownload
        )}
        {props.purpose === "print" && (
            // render print buttons wired with props methods
        )}
    )
}

In parent component's code:

<div>
    <PdfComponent 
        className="form-buttons-pdf"
        purpose="download"
        onDownload={onDownloadHandler} /> // Compiles!

    <PdfComponent
        className="form-buttons-pdf"
        purpose="download"
        onPreview={onPreviewHandler}
        onPrint={onPrintHandler} /> // Does not compile
</div>

The first instance compiles, but the reason the second instance of PdfComponent does not compile is because the type of PdfButtonProps with purpose === "download" does not have an onPreview or onPrint property, and because the code doesn't provide for the onDownload property. If the first instance's purpose was set to "print" it wouldn't compile as there is no onDownload property for that type, and the onPrint and onPreview properties have not been provided.

Life If Everything Was JavaScript

Phil Smith — Sat, 19 Dec 2020 11:22:29 +0000

Visual Studio 2019 - ASP.NET Core 3.1 React App with TypeScript

Phil Smith — Thu, 09 Jul 2020 12:56:19 +0000

After some wrestling with Visual Studio 2019 I'm now developing my React App with TypeScript.

For my project I'm using ASP.NET Core 3.1, the project structure seems to be the same for previous versions of .Net core and also the .Net framework. When you first create the project you get a basic structure for an MVC RESTful API and a basic React app created using create-react-app and JavaScript.

We use TypeScript, so here's the steps that I took to move my project to a TypeScript codebase. I've installed TypeScript into the package.json myself and as I've found that the NuGet TypeScript compiler is problematic. We also use npm instead of yarn or another package managers.

This post assumes the reader has a basic familiarity of JavaScript, TypeScript, React, and the tools used for developing with them.

Prerequisites

Node.js Version 12.18.2+
Npm Version 6.14+ (npm is installed with Node.js)

You can check to see if and what versions of node.js and npm you have installed by entering node -v and npm -v, respectively, in the terminal.
Visual Studio 2019

Steps for creating the project

Launch Visual Studio 2019
Select Create a new project
Select ASP.NET Core Web Application
Choose a project name and location and click on Create
Select React.js with the default options and click on Create

One the project has been created click on the run icon, this will build and run the project. You should eventually see the project home page in your browser.

Switch to TypeScript

Once you've built and run the project, you need to move it to TypeScript. To do that we have have to change some of the packages being used. My preference is to do this within Visual Studio but you could do it from a terminal running outside of Visual Studio or in another editor. To do it within Visual Studio select View > Terminal which open the a window at the bottom of the IDE, and then within that window select Developer Command Prompt.

In the terminal navigate to the ClientApp sub-folder of the project and then:

Upgrade the react scripts to the latest with npm upgrade react-scripts --latest
Remove all eslinting packages with npm remove eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react¹
Install or upgrade TypeScript

To install TypeScript use npm install typscript --latest --save-dev
or if you already have TypeScript installed you can upgrade with npm upgrade TypeScript --latest
Install the TypeScript definition files with npm install @types/node @types/react @types/react-dom @types/react-router

Once you have that complete, rename the App.js file to App.tsx. You'll find App.js under <project_root_folder>/ClientApp/Src/App.js. Once it's renamed run and build the project again, once you see it loaded in your browser you're good to go with TypeScript.

Troubleshooting

If TypeScript complains about allowSyntheticDefaultImports or esModuleImport compiler flags² not being set, you may be able to solve that by doing the following, which I found on Stackoverflow here.

In Visual Studio 2019 Solution Explorer right click on the project file and select 'Unload Project'
When it has unloaded right click on the project file again and select Edit <ProjectName>.csproj

In the text editor look for the lines the look something like this:

<ItemGroup>
    <None Remove="ClientApp\src\public\App.tsx" />
</ItemGroup>
<ItemGroup>
    <TypeScriptCompile Include="ClientApp\src\public\App.tsx" />
</ItemGroup>

Remove these ItemGroups (they may have more than one tsx file referenced in each, depending on how much development you've done)
Save the file, and then close it
In Solution Explorer right click on the file again and select 'Reload Project'
When the project is reloaded, save all files and restart Visual Studio
You should be good to go

References

Footnotes

¹ At the time of writing the article these linting packages were added to the package.json in the ClientApp folder by Visual Studio when the project was created. These may change with updates to either Visual Studio 2019 or the React App project template.

² This may include other TypeScript compiler flags, but these were the only ones I encountered.

Troublshooting npm proxy issues part 1

Phil Smith — Tue, 03 Sep 2019 12:21:36 +0000

The npm package manager is a must have for JavaScript devs but, sometimes, being on a corporate network means you have to navigate a proxy to access the packages. This is the first post dedicated to troubleshooting npm proxy issues.

If you run, for example, npm install --save-dev grunt on our home network grunt will be installed into your project as expected. If you are running on a network with a proxy server you may get an error like

npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/grunt failed ...

The error text will then go onto to suggest that if you are behind a proxy you must set the 'proxy' config. This means you have to tell npm the address of the proxy on your network.

There's actually two config settings you have to set: proxy and https-proxy, https-proxy being the address for TLS. Let's say that the proxy address is http://proxy.example.com:8080 then simply enter

npm config set proxy http://proxy.example.com:8080

and

npm config set https-proxy http://proxy.example.com:8080

At this point npm should start working, or it might give you a 403 error. Dealing with that 403 error will be the subject part 2.

Additional Stuff

Config settings can be displayed using the folllowing commands. To display a list of the user config settings use npm config ls, all config settings are displayed with npm config ls -l.

This second command will also show you the location of you .npmrc file, which is your userconfig file. You can type your config settings directly into that file and save it instead of using cli commands, if you want too, I prefer the cli. Here's more details on npm config.