Skip to main content

Init

Pure HTML + TypeScript​

Install TypeScript​

npm install typescript --save-dev

Initialize TypeScript configuration​

npx tsc --init

Create your HTML and TypeScript files​

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pure HTML + TypeScript</title>
  </head>
  <body>
    <script src="dist/main.js" defer></script>
  </body>
</html>

Create a src/index.ts file:

// src/index.ts
const greeting: string = "Hello, TypeScript with HTML!";
console.log(greeting);

Configure tsconfig.json​

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es6",
    "module": "es6",
    "strict": true
  },
  "include": ["src/**/*"]
}

Compile TypeScript​

npx tsc

React App with TypeScript​

npx create-react-app react-ts-app --template typescript

Vite + React + TypeScript​

npm create vite@latest vite-ts-react -- --template react-ts

Node.js with TypeScript​

npm install typescript @types/node --save-dev
npx tsc --init

Create a src/index.ts file

// src/index.ts
console.log("Hello, TypeScript with Node.js!");
npx tsc
node dist/index.js

Next.js with TypeScript​

npx create-next-app@latest next-ts-app
npm install --save-dev typescript @types/react @types/node