Setting up a TypeScript project with IntelliJ IDEA

Jaime A. Mendez — Thu, 24 Mar 2022 03:06:33 +0000

IntelliJ IDEA is a powerful Integrated Development Environment IDE developed by JetBrains for the most rigorous development environments. You can trust this IDE. It includes almost all features desired by developers, a large community is in the background, and a great company is behind the lines.

By default doesn't exist a TypeScript project template in IntelliJ IDEA. But don't worry, setting up a TS project is really easy:

The first time you must follow steps one and two, also when you reinstall your IDE.

Ensure that you have the JavaScript and TypeScript plugin installed (Preferences | Plugins).
You must have installed TypeScript from your favorite package manager (npm, yarn, pnpm). Let's confirm on the application preferences the use of your TS version.
The next steps are required to start a new TypeScript project.
You must create a new project with a Node.js setup.
Ensure that you are using the right Node Interpreter and Package Manager (npm, yarn, pnpm)
At this moment, you have a new Node.js empty project. Before continuing with your setup, you must create the TypeScript project initialing it to make their tsconfig.json file:
```
tsc --init
```
Before contiuing, you need to have a clear basic structure for your project as:
- project
  - [ src | dev ] TS Source files
    - [ app | index | init | start | main ] initial TS file
  - [ prd | dist ]JS Compiled files
    - [ same name of TS file ] Initial JS file
  - ... others in the project
To end this step, you must create the directories and your initial TS file. In my case, I created:
- learning_typescript
  - dev
    - app.ts
  - dist
  - index.html
It's highly recommended that your tsconfig.json file includes almost these directives in compiler Options:
- target: es2017 (Set the JavaScript language version for emitted JavaScript and include compatible library declarations.)
- module: commonjs (Specify what module code is generated)
- rootDir: ./dev (or src, Specify the root folder within your source files)
- moduleResolution: node (Specify how TypeScript looks up a file from a given module specifier)
- sourceMap: true (Create source map files for emitted JavaScript files)
- outDir: ./dist (Specify an output folder for all emitted files)
- esModuleInterop: true (Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility)
- forceConsistenCasingInFileNames: true (Ensure that casing is correct in imports)
- strict: true (Enable all strict type-checking options)
- skipLibCheck: true (Skip type checking all .d.ts files)
Your typescript project looks good, but is not working yet, in this step you must configure the eslint tool.
```
eslint --init
```
And you must confirm any parameters such as (use your own choices):
Ok to proceed? (y) y

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JSON
Then the initializer will check any peer dependencies.
✔ Would you like to install them now with npm? · No / Yes
At this moment, your project has a new file: .eslintrc.json, but if you want to use the console, you need to allow it feature by modifying the rules adding a new:
```
"rules": {
"noConsole": false
}
```

Your file package.json was updated with the proper devDependencies. Let's go to update some features of our package.json file with your choices:


"main": "./dist/app.js",
"script": {
"start": "tsc && node dist/app.js",
...
},
"devDependencies": {
...
"eslint": "^8.11.0", //(Your current version and before of eslint elements)
"typescript": "^4.6.2" //(Your current version and before of eslint elements)
}

As a good practice, I encourage you to set or update your version, description, keywords, author, and license.

Great, but we need to perform a pair of duties more by setup TypeScript in our IntelliJ Idea, to do it, you got to Run/Edit Configurations menu.
We add new configuration (use any of the arrows)
And choose a Node.js configuration
Update your JavaScript file according to your basic structure, and your package.json file. Also, it is mandatory that you implement a new Before launch task, choose in the menu: Compile Typescript.
And allocate your tsconfig.json file.

Well, at this moment, our project looks something like this:

And it is great, but now we will test it.

In your app.ts file we can write:

const a = "1";
console.log( `Say hello world!!! ${a}`);
console.error( 'HAS type error', a.foo() );
console.error( 'NOT type error', a );

And immediately the Lint in IntelliJ idea shows an error:
It is because a constant doesn't have a foo function property, in fact, the DataType is a String. This error doesn't allow us to run our project.

But if we comment on the third line (were appears a.foo method)

Then the error is off of our test and can be run, as result in our run console we can see:

Thanks for reading, now you can work on your own project. Enjoy it.

If do you want copy or fork the project, this is available on GitHub

DEV Community: Jaime A. Mendez

Setting up a TypeScript project with IntelliJ IDEA