Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// tsconfig.json path aliases
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@app/*":        ["src/app/*"],
      "@shared/*":     ["src/shared/*"],
      "@features/*":   ["src/features/*"],
      "@utils":        ["src/utils/index.ts"]
    }
  }
}

// src/shared/models/user.model.ts
export interface User { id: number; name: string; email: string }

// src/shared/models/post.model.ts
export interface Post { id: number; title: string; authorId: number }

// src/shared/models/index.ts — barrel file
export type { User }  from "./user.model";
export type { Post }  from "./post.model";

// src/shared/index.ts — top-level barrel
export * from "./models";
export * from "./utils";
export * from "./constants";

// Consuming code — clean imports
import type { User, Post } from "@shared";

// Without alias (messy):
// import type { User } from "../../../shared/models/user.model";

// With alias (clean):
// import type { User } from "@shared";

function getUserPost(user: User, post: Post): string {
    return `${user.name} wrote "${post.title}"`;
}

export { getUserPost };