Typescript Installation Guide
1
Initialize the project
1Step 1
Run: npm init -y
2Step 2
npm install typescript --save-dev
3Step 3
npx tsc --init
2
Create index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6 <title>Typescript Page</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8 <style>
9 html, body {
10 margin: 0;
11 padding: 0;
12 height: 100vh;
13 width: 100vw;
14 overflow: hidden;
15 font-family: 'Inter', sans-serif;
16 }
17 .container {
18 flex: 1;
19 display: flex;
20 flex-direction: column;
21 height: 100%;
22 width: 100%;
23 }
24 .iframe {
25 width: 100%;
26 height: 100%;
27 border: none;
28 border-radius: 0.5rem;
29 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
30 }
31 </style>
32</head>
33<body>
34 <div class="container">
35 <iframe
36 src="http://staging.tetrons.com/editor/dist/editor-host.html"
37 width="100%" height="600"
38 style="border: none;"
39 allowfullscreen>
40 </iframe>
41 </div>
42 <script src="script.js"></script>
43</body>
44</html>3
Create script.ts file
1document.addEventListener(“DOMContentLoaded”, () => {
2 console.log(“Typescript loaded and compiled”);
3});4
Compile Typescript
1Step 1
Run: npx tsc
5
Open in browser
1Step 1
Open index.html using live server or directly from file explorer.
Output Preview
