VScode

<< Click to Display Table of Contents >>

Navigation:  Languages > TypeScript >

VScode

Before launching the projects, it’s important to understand why TypeScript is used instead of plain JavaScript.

 

TypeScript is a typed superset of JavaScript. This means it adds optional static typing and other helpful features to JavaScript — without removing anything from the original language.

 

Thanks to its type system, TypeScript helps you catch errors early, document your code more clearly, and write more predictable applications. Everything is more structured and organized “on the shelves” — especially helpful as your project grows.

 

If you’re already familiar with JavaScript, you shouldn’t be afraid of TypeScript — most of your JS knowledge applies directly. You can start using it gradually and benefit from autocomplete, better code navigation, and error checking right in your editor.

 

Launching TypeScript Projects in VS Code

 

To start working with IntraWeb 17 TypeScript projects, follow these steps:

 

1.Install Visual Studio Code

 

If you haven’t yet installed VS Code, download it from the official website.

 

2.Start the Apache Server

 

Before running the projects, make sure the Apache Server is running. If it hasn’t been installed or configured yet, refer to the earlier setup section.

 

To launch the server:

 

Open the folder C:\Apache24\bin

Run the file httpd.exe

 

This will start the local Apache HTTP server, which is needed to serve your application files.

 

clip0128

 

3.Open the Project in VS Code

 

Launch Visual Studio Code.

 

Then in the top menu, go to File - Open Folder... (or press Ctrl + O)

 

AD_4nXcnxvAToSR-_6j-gJ1lnXIdI6X31S9Hj-LXyJw-j7ZK7X2Cn9Oy0HVZ7qrjxyMWEdsXnK5Htkghgxcd8kgMHF1U5BWHOgNXDM-o63ufhy5ZU3m_cRKdc1UG20QENLotMGrqjWx36w

 

In the folder selection dialog, navigate to C:\src\IW17\source\TypeScript. Select this folder and click Open.

 

This will load the IntraWeb 17 TypeScript projects into VS Code.

 

4.Open launch.json

 

Inside the .vscode directory, you’ll find a file called launch.json.

 

This file contains launch configurations — instructions for how VS Code should run and debug the different TypeScript projects.

 

To access it:

 

Use the left sidebar in VS Code

Click the Run and Debug panel (or press Ctrl + Shift + D)

 

AD_4nXdh0p7NiKl6-Rt6iWsyweL-YltxeZ7MfA9BYCH4r0kH-m8kab6uyskJXQ6SoTe1NqkYqtb_A-9Jflq5KaW6u2ZqTcmPiK644rbybrPU0vIUzTUOIDLaho5An9bo1-Lc7yU7xE9BbA

 

 

5.Launch the Guess Project

 

From the dropdown menu, choose Guess (Chrome).

 

clip0129

 

Then click the green Run button or press F5.

 

clip0130

 

If everything is configured properly, a browser window will automatically open with the Guess application running.

 

AD_4nXdYa8_9HWmfnz6Jw8EYxmHB4WHtniKJIgnGjvdGt72A52VwTVkqb5jcu1e5XlL-SfnEHdgrrbtvHfl-nSVrtL5h_fv_IS5Ycdqf5ArvqD03KFKt0CJ4rjKcIK4CUAPRx7ZAsdzvTQ

 

Possible Issue: Missing Browser

 

If you see an error like:

 

AD_4nXfsFQ6YfD0_vmPRiYF8m8C_vXEaTlNRE-lsccteYW7ayS1siFUZJ3k1TfOZH2IPfzYDeyqGkDU2KaadEHlOVudw3govYWDizAT4dJX9KSMouqYmg3TRfg_mJ_s4a-wI8jQFX43lbg

 

That means Google Chrome is not found on your system.

 

To fix this:

Download and install Google Chrome.

 

Once installed, the launch should work normally.

 

6.Launching a Different Project

 

Let’s try launching another example: Work (Chrome).

 

This time, we’ll manually adjust the URL of the project:

 

In the launch menu, click the gear icon next to the dropdown.

 

 AD_4nXdrWk4e9Aa-V8zfUIMfs_LXeMFzc95pdsDQ2vUynhRn7HVEDyeizaa4tD2Okf48Bnw4D8rHPWf5P4FRbzm7nS8IX7YzfbaupixqCQR_SY3HzS-Qu9kqeck7svwrc2C8b9QJ7I11

 

This will reopen the launch.json file.

 

Find the section where the current URL is specified.

 

Comment it out by selecting the line and pressing Ctrl + /, or by manually adding // at the start.

 

 AD_4nXfsaaO9s8FeqWfAK0EFnpoK1DgYEIebY9E6P2wTZK5Ju4fVWG7_LPDut7O43OFpMf99wVWxt3gloGSW8GQFB5DBIIKKIWH9W2LpC8pSdBpN0vxg9Rh-sCM2-nh3wdcdifjSqVspjw

 

Scroll down to the section titled Loadable - CHJS.

 

Uncomment the desired URL by removing // or using Ctrl + /.

 

 AD_4nXfwCSFLBCQd_8MhbDf12TAUm6zRk7fQHE9UISAtHlJLcHJpY8Alg8L-kJ2r9QCG-q9Aq_cbd29q1QqNsmI1G2YmVNtAqPXCo8PTTHc4uR9Y7KfBch4agqoxCinqhwapIu7ekvJ4PQ

 

After making the changes, run the project again.

 

This will launch a different example — a ChartJS integration inside an IW17 application.

 

AD_4nXfL_sCRTkb1CC2oViDHGCSnFiIqvIMX5SNg0AgOKJp5RjLja3xT88Ytv7Rygtmii9KyteGGRxtOqp8Wv4BMA2OMir_vMCWlufQKxDvPrOaq-WZfhdb5fP6yokEOXjeJpch0iAY8hg