Support TypeScript 4.7

[sosukesuzuki]

TypeScript 4.7 beta has been released 🎉

https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/

• typescript-eslint TypeScript 4.7 Support typescript-eslint/typescript-eslint#4800
• babel
  • [ts] Add support for instantiation expressions babel/babel#14457
  • [ts 4.7] Support optional variance annotations babel/babel#14359
  • [ts 4.7] Support extends constraints for infer babel/babel#14476

Instantiation Expressions

function foo<T>(value: T): T { return value };
const stringFoo = foo<string>;

extends Constraints on infer Type Variables

• Support TS 4.7 extends constraints for infer (tests) #12897

type FirstString<T> =
    T extends [infer S extends string, ...unknown[]]
        ? S
        : never;

Optional Variance Annotations for Type Parameters

type Getter<out T> = () => T;
type Setter<in T> = (value: T) => void;

[sosukesuzuki]

Anything else?

[Jack-Works]

both pr mentioned in this issue are merged 👀

[stepaniukm]

Is there still something left to be done?

[sosukesuzuki]

Implementation of TS 4.7 support is almost complete. We are currently preparing for the release of 2.7.

[0x009922]

@sosukesuzuki, I've tested this locally and found a critical bug.

My code:

It can be fixed by adding a semicolon:

But when Prettier formats my code, it removes the semicolon!

[sosukesuzuki]

@0x009922 Thank you! I'll investigate it.

[sosukesuzuki]

Maybe this is a bug of TypeScript Compiler so I've reported to TS repo microsoft/TypeScript#49348

[ookamiiixd]

I encountered an errors when trying to format files containing TS 4.7 feature: Instantiation Expressions.

Here's my code producing the errors:

import { Button } from '@mantine/core'
import { Link, useTransition } from '@remix-run/react'
import type {  ComponentPropsWithRef} from 'react'
import { forwardRef } from 'react'

type SubmitButtonProps = {
  /** Show a loading indicator */
  showLoader?: boolean
} & ComponentPropsWithRef<typeof Button<'button'>>

Logs:

["ERROR" - 7:21:29 PM] Error formatting document.
["ERROR" - 7:21:29 PM] Unexpected token, expected "," (9:39)

However when i formats any other files that doesn't contain such code, it works just fine. Could you please investigate it @sosukesuzuki .

Thank you.

[stepaniukm]

@ookamiiixd You have just a syntax error. What does Button<'button'> is supposed to mean?

[ookamiiixd]

@stepaniukm I just tried to pass a generic to my react component which accepts a generic. I believe it's not a syntax error since typechecking and the code is working just fine. I'm not good at explaining since i'm a beginner myself, could you please refer here?

[SimpleCreations]

@stepaniukm there are no syntax errors here. 'button' indicates a string literal type, i.e. the type of a string that exactly matches button, as in

declare const x: 'button';

[isc30]

Hey this still doesn't work properly on typeof cases like

function test<T>(i: T): T { return i }

type TestString = typeof test<string>

also, this comment isnt fixed yet
#12640 (comment)

[fisker]

Can you open a new issue if problem still exists?

[fisker]

Locked due to age.