Usually, when working with FE frameworks, you use the CLI provided by the framework to generate the initial state of the app. There are some files, that we, in most cases ignore, until we need them.
One example of that is the Angular framework, which uses angular-cli for creating app.
My focus, for now, is the file tsconfig.json. TS stands for typescript.
For detailed explanations check ts website https://www.typescriptlang.org/tsconfig/.
In this file I only noted some of them, that I needed.
The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project.
The file specifies the root files and the compiler options required to compile the project.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": [
"es2018",
"dom"
],
"paths": {
"@models/*": ["src/app/_models/*"],
"@services/*": ["src/app/_services/*"],
"@core/*": ["src/app/core/*"],
"@environments/*": ["src/environments/*"],
"@shared/*": ["src/app/shared/*"],
"@state/*": ["src/app/_store/*"]
},
"noImplicitAny": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictTemplates": true,
}
}
Yes, in the Angular app there are several tsconfig.json files:
1. tsconfig.json - general file that contains general typescript configuration.
2. tsconfig.app.json - is a file that is related to the Angular App in particular (angular-cli also).
Notice, that this file usually includes tsconfig.json file in itself,
"extends": "./tsconfig.json",
but if some configuration is repeated in tsconfig.app.json, it will override the values from tsconfig.json!!!
Example of tsconfig.app.json:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
3. tsconfig.spec.json - this one is used for the purposes of tests in Angular apps. The tests have .spec extensions.
The purpose of paths property, is to avoid relative paths in imports. This way you could always use defined values from paths, instead of relative paths (which can be very long, for example multiple ../../../). Paths are relative to baseUrl property.
"paths": {
"@models/*": ["src/app/_models/*"],
"@services/*": ["src/app/_services/*"],
"@core/*": ["src/app/core/*"],
"@environments/*": ["src/environments/*"],
"@shared/*": ["src/app/shared/*"],
"@state/*": ["src/app/_store/*"]
}
Instead of this:
You would have this:
Note: Currently the Visual studio is always suggesting relative path, it seems like bug. But in Visual Studio Code it suggests paths.
Update: It is feasible in Visual studio as well. Tools -> Options -> Text editor -> Javascript/Typescript -> Formatting and then find Section, Module Specifier Preference, and choose the first option:
Code readability, less length in import lines, maintainability - if the structure of the app is changed, you don't have to modify moved files, everything stays the same (except maybe paths to be updated in tsconfig json if needed)
If you don't want always to provide the type of variables, parameters... and not get an error 'Parameter 'xx' implicitly has an 'any' type.', then mark this property as false, nesting it inside "compilerOptions":
"noImplicitAny": false
List of files to include in the program. They are used to specify separate files directly by their path.
"files": [
"src/main.ts",
"src/polyfills.ts"
],
An error occurs if any of the files can’t be found. For example, if we're missing medina.ts file we will get errors like:
This is useful when you only have a small number of files and when you don't need wildcards. Using wildcard inside files, will cause an error.
Specifies an array of filenames or patterns to include in the program.
include and exclude are used to target collections or groups of files or folders etc.
These filenames are resolved relative to the directory containing the tsconfig.json file.
{
"include": ["src/**/*", "tests/**/*"]
}
glob pattern - specify sets of filenames with wildcard characters.
include and exclude support wildcard characters to make glob patterns:
- * matches 0 or more characters
- ? matches any 1 character
- **/ matches any directory nested to any level
Specifies an array of filenames or patterns that should be skipped when resolving include.
"exclude": [
"node_modules",
"**/*.spec.ts"
]
Stuff in "files" will never be ruled out by "exclude" patterns, if you add any, whereas stuff from "include" will.
files is used to specify separate files directly by their path, while include and exclude is used to target collections or groups of files or folders etc. And also if some file from files is missing, we will get an error.