In the previous entry, we created our first TypeScript application. We simply created an empty folder and put our files inside.
But (we already mentioned it) the normal thing is to initialize the TypeScript project. To do this, we will use the tsc tool itself. We simply have to do:
tsc —init
When you run the tsc --init command in the terminal, in your project directory, the TypeScript compiler automatically generates a preconfigured configuration file called tsconfig.json.
And you might say: “but wait, does it really do many more things?”. No… it only creates that file. That’s what “initializing a project” in TypeScript consists of 😅.
Actually, it’s an important and quite long file. So, it’s not bad that it creates it for us.
The tsconfig.json File
The tsconfig.json file is the main configuration file of a TypeScript project. It’s a JSON file containing options and parameters that control TypeScript’s behavior in our project.
The look of the tsconfig.json file is, more or less, the following:
{ “compilerOptions”: { “target”: “es2016”, “module”: “commonjs”, “esModuleInterop”: true, “forceConsistentCasingInFileNames”: true, “strict”: true, “skipLibCheck”: true }, “include”: [ “src” ] }
This file tells the compiler how to handle TypeScript files. For example, which files to include, which to exclude, which ECMAScript version to compile to, among other important configurations.
Common tsconfig.json Parameters
Project Structure
A TypeScript project does not have a fixed structure. That is, we can be flexible and adopt the organization we want.
But, more or less, everyone follows similar conventions. You can make your own variations (depending on what your project needs). But here is an example of a typical TypeScript project structure:
📂 mi-proyecto/ ├── 📂 src/ # Contains all the project source code │ ├── 📂 services/ │ ├── … │ ├── 📂 utils/ │ ├── 📂 config/ │ └── 📄 app.ts ├── 📂 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 project documentation
The “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 our application’s logic.
The main file of our application is located in this folder. We generally 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 inside “src” to organize our code into modules or components. In this example, we have created folders called services, utils, config… etc.
The “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.
