Как правильно импортировать пространство имен в проекте TypScript?

Question

Я смотрю видео-учебник, и я создал новый проект машинописного текста. Сначала я создал в корневом каталоге следующие пространства имен (utilityFunctions.ts):

namespace Utility { 

    export namespace Fees { 
     export function CalculateLateFee(daysLate: number): number { 
      return daysLate * .25; 
     } 
    } 

    export function MaxBooksAllowed(age: number): number { 
     if (age < 12){ 
      return 3; 
     } 
     else { 
      return 10; 
     } 
    } 

    //function that is not exported 
    //use it only inside the namespace 
    function privateFunc(): void { 
     console.log('This is private...'); 
    } 

} 

Затем я создал еще один файл с записью (app.ts), чтобы использовать код выше имен:

/// <reference path="utilityFunctions.ts" /> 


let fee: number = Utility.Fees.CalculateLateFee(10); 
console.log(`Fee: ${fee}`); 

Когда Я бегу app.js файл (используя WebStorm последнюю версию) я получаю следующее сообщение об ошибке:

/Users/Administrator/.nvm/versions/node/v6.5.0/bin/node /Users/Administrator/WebstormProjects/NamespaceDemo/app.js 
/Users/Administrator/WebstormProjects/NamespaceDemo/app.js:5 
var fee = Utility.Fees.CalculateLateFee(10); 
        ^

ReferenceError: Utility is not defined 
    at Object.<anonymous> (/Users/Administrator/WebstormProjects/NamespaceDemo/app.js:5:24) 
    at Module._compile (module.js:556:32) 
    at Object.Module._extensions..js (module.js:565:10) 
    at Module.load (module.js:473:32) 
    at tryModuleLoad (module.js:432:12) 
    at Function.Module._load (module.js:424:3) 
    at Module.runMain (module.js:590:10) 
    at run (bootstrap_node.js:394:7) 
    at startup (bootstrap_node.js:149:9) 
    at bootstrap_node.js:509:3 

Process finished with exit code 1 

Мой файл tsconfig.json является следующее:

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "target": "es5", 
     "noImplicitAny": false, 
     "sourceMap": true 
    }, 
    "exclude": [ 
     "node_modules" 
    ] 
} 

И мой файл tslint.json следующий (хотя я не думаю, что ЛИНТЕР не имеет ничего общего с ошибками компиляции):

{ 
    "extends": "tslint:recommended", 

    "rules": { 
     "comment-format": [false, "check-space"], 
     "eofline": false, 
     "triple-equals": [false, "allow-null-check"], 
     "no-trailing-whitespace": false, 
     "one-line": false, 
     "no-empty": false, 
     "typedef-whitespace": false, 
     "whitespace": false, 
     "radix": false, 
     "no-consecutive-blank-lines": false, 
     "no-console": false, 
     "typedef": [true, 
      "variable-declaration", 
      "call-signature", 
      "parameter", 
      "property-declaration", 
      "member-variable-declaration" 
     ], 
     "quotemark": false, 
     "one-variable-per-declaration": false, 
     "max-line-length": 160, 
     "object-literal-sort-keys": false, 
     "trailing-comma": false, 
     "variable-name": [true, 
      "ban-keywords", 
      "check-format", 
      "allow-leading-underscore" 
     ] 
    } 

} 

Answer 1

Поскольку ваш utilityFunctions.ts уже является модулем, тогда нет необходимости обертывать то, что внутри него, в пространстве имен.

Кроме того, использование /// <reference ... предназначено только для компилятора, но узел не будет использовать его, и поэтому он не знает, где найти utilityFunctions.
Вам необходимо импортировать его.

Вот как файлы должны выглядеть:

export namespace Fees { 
    export function CalculateLateFee(daysLate: number): number { 
     return daysLate * .25; 
    } 
} 

export function MaxBooksAllowed(age: number): number { 
    if (age < 12){ 
     return 3; 
    } 
    else { 
     return 10; 
    } 
} 

//function that is not exported 
//use it only inside the namespace 
function privateFunc(): void { 
    console.log('This is private...'); 
} 

И:

/// <reference path="utilityFunctions.ts" /> 

import * as Utility from "./utilityFunctions" 

let fee: number = Utility.Fees.CalculateLateFee(10); 
console.log(`Fee: ${fee}`); 

Вы также можете полностью удалить /// <reference как компилятор может найти файл .ts при импорте.

Answer 2

машинопись transpiles в JavaScript, а с JavaScript не является компилируемым языком, вам нужно запустить или загрузить все ваши файлы javascript, чтобы они зависели от другого.

Пространства имен являются в основном глобальными объектами в javascript, поэтому их необходимо определить и загрузить до их использования.

На веб-странице загрузка обычно указывается с помощью тегов скриптов, подобных таковым в главном файле html.

<script src="utilityFunction.js"></script> 
<script src="app.js"></script> 

Это загрузит файл utilityFunction первый и определить объект/пространство имен Utility так, что при запуске app.js он будет иметь видимость объекта Utility

Я не совсем уверен, как работает WebStorm, но это вероятно, вам нужно определить где-то в вашем проекте, какие файлы загружены и в каком порядке.

Answer 3

Быстрый и легкий в Visual Studio

Drag и падение файл с.TS расширение из окна решения для редактора, он будет генерировать встроенный код ссылки как ..

/// <reference path="../../components/someclass.ts"/>