ember-cli-typescript provides comprehensive blueprints for automatically setting up TypeScript in Ember projects, including configuration files, type definitions, and dependency installation.
The ember-cli-typescript blueprint handles complete TypeScript setup for both applications and addons.
interface Blueprint {
/** Blueprint description */
description: "Initialize files needed for typescript compilation";
/** Installation hook for pre-setup logic */
install(options: { project: Project; dummy?: boolean }): Promise<void>;
/** Template variables for file generation */
locals(): BlueprintLocals;
/** Custom file path tokens */
fileMapTokens(): Record<string, (options: any) => string>;
/** Pre-installation package setup */
beforeInstall(): Promise<void>;
/** Path to blueprint template files */
filesPath(): string;
/** List of files to generate */
files(): string[];
}The blueprint generates dynamic configuration based on project type and structure.
interface BlueprintLocals {
/** JSON string of directories to include in TypeScript compilation */
includes: string;
/** Function to generate tsconfig path mappings for a project */
pathsFor: (dasherizedName: string) => string;
/** Function to generate app-specific type declarations */
indexDeclarations: (dasherizedName: string) => string;
/** Function to generate global template type declarations */
globalDeclarations: (dasherizedName: string) => string;
}Usage in Templates:
Blueprint templates use these variables to generate customized configuration:
// tsconfig.json template
{
"compilerOptions": {
"paths": {{{pathsFor dasherizedModuleName}}}
},
"include": {{{includes}}}
}The blueprint analyzes project structure to determine appropriate configuration.
/**
* Determines TypeScript include paths based on project type
* @returns Array of glob patterns for directories to include
*/
function determineIncludes(): string[];
/**
* Generates TypeScript path mappings for module resolution
* @param dasherizedName - Project name in dasherized format
* @returns JSON string of path mappings for tsconfig.json
*/
function generatePathMappings(dasherizedName: string): string;Include Path Logic:
["app/**/*", "tests/**/*", "types/**/*"]["app/**/*", "addon/**/*", "tests/**/*", "test-support/**/*", "addon-test-support/**/*", "types/**/*"]Path Mapping Logic:
app/*, tests to tests/*addon/*, dummy app to tests/dummy/app/*types/*The blueprint generates TypeScript declaration files for Ember-specific types.
// Standard app-level declarations
const APP_DECLARATIONS: string;
/**
* Generates template type declarations based on project layout
* @param projectName - Name of the project
* @param layout - Project layout type ('classic' or 'pods')
* @returns TypeScript declaration string for templates
*/
function buildTemplateDeclarations(projectName: string, layout: 'classic' | 'pods'): string;App Declarations:
// Generated app.d.ts content
import Ember from 'ember';
declare global {
interface Array<T> extends Ember.ArrayPrototypeExtensions<T> {}
}Template Declarations:
declare module 'app-name/templates/*'declare module 'app-name/*/template'The blueprint automatically installs required TypeScript packages.
/**
* Core TypeScript packages installed for all projects
*/
const CORE_PACKAGES: string[];
/**
* Conditional packages based on project dependencies
*/
interface ConditionalPackages {
emberData: string[];
testing: string[];
jquery: string[];
}Package Installation:
typescript, @tsconfig/ember, @types/ember, etc.@types/ember-data (if Ember Data present)@types/ember-qunit or @types/ember-mocha@types/jquery (if jQuery addon present)Custom tokens for generating files in correct locations.
interface FileMapTokens {
/** Application name token - 'dummy' for addons, project name for apps */
__app_name__(options: { inAddon: boolean; dasherizedModuleName: string }): string;
/** Configuration root path - 'tests/dummy/app' for addons, 'app' for apps */
__config_root__(options: { inAddon: boolean }): string;
}For addon projects, the blueprint performs additional configuration.
/**
* Transforms addon package.json for TypeScript publishing
* - Adds prepack/postpack scripts for declaration generation
* - Moves ember-cli-typescript from devDependencies to dependencies
*/
function transformAddonPackage(): void;
/**
* Adds or validates npm scripts in package.json
* @param scripts - Existing scripts object
* @param type - Script type ('prepack' or 'postpack')
* @param script - Script command to add
*/
function addScript(scripts: Record<string, string>, type: string, script: string): void;Addon Publishing Scripts:
{
"scripts": {
"prepack": "ember ts:precompile",
"postpack": "ember ts:clean"
}
}Utility for updating TypeScript path mappings when in-repo addons are present.
/**
* Updates tsconfig path mappings to include in-repo addon modules
* @param paths - Existing path mappings object
* @param addonName - Name of the in-repo addon
* @param appName - Name of the host application
*/
function updatePathsForAddon(
paths: Record<string, string[]>,
addonName: string,
appName: string
): void;The blueprint generates several TypeScript configuration and declaration files:
tsconfig.json - TypeScript compiler configurationtypes/global.d.ts - Global type declarationstypes/ember-data/types/registries/model.d.ts - Ember Data model registry (if present)app.d.ts - App-specific type declarations{{dasherizedModuleName}} - Project name{{includes}} - Directories to include{{{pathsFor dasherizedModuleName}}} - Path mappings{{{indexDeclarations dasherizedModuleName}}} - App declarations{{{globalDeclarations dasherizedModuleName}}} - Template declarations// Standard app-level TypeScript declarations
const APP_DECLARATIONS: string;
// Blueprint name reference
const ADDON_NAME: "ember-cli-typescript";The blueprint system ensures that TypeScript is properly configured for any Ember project type, with appropriate type definitions, compiler settings, and build integration.