The project we created in the previous step contains two .js files. Maybe you like TypeScript? Let's switch this project to .ts.

First, of course, add the magical bag of mystery known as the tsconfig.json file. I hope this is right. I always just cut, paste, and pray.

{
	"compilerOptions": {
		"module": "ESNext",
		"target": "ESNext",
		"moduleResolution": "Node",
		"skipLibCheck": true
	},
	"exclude": ["node_modules", "_site"]
}

Next, let's install the tsx package which makes a nice wrapper around esbuild TypeScript, the real star of the show.

We'll also change our build and start scripts to use tsx as a node replacement:

{
	"name": "eleventy-tsx",
	"version": "1.0.0",
	"description": "Demo of Eleventy 3, ESM, and TS/TSX",
	"scripts": {
		"build": "tsx node_modules/@11ty/eleventy/cmd.cjs --config=eleventy.config.ts",
		"start": "tsx node_modules/@11ty/eleventy/cmd.cjs --config=eleventy.config.ts --serve --incremental"
	},
	"keywords": [],
	"author": "Paul Everitt <pauleveritt@me.com>",
	"license": "ISC",
	"type": "module",
	"dependencies": {
		"@11ty/eleventy": "^3.0.0-alpha.6"
	},
	"devDependencies": {
		"prettier": "^3.2.5",
		"tsx": "^4.7.0"
	}
}

Yes, your eyes didn't deceive you -- let's rename our config file to eleventy.config.ts and sprinkle in some TypeScript syntax. 4 characters of syntax (: any) to be precise.

export default function (eleventyConfig: any) {
	return {
		dir: {
			input: "site",
			output: "_site",
		},
	};
}

We must also rename our template to site/index.11ty.ts and a return type:

export function render(): string {
	return "<h1>Hello ESM</h1>";
}

We run our dev server and...wump wump, we have a problem. No files written:

[11ty] Wrote 0 files in 0.01 seconds (v3.0.0-alpha.4)

We need to return to eleventy.config.ts and teach it about .ts files. We'll go ahead and teach about .tsx as well.

export default function (eleventyConfig: any) {
	eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
		key: "11ty.js",
	});

	return {
		dir: {
			input: "site",
			output: "_site",
		},
	};
}

This time when we build -- success!

[11ty] Writing ./_site/index.html from ./site/index.11ty.ts
[11ty] Wrote 1 file in 0.02 seconds (v3.0.0-alpha.6)
[11ty] Watching…
[11ty] Server at http://localhost:8080/