JSX .tsx support

[fregante]

// index.test-d.tsx
import {expectType} from 'tsd-check';
import React from 'dom-chef';

expectType<HTMLDivElement>(<div/>);

[SamVerschueren]

I'm really not familiar with .tsx. Is the only thing we should do is check if it's a index.test-d.tsx or a index.test-d.ts is present?

A failing test for this would be nice as would allow me to fix it more easily and make sure I don't misunderstand the problem :).

[sindresorhus]

Is the only thing we should do is check if it's a index.test-d.tsx or a index.test-d.ts is present?

Correct:

In order to use JSX you must do two things.

1. Name your files with a .tsx extension
2. Enable the jsx option

- https://www.typescriptlang.org/docs/handbook/jsx.html

[fregante]

Also, disregard my first example because dom-chef types aren't there yet.

This should be your test, I think:

// index.test-d.tsx
import {expectType} from 'tsd-check';
import React from 'react';

class Welcome extends React.Component() {
    constructor() {
        super();
        return <h1>Hello</h1>;
    }
}

expectType<Welcome>(<Welcome/>);

And this would be the JSX-less equivalent example, which I just tested and works:

// index.test-d.ts
import {expectType} from 'tsd-check';
import React from 'react';

class Welcome extends React.Component() {
    constructor() {
        super();
        return React.createElement("h1", null, "Hello");
    }
}
expectType<Welcome>(React.createElement(Welcome, null));

[sindresorhus]

It's really stupid that we're forced to use a .tsx extension, but that's how it is until microsoft/TypeScript#30503 is resolved.

[SamVerschueren]

Thanks @bfred-it for the test case! I'll see what I can do.

[SamVerschueren]

I tried looking into this, but not sure if I understand the problem correctly.

The thing is that the expectType in your example will never throw.

class Welcome extends React.Component() {
	constructor() {
		super();
		return <h1>Hello</h1>;
	}
}

class Unicorn extends React.Component() {
	constructor() {
		super();
		return <h2>Unicorn</h2>;
	}
}

expectType<Welcome>(<Unicorn/>);

The reason is that <Unicorn /> is of type any in TypeScript.

So my question actually is, why do we need tsd to pick up test-d.tsx files? For example, if I look at the typings of dom-chef, I don't see a reason why the test for that type definition should have a tsx file extension? What kind of tsd test could be written that it has to be .tsx?

I'm just wondering and clarifying so that we are all on the same page :). I could totally add it for convenience, but I want to know the 'why'.

[fregante]

If you enable JSX in TypeScript the type should be JSX.Element

[SamVerschueren]

This is what I get

Even a simple <div /> element doesn't work...

I must be missing something I guess :thinking_face:

[SamVerschueren]

On a sidenote, I installed @types/react. Is that necessary?

[fregante]

Yeah, JSX types are awful, The type 'Element' it's referring to is not the browser's Element but JSX.Element specifically. So that should probably be:

expectType<JSX.Element>(<div/>);

I made a mistake in my OP

[fregante]

Even in that case I'm not entirely sure that <div/> will work. In Refined GitHub we also have this:

https://github.com/sindresorhus/refined-github/blob/6631e5f351781e714e6eb3c6af24d76a6af301e7/source/globals.d.ts#L40-L52

As for the Unicorn type... no idea honestly 😬

[SamVerschueren]

But what to do in case of Unicorn? We can't really type check that, right?

class Unicorn extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return <h1>Unicorn</h1>;
	}
}

expectType<Unicorn>(<Unicorn />);

Or would it be enough that tsd just picks up tsx files? If that's the case, I think it works right now (on my machine :p).

Checking it against JSX.Element works, but that's not really useful, or is it?

expectType<JSX.Element>(<Unicorn />);

[fregante]

I think technically <Unicorn /> isn't of type Unicorn but what React.createElement(Unicorn) maps to:

React.createElement(Unicorn);
// appears to be of type
React.ComponentElement<{}, Unicorn>

Also:

React.createElement('div');
// appears to be of type
React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>`

[SamVerschueren]

For some reason, this doesn't fail.

expectType<React.ComponentElement<{}, Welcome>>(<Unicorn />);
expectType<React.ComponentElement<{}, Welcome>>(React.createElement(Unicorn));

Let's just enable this feature and see how it goes. tsd can't help it if the JSX or React type definitions are bad. As long as it picks up the tsx/jsx files, we're good to go. It's really a small change in the codebase.