DEV Community

Abhirup Datta
Abhirup Datta

Posted on

Typescript for JS people

The source code related to this blog can be found here:
https://github.com/abhidatta0/Typescript-for-JS-people

In order to setup Typescipt in your own local computer, install

  • nodejs
  • npm
  • VSCode(optional).

After that create a folder, (I have given mine as "typescript-for-js-people").
Now, go to Gitbash or any command line tool, and type
npm init -y.This will auto generate a package.json file and the folder root.
After that install typescript by typing
npm install typescript --save-dev in cmd.
This tells npm to install typescript as a dev dependency since we are going to need Typescript only in dev.It will also add a node_modules folder and package-lock.json file, but we dont need to bother about those.

If everything goes well, after this the package.json file will look like :
typescript-1

Folder Structure

First go to cmd and type npx tsc --init
This will create a tsconfig.json file at the project root folder.
Docs for tsconfig.json: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
If you look in the tsconfig.json file, there will be many commented line in a key-value pair (same as js object), we need to uncomment "rootDir" key and give value as "./src",
"outDir" key and give value as "./dist".
This basically means that we will write our typescript code in src folder(or subfolders) and javascript code will be outputed by typescript compiler(tsc) to dist folder.
Create a folder structure in src as src/Basic 1/_1.ts.
So, our project folder will look like this.
typescript2

Start writing code

Now inside the _1.ts write code

console.log("Abhirup");
Enter fullscreen mode Exit fullscreen mode

That's it! It is actually typescript(as well as javascript).

Compiling

Now type in terminal,
npx tsc . This will generate the js file inside a newly created dist folder(done by the tsc compiler).

Inside it, the js files are there with the same folder structure as src folder(but with .js extension).


Please do like and share this blog.

Discussion (0)