TypeScript namespace merging across files

Question

I'm having some issues with getting a namespace across files to resolve and compile properly. According to documentation and this SO answer, the following should produce no issue:

App.Core.ts

namespace App.Core {
    export function createElem(tagName: string): JQuery {
        return $(document.createElement(tagName));
    }
}

App.Core.SubModule.ts

/// <reference path="App.Core.ts" />
namespace App.Core.SubModule {
    export function Test(): JQuery {
        return App.Core.createElem("div");
}

However, Visual Studio is giving me an error on the function call in App.Core.SubModule.Test stating Property 'createElem' does not exist on type 'typeof Core' My understanding is that if a namespace is across multiple files TS compiler will automatically resolve those namespaces. It looks like the corresponding JavaScript is coming out correct however the lack of intellisense (and the red squiggle error line) is exceptionally frustrating and making me second guess what I'm writing.

Is this an issue with my file setup, with TS compiler, or with Visual Studio 2015's apparently broken TypeScript intellisense functionalities right now?

Answer 1

Visual Studio is giving me an error on the function call in App.Core.SubModule.Test stating Property 'createElem' does not exist on type 'typeof Core'

Suspect you have a root level import or export in either of the files. That makes the file a module and disconnects it from the global namespace.

Quick Fix

Remove that import / export but be warned that it can lead to more problems https://basarat.gitbooks.io/typescript/content/docs/tips/outFile.html

Proper Fix

Don't use namespace. Just use modules : https://basarat.gitbooks.io/typescript/content/docs/project/modules.html

Answer 2

File A

namespace A {
  export type User = {
    name: string,
    age: number
  }
}

File B

namespace A {
  export type Goods = {
    city: string,
    price: number
  }
}

File C - merge namespaces here

declare module 'Final' {
  import 'namespace-b';
  import 'namespace-a';
}

File index.ts

import './namespace-final;';

function multipleNamespaces() {
  let user: A.User | A.Goods | undefined;
  user = { name: '', age: 0 }; // valid
  user = {city: 'beijing', price: 100} // vlaid
  user = 'test' // invalid
}