An overview of the

Writing front-end projects in TypeScript has become a trend, so get a Demo running in Chrome to practice with TypeScript syntax. Examples you refer to online may be outdated or not work because the technology is updated too quickly. My suggestion is to go directly to the official documents, try to write the demo, really can not figure out, then go to Google to find relevant articles.

Build environment

  • Vscode: 1.53.2
  • Chrome: 87.0.42.80.141
  • Node. Js: 12.8.3
  • win10

Specific steps

  • Step 1: Create the project 
    Mkdir typescript_chrom_demo install the typescript compilation environment (recommended: PNPM install -g typescript // The tsconfig.json configuration file TSC --init is generated when the project is initializedCopy the code
  • Step 2: Create a directory and related files
    • Directory structure effect

    • The content is as follows: helloworld.html

      <! DOCTYPE html> <html> <head> <title>This is a use TypeScript HTML demo</title> </head> <body> </body> <script src=".. /out/helloworld.js"></script> </html>Copy the code

      helloworld.ts

      let message: string = 'Hello Web, I am is TypeSciprt';
console.log(message);
document.body.textContent = message;
Copy the code

      tsconfig.json

      {
  "compilerOptions": {
    "target": "es5",                           
    "module": "amd",                          
    "outFile": "./out/helloworld.js",         
    "strict": true,                           
    "esModuleInterop": true,                   
    "skipLibCheck": true,                     
    "forceConsistentCasingInFileNames": true  
  }
}
Copy the code
  • Step 3: Create run and debug launch.json

The following:

{// Use IntelliSense to learn about related attributes. // Hover to view descriptions of existing properties. / / for more information, please visit: https://go.microsoft.com/fwlink/?linkid=830387 "version" : "0.2.0," "configurations: [{" type" : "pwa-chrome", "request": "launch", "name": "Open helloworld.html", "file": "d:\\Work\\h5_workspace\\typescript_chrome_demo\\src\\helloworld.html" } ] }Copy the code

  • Step 4: Open the terminal and enable automatic typescript compilation

    tsc -w
Copy the code

    Results the following

  • Finally: F5 is up and running

    Results the following

reference

  • TypeScript tutorial in Visual Studio Code
  • VSCode Debugging
  • TypeScript Compile on Save in Visual Studio Code