How to Create a TypeScript Project

In the previous entry we created our first TypeScript application. We simply created an empty folder and put our files inside.

But (as we mentioned) the normal thing is to initialize the TypeScript project. For this, we will use the tsc tool itself. We just have to do:

tsc --init

When we run the tsc --init command in the terminal, in your project’s directory, the TypeScript compiler automatically generates a preconfigured configuration file called tsconfig.json.

And you might say: “but come on, doesn’t it do a lot more things?”. No… it just creates that file. That’s what “initializing a project” in TypeScript consists of 😅.

The tsconfig.json file

The tsconfig.json file is the main configuration file for a TypeScript project. It is a JSON file that contains options and parameters that control the behavior of TypeScript in our project.

The appearance of the tsconfig.json file is, more or less, as follows:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,                               
    "forceConsistentCasingInFileNames": true,          
    "strict": true,                                        
    "skipLibCheck": true     
  },
  "include": [
    "src"
  ]
}

This file indicates to the compiler how it should handle TypeScript files. For example, which files to include, which to exclude, what version of ECMAScript to compile to, among other important configurations.

Common tsconfig.json Parameters

General Configuration

Output Options

Module Resolution

Types and Checks

Advanced Features

Project Structure

A TypeScript project does not have a fixed structure. That is, we can be flexible and adopt the organization that we want.

But, more or less, we all follow similar conventions. You can make your own variations (according to what your project needs). But here is an example of a typical TypeScript project structure:

/my-project
│
├── /src
│   ├── /services
│   ├── ...
│   ├── /utils
│   ├── /config
│   └── app.ts
│
├── /dist
│
├── /tests
│
├── tsconfig.json
├── package.json
├── .gitignore
└── README.md

“src” Folder

The src folder is where we store all our TypeScript source files. This is where we will write our TypeScript code and create the logic for our application.

The main file of our application is located in this folder. We usually call the main file index.ts or app.ts or main.ts. But we can name it whatever we want.

In addition to the main file, we can also have additional folders within “src” to organize our code into modules or components. In this example, we have created folders named services, utils, config, etc.

“dist” Folder

The “dist” folder is where the generated files are stored after compiling our TypeScript code. After running the TypeScript compiler, the resulting JavaScript files will be placed in this folder.

These JavaScript files are the ones that run in the browser or in the Node.js environment.