Setting up a TypeScript project with IntelliJ IDEA
Tags: tutorial, beginners, typescript, node
Published: 2022-03-24 03:06:33

**[IntelliJ IDEA](https://www.jetbrains.com/idea/)** is a powerful _Integrated Development Environment_ **[IDE](https://en.wikipedia.org/wiki/Integrated_development_environment)** developed by [JetBrains](https://www.jetbrains.com) 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:

<small style="text-align:center !important; padding: 1rem;">**The first time you must follow steps one and two, also when you reinstall your IDE.**</small>

1. Ensure that you have the **JavaScript and TypeScript** plugin installed (Preferences | Plugins).
![IntelliJ IDEA | Preferences (window) | Plugins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j1bd1h04zmpgtiifkte.png)
2. 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. ![IntelliJ IDEA | Preferences (window) | Languages & Frameworks | TypeScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39i62l8dht9l1xeyrd3e.png)
<small style="text-align:center !important; padding: 1rem;">**The next steps are required to start a new TypeScript project.**</small>

3. You must create a new project with a Node.js setup.![IntelliJ IDEA | Files (menu) | New Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64rbbulj4jyhorygzepb.png)
4. Ensure that you are using the right Node Interpreter and Package Manager (npm, yarn, pnpm)![IntelliJ IDEA | New Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yj4w6f6bj2k4nh9dam3.png)
5. 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:
        <pre><code>tsc --init</code></pre>

6. 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
7. It's highly recommended that your **tsconfig.json** file includes almost these directives in **compiler Options**:
    * _target_: **es2017** <small>(Set the JavaScript language version for emitted JavaScript and include compatible library declarations.)</small>
    * _module_: **commonjs** <small>(Specify what module code is generated)</small>
    * _rootDir_: **./dev** <small>(or src, Specify the root folder within your source files)</small>
    * _moduleResolution_: **node** <small>(Specify how TypeScript looks up a file from a given module specifier)</small>
    * _sourceMap_: **true** <small>(Create source map files for emitted JavaScript files)</small>
    * _outDir_: **./dist** <small>(Specify an output folder for all emitted files)</small>
    * _esModuleInterop_:  **true** <small>(Emit additional JavaScript to ease support for importing CommonJS modules. This enables _'allowSyntheticDefaultImports'_ for type compatibility)</small>
    * _forceConsistenCasingInFileNames_:  **true** <small>(Ensure that casing is correct in imports)</small>
    * _strict_: **true** <small>(Enable all strict type-checking options)</small>
    * _skipLibCheck_:  **true** <small>(Skip type checking all .d.ts files)</small>
8. Your typescript project looks good, but is not working yet, in this step you must configure the eslint tool.
    <pre><code>eslint --init</code></pre>
    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:
    <pre><code>"rules": {
    "noConsole": false
}</code></pre>
9. 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:
    <pre><code>
"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)
}</code></pre>
    As a good practice, I encourage you to set or update your version, description, keywords, author, and license.
10. 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. ![IntelliJ IDEA | Run (menu)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxwk7dj9kd5px95cibda.png)
11. We add new configuration (use any of the arrows) ![IntelliJ IDEA | Run/Debug Configuration (window) | Init ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xycgyxw0xxzgb8r8ba5e.png)
12. And choose a Node.js configuration![IntelliJ IDEA | Run/Debug Configuration (window) | Add New Configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9ib3dgnr0katr2k77sc.png)
13. 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**. ![IntelliJ IDEA | Run/Debug Configuration (window) | Node.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzj67swzu4y3q5o075g0.png)
    And allocate your **tsconfig.json** file. ![IntelliJ IDEA | TypeScript Compile Settings (window)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkrws8mj41mryw48dxym.png)

Well, at this moment, our project looks something like this:
![IntelliJ IDEA | Project (tab)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilvq6fdpjtptixza53gn.png)

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

In your app.ts file we can write:
<pre><code>const a = "1";
console.log( `Say hello world!!! ${a}`);
console.error( 'HAS type error', a.foo() );
console.error( 'NOT type error', a );</code></pre>
And immediately the Lint in IntelliJ idea shows an error:![IntelliJ IDEA | Code (tab)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5utu7nic4xlg3qw5a6n.png)
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)
![IntelliJ IDEA | Code (tab)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm5pxczcaslp52qud10d.png)
 
Then the error is off of our test and can be run, as result in our **run console** we can see:
![IntelliJ IDEA | Run (tab)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4c2t4g3kjjfirlr12eb.png)

---
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](https://github.com/jam65st/LearningTypeScript)