Frontend

TypeScript 4.8 is finally here – Frontend Weekly vol. 103

Every new TypeScript release used to be a small celebration for anyone interested in frontend development. This week we got TypeScript 4.8 – was it worth the wait?

Article cover

1. TypeScript 4.8

Back in the good old days, every new TypeScript release excited me. Optional Chaining, Template Literal Types, Type-Only Imports, Variadic Tuple Types – these were the features I read about with blazing eyes and couldn’t wait to get my hands on.

Recently, however, a lot has changed. TypeScript has become a mature language so exciting new features have become rare. The latest TypeScript 4.8 is no different, focusing on better support for several edge cases and minor performance improvements.

Out of journalistic duty, I will quote you here some of the most interesting changes in my opinion. However, if you have a little more time, I recommend,diving into the long and in-depth memo that Microsoft has prepared.

Let’s start with Intersection Reduction and Union Compatibility improvements. Under this complicated name are actually two simple changes. The first is to equate the unknown type with the union of the empty object, null and undefined.

function f(x: unknown, y: {} | null | undefined) {
    x = y; // always worked
    y = x; // used to error, now works
}

The second change is that from now on the common part between any object type and an empty object will be developed simply as that object. This change has redefined the NonNullable type. Combined with the change from the previous paragraph, this allows for some really neat improvements in the code.

type NonNullable<T> = T & {};

function throwIfNullable<T>(value: T): NonNullable<T> {
    if (value === undefined || value === null) {
        throw Error("Nullable value!");
    }

    // Used to fail because 'T' was not assignable to 'NonNullable<T>'.
    // Now narrows to 'T & {}' and succeeds because that's just 'NonNullable<T>'.
    return value;
}

Finally, I left myself with a novelty that at first made my brain start to evaporate. The infer keyword allows us to extract a piece of type so that we can use it later, for example in Conditional Type. From now on, it will also be usable in Template String Type. It sounds complicated and it looks that way too.

// SomeNum used to be 'number'; now it's '100'.
type SomeNum = "100" extends `${infer U extends number}` ? U : never;

// SomeBigInt used to be 'bigint'; now it's '100n'.
type SomeBigInt = "100" extends `${infer U extends bigint}` ? U : never;

// SomeBool used to be 'boolean'; now it's 'true'.
type SomeBool = "true" extends `${infer U extends boolean}` ? U : never;

In addition to the new features I’ve described, Microsoft has also prepared a number of buffs and performance improvements. As I mentioned, if you are interested in the details, you will do best if you immediately go to the note accompanying the release, which can be found in the sources.

Sources

https://devblogs.microsoft.com/typescript/announcing-typescript-4-8/

Discover more IT content selected for you
In Vived, you will find articles handpicked by devs. Download the app and read the good stuff!

phone newsletter image

2. Gatsby counterattacks

It’s amazing how in just a few years Gatsby has gone from being number one in the server-side React rendering category, to being one of many alternatives to Next.js. However, Gatsby isn’t laying down its arms, and following the release of Gatsby 4 last year, it is now unveiling a number of new features, among them a completely new rendering strategy. 

The new strategy is called Reactive Site Generation and it allows us to automatically reload selected pages every time we update our CMS. The whole thing is made possible by integration with GraphQL and, as the developers of this architecture put it, it’s a hot reload for production applications.

On its blog, the team behind Gatsby has prepared an extensive performance analysis. Several alternative architectures as well as the use of various commercially available tools were taken into account in the compilation. In this ranking, Reactive Site Generation looks really good. It’s just a shame that it requires vendor lock-in to a fairly niche cloud, and only a selection of CMS tools are supported.

Sources

https://www.gatsbyjs.com/blog/re-introducing-gatsby-a-reactive-site-generator/

3. Chrome plugins stolen data of 1.4M users

Has anyone told you yet that installing browser plug-ins is not the best idea when it comes to security? If not, that’s what I’m saying. While an incredible amount of attention is paid to blocking trackers like Google Analytics or Facebook Pixel, browser plug-ins tend to pass off all radars. I think this is the reason why to this day they are not vetted by anyone and have surprisingly high permissions.

Users of Netflix Party, Netflix Party 2, Screenshotting, FlipShope and AutoBuy found out best how dangerous browser plug-ins are. As McAfee reports, these plug-ins were downloaded nearly one and a half million times and tracked all the sites visited by their users. If there was an affiliate link for a particular site on the do server, it was sent back to the plugin.This one opened the relevant iframe or modified the cookies accordingly, so as to rake in a few pennies.

Personally, I doubt that the goal of the owners of the mentioned plugins is to track their user. However, we can’t be 100% sure of this, and a plugin wishing to undertake such activities should clearly inform users about them. This strongly reminds me of the controversy surrounding Brave, which for a while also added affiliate links on several sites. As you can see, the online community does not like it when someone tries to make money from it without its prior consent.

Now all the previously mentioned plug-ins have already disappeared from the chrome web store. Unfortunately, the whole process took several days, and moreover, if you have installed one of the rogue plugins, you still have to manually uninstall it. 

Let the fact that the rogue Screenshotting plugin in the chrome web store had the Featured badge be an indication of how bad the security of browser plugins is. To get it, a browser must be manually tested by a Google employee and must meet the highest standards when it comes to user experience. Clearly the human factor failed here, and to make matters worse, for days after the fraud was discovered, Google continued to recommend Screenshotting in its store.

Sources

https://www.bleepingcomputer.com/news/security/chrome-extensions-with-14-million-installs-steal-browsing-data/

Discover more IT content selected for you
In Vived, you will find articles handpicked by devs. Download the app and read the good stuff!

phone newsletter image

Bonus: WebKit migrates to GitHub

If, like me, you thought that all serious projects have been using git for a long time, you are about to have your bubble violently burst. WebKit, the browser engine from Apple used by one in five Internet users, was migrated from Subversion to GitHub this past week. 

Sources

https://webkit.org/blog/13140/webkit-on-github/