Sometimes it’s necessary to set up a development environment for writing TypeScript code. This article will show how it’s done. I imagine that you already have Nodejs installed on your computer, if not, you need to visit the official site and download it. It would also be a good idea to install . Don’t forget that we’ll perform all important actions using the command line. GIT Firstly you need to create a new nodejs project. Let’s create a folder and call it ts-dev-env. After that, navigate to the folder and initialize a new project. $ mkdir ts-dev-env
$ cd ts-dev-env
$ npm init With this, we’ve just created a new JavaScript project. There are no files, and we need to create an ‘src‘ folder with the index.ts file in it. $ mkdir src
$ touch src/index.ts Actually, we have everything we need to start the installation of necessary packages but first, we need to add typescript language. Let’s use npm utility for it. $ npm install –save typescript Secondly, we need to create a file with compiler options. tsconfig.json $ touch tsconfig.json In this example, you can just create a file in the root of the project and copy the information to the file. tsconfig.json {
   "compilerOptions": {
     "module": "commonjs",
     "esModuleInterop": true,
     "target": "es6",
     "moduleResolution": "node",
     "sourceMap": true,
     "outDir": "dist"
   },
   "include": [
     "./src/**/*"
   ],
   "lib": ["es2015"]
} Now, we can start writing TypeScript code. Let’s open file. I would advise you to use VSCode as a text editor. index.ts One of the most popular tasks for coders is implementing a checker algorithm. I would suggest leaving the description of the implementation out of this article and just copying this class to the file. The program code should be easier, but I specifically shaped it as a class for compiling demonstrations. palindrome index.ts class Palindrome {
   private word = '';
   constructor(word: string) {
      this.word = word;
   }


   public check() {
       const arr = this.word.toLocaleLowerCase().split('').reverse();
       return (arr.join('') === this.word.toLocaleLowerCase());
   }


   public length() {
       return this.word.length;
   }
}

const palindrome = new Test("Anna");
const isPalindrome = palindrome.check();
console.log(isPalindrome);
const wordLength = palindrome.length();
console.log(wordLength); Now we have everything for compilation and can do it. For this purpose let’s add the “build” command to . This procedure removes the dist folder if it exists and runs the compilation process. package.json ...
"scripts": {
    ...
    "build": "rm -rf ./dist && npx tsc",
    ...
}
... Another important thing is the developing mode. Basically, it’s possible to compile and run code just after changing lines. For this purpose, you need to install a utility that watches on your “src” folder and if you change something, please recompile and rerun the code. ts-node-dev $ npm install –save-dev ts-node-dev After installation, you can add a dev command to the file with the text package.json ...
"scripts": {
    ...
    "build": "ts-node-dev --respawn -- src/index.ts",
    ...
}
... That’s it! Now you have a simple environment for writing and compiling TypeScript code. All source codes for this article can be found here. If this article was interesting and helpful to you, or if you saw any inaccuracies and would like to discuss them, please write your thoughts in the comments below. I’d be happy to chat with you.

This story contains new, firsthand information uncovered by the writer.

How to Get Started with TypeScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Things Every Beginner Should Know When Learning Javascript And React

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 Things Every Beginner Should Know When Learning Javascript And React

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps