How to Create a TypeScript Project

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

But (as we hinted) it’s normal to initialize the TypeScript project. For this, we will use the tsc tool itself. We just need to do:

tsc --init

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

And you might say: “but come on, are you sure it does a lot more things?”. No… it just creates that file. That’s what it means to “initialize a project” in TypeScript 😅.

The tsconfig.json file

The tsconfig.json file is the main configuration file of 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 informs the compiler how to handle TypeScript files. For example, which files to include, which to exclude, which 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 specific structure. That is, we can be flexible and adopt the organization we want.

However, 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 structure of a TypeScript project:

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

• /src: Contains all the source code of the project
• /dist: Output directory where compiled files are generated
• /tests: Contains testing files
• tsconfig.json: TypeScript compiler configuration file
• package.json: Node.js configuration file
• .gitignore: Git configuration file
• README.md: Basic documentation of the project

“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 of our application.

The main file of our application is located in this folder. We usually name 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 a folder called 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.