TS in Angular

• We will use TypeScript (TS) as programming language to create/write Angular applications
• TS is already configured for us when a new Angular project is created

Configuration files

• There are three TS config files in an Angular application:
  • tsconfig.json = general configuration
  • tsconfig.app.json = application specific configuration
  • tsconfig.spec.json = testing specific configuration
• Check out the Typescript configuration from the official Angular website for more information

tsconfig.json

• Look for the tsconfig.json file in the root of project
• This file contains all the configuration for the TS compiler

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "ES2022",
    "module": "preserve"
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "typeCheckHostBindings": true,
    "strictTemplates": true
  },
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

tsconfig.app.json

• Extends from the tsconfig.json file, so all base settings are adopted
• Some application specific settings are added

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": ["src/**/*.ts"],
  "exclude": ["src/**/*.spec.ts"]
}

tsconfig.spec.json

• Extends from the tsconfig.json file, so all base settings are adopted
• Some testing specific settings are added

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jasmine"]
  },
  "include": ["src/**/*.ts"]
}

Serving the Angular application

• Executing the ng serve or npm start command eventually launches the application
• Before the launch, all TS files are compiled to JS based on the TS settings from the configuration files
• After the compilation everything is bundled into one JS file and one CSS file
• Output:

> my-news@0.0.0 start
> ng serve -o --port 5878

Initial chunk files | Names         | Raw size
main.js             | main          | 48.40 kB |
styles.css          | styles        | 95 bytes |

                    | Initial total | 48.50 kB

Application bundle generation complete. [1.894 seconds] - 2025-09-23T09:21:13.893Z

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:5878/
  ➜  press h + enter to show help