TypeScript: Support for `strict` type checking

đź—Ł Feature Discussions
1

Description

I would be very happy about support for TypeScript’s strict mode, as it greatly helps me to get more value out of TypeScript :slight_smile:

Examples

Currently, when "strict": true is included in tsconfig.json, TypeScript complains that state.source.get has no call signatures in the following example:

import Router from "@frontity/router/types";
import Source from "@frontity/wp-source/types";
import {connect, useConnect} from "frontity";
import {MergePackages} from "frontity/types";
import * as React from "react";

type Packages = MergePackages<Source, Router>;

const Root: React.FC = connect(() => {
	const {state} = useConnect<Packages>();
	const data = state.source.get(state.router.link);
	return <div />;
});

Without strict mode, everything works as expected.

Functionalities

  • Enhance Frontity types to work with strict mode

Requirements, Dependencies, Possible solution

I haven’t worked long enough with Frontity to provide more details here, unfortunately. Also, this is the first issue I am facing with strict mode in Frontity. I can continue to use strict mode and add other related problems here, if you are interested :slight_smile:

2

Thanks for opening this discussion :slightly_smiling_face:

@dev-team I would love to know your opinion here. Is this something we have experienced in the past or is there any reason to not support it?

3

I have never tried enabling the strict mode in a Frontity project to be honest and I without investigating I’m not sure if there’s currently a technical reason why we would not support it.

Perhaps @luisherranz or @David might know more about this.

4

I vaguely remember that when we were working on the first beta of Frontity I took a look at the strict mode. I think my impression is that it wouldn’t work with Frontity because Frontity is very dynamic, but I am not 100% sure right now.

@bjoluc we don’t have experience with that mode. Could you please explain us:

  • The differences between strict, non-strict.
  • The benefits of using strict mode, specially in Frontity.

Include references that you think will be useful for us to understand the case :slightly_smiling_face:

5

Hello everyone and thanks for the replies!

I think this article about strict mode is great; it also provides nice examples.

What I like most about strict mode in Frontity/React:

  • TypeScript warns me if a provided property does not exist on a component (this has saved me hours in the past :smile:)
  • If some property of an Entity (say .content.rendered) may be undefined, TypeScript lets me know so I can handle the edge case, or, if I’m absolutely sure it will be defined, use an exclamation mark to state it.

@luisherranz IMHO, a project cannot be to “dynamic” for strict mode; it just makes sure I don’t forget to type anything and warns me if I overlook edge cases. Unless you mean dynamic in the any sense, but then again, strict mode does not forbid any, it just requires me to explicitly state it.

I do realize, however, that strict mode support in Frontity may be a lot of work and maybe not “worth it” right now. I can only talk about me here, but for the extra typing overhead that comes along with it, strict mode has given me much back in the past :slight_smile:

1 Like