Search code examples
typescriptvisual-studio-codeenvironment

How to Learn Typescript with Visual Studio Code + Environment setup + for beginners?


Many beginners still facing the difficulties while doing Environment setup for Learn typescript. [before step-up to Angular]

Thanks.


Solution

  • So it's 8 simple steps to set an Environment to learn TypeScript with Visual Studio Code.

    1. Installing the TypeScript compiler by:

        npm install -g typescript
      
    2. Install Visual Studio Code
    3. Create new folder or open existing folder (empty Ex.LearnTSFolder) in - Visual Studio Code
    4. Create a file - tsconfig.json - inside your folder(ex. LearnTSFolder) and put this code inside - tsconfig.json - file

      {
          "compilerOptions": {
              "target": "es5",
              "module": "commonjs",
              "sourceMap": true
          }
      }
      
    5. Now Create a simple TS file HelloWorld.ts, and put this code inside this ts file:

      class Startup {
          public static main(): number {
              console.log('Hello World, Wazz Up');
              return 0;
          }
      }
      
      Startup.main();
      
    6. Now at Terminal run this command:

      tsc HelloWorld.ts 
      

      ............
      so by this you can see new transpiled file - HelloWorld.js generate inside the our folder

    7. Now Execute Run Build Task (Ctrl+Shift+B) from the global Terminal menu

    8. IT'S DONE NOW..: To execute code; just run below command at Terminal:

      node HelloWorld.js 
      

      this way we can see below message in Terminal:

      Hello World, Wazz Up