TypeScript Configuration

Reference for TypeScript compiler options and path aliases.

Configuration Files

Compiler Options

Base Configuration

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": ".",
    "outDir": "dist",
    "jsx": "preserve",
    "jsxImportSource": "vue",
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true
  }
}

Key Options

Option Value Purpose
jsx preserve Keep JSX for Vite
jsxImportSource vue Use Vue for JSX
module esnext Modern ES modules
moduleResolution bundler Bundler resolution

Path Aliases

Configured in tsconfig.app.json:

"paths": {
  "#shared/*": ["shared/*"],
  "#types/*": ["types/*"],
  "theme/scss": ["../../theme/core/scss"],
  "theme/scss/*": ["../../theme/core/scss/*"],
  "#theme/scss": ["../../theme/core/scss"],
  "#theme/scss/*": ["../../theme/core/scss/*"],
  "@tgmc/theme": ["../../theme/core/dist/index.d.ts"],
  "@tgmc/theme/tokens": ["../../theme/core/dist/tokens-public.d.ts"],
  "@tgmc/theme/primevue": ["../../theme/core/dist/primevue.d.ts"]
}

Alias Reference

Alias Resolves To Purpose
#shared/* ./shared/* Shared utilities
#types/* ./types/* Type definitions
theme/scss ../../theme/core/scss Theme SCSS
#theme/scss ../../theme/core/scss Alt theme SCSS
@tgmc/theme Theme dist Theme package
@tgmc/theme/tokens Tokens dist Theme tokens
@tgmc/theme/primevue PrimeVue dist PrimeVue theme

Type Inclusion

Files automatically included:

"include": [
  ".nuxt/nuxt.d.ts",
  ".nuxt/content/types.d.ts",
  "app/**/*",
  "app/**/*.json",
  "config-properties/**/*",
  "shared/**/*",
  "types/**/*",
  "types/**/*.d.ts",
  "server/**/*",
  "services/**/*",
  "config"
]

Usage Examples

Importing Utilities

import { useCdn } from '#shared/utils/cdn';
import type { ThemeTokensApi } from '#shared/theme/theme-tokens-api';

Importing Theme

import tokens from '@tgmc/theme/tokens';
import primevueTheme from '@tgmc/theme/primevue';

Importing SCSS

@import 'theme/scss/variables';
@import '#theme/scss/mixins';

Importing Types

// Optional - types are globally available via module augmentations
import type { CdnConfig } from '#types/nuxt/cdn';

Adding New Path Alias

  1. Edit tsconfig.app.json
  2. Add entry in compilerOptions.paths:
"#myalias/*": ["my-directory/*"]
  1. Also add in nuxt.config.ts for runtime resolution:
alias: {
  '#myalias': resolvePath('./my-directory'),
}

Verify Configuration

Check TypeScript compilation:

npx tsc --noEmit --skipLibCheck

See Also