Skip to content

Typescript cannot see prop types with tsconfig JSX setting as "react" #1256

@petemill

Description

@petemill

Describe the bug
Typescript is unable to see the Type for Props when tsconfig.json has compilerOptions.jsx set to "react". The use case is a single webpack bundle which has mixed react and svelte. It doesn't seem possible (at least conveniently so) to have two separate tsconfig.json projects, whilst also being able to import from one to another and resolve the issue both for IDE and the webpack build.

To Reproduce
Minimal reproduction repo at https://github.com/petemill/reproduce-svelte-types-react-jsx

<!-- src/App.svelte -->
<script lang="ts">
	export let name: string;
</script>

<main>
	<h1>Hello {name}!</h1>
</main>
// src/main.ts
import SvelteApp from './App.svelte'

const app = new SvelteApp({
	target: document.body,
	props: {
		name: 4
	}
})

tsconfig.json
note jsx property

{
		"compilerOptions": {
			"moduleResolution": "node",
			"target": "es2017",
			"importsNotUsedAsValues": "error",
			"isolatedModules": true,
			"sourceMap": true,
			"types": ["svelte"],
			"jsx": "react",
			"strict": false,
			"esModuleInterop": true,
			"skipLibCheck": true,
			"forceConsistentCasingInFileNames": true
		},	
	"include": ["src/**/*", "src/node_modules/**/*"],
	"exclude": ["node_modules/*", "__sapper__/*", "static/*"]
	}

For example a code snippet that is treated in a way you don't expect.

Expected behavior
Typescript should error with Type 'number' is not assignable to type 'string'. This is the case if compilerOptions.jsx is changed to "preserve".

image

System (please complete the following information):

  • OS: macOS
  • IDE: VSCode
  • Plugin/Package: "Svelte for VSCode"

Metadata

Metadata

Assignees

No one assigned

    Labels

    FixedFixed in master branch. Pending production release.bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions