확장 -일부 의견을 기반으로 자세한 내용 제공

오류

오류 TS2306 : ‘test.ts’파일이 모듈이 아닙니다.

여기 http://exploringjs.com/es6/ch_modules.html에서 설명한 사실에서 비롯됩니다

17. 모듈

이 장에서는 내장 모듈이 ECMAScript 6에서 작동하는 방식에 대해 설명합니다.

17.1 개요

ECMAScript 6에서 모듈은 파일에 저장됩니다. 파일 당 정확히 하나의 모듈과 모듈 당 하나의 파일이 있습니다. 모듈에서 물건을 내보내는 방법에는 두 가지가 있습니다. 이 두 가지 방법을 혼합 할 수 있지만 일반적으로 별도로 사용하는 것이 좋습니다.

17.1.1 다수의 명명 된 수출

명명 된 내보내기가 여러 개있을 수 있습니다.

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
...

17.1.2 단일 기본 내보내기

단일 기본 내보내기가있을 수 있습니다. 예를 들어, 함수 :

//------ myFunc.js ------
export default function () { ··· } // no semicolon!

위의 내용을 기반으로 test.js 파일 export의 일부로을 (를) 필요로 합니다. 다음과 같이 내용을 조정 해 봅시다 :

// test.js - exporting es6
export module App {
  export class SomeClass {
    getName(): string {
      return 'name';
    }
  }
  export class OtherClass {
    getName(): string {
      return 'name';
    }
  }
}

이제 다음과 같은 세 가지 방법으로 가져올 수 있습니다.

import * as app1 from "./test";
import app2 = require("./test");
import {App} from "./test";

그리고 우리는 다음과 같이 가져온 것들을 소비 할 수 있습니다 :

var a1: app1.App.SomeClass  = new app1.App.SomeClass();
var a2: app1.App.OtherClass = new app1.App.OtherClass();

var b1: app2.App.SomeClass  = new app2.App.SomeClass();
var b2: app2.App.OtherClass = new app2.App.OtherClass();

var c1: App.SomeClass  = new App.SomeClass();
var c2: App.OtherClass = new App.OtherClass();

메소드를 호출하여 실제로 작동하는지 확인하십시오.

console.log(a1.getName())
console.log(a2.getName())
console.log(b1.getName())
console.log(b2.getName())
console.log(c1.getName())
console.log(c2.getName())

원래 부분은 네임 스페이스 사용의 복잡성을 줄이기 위해 노력하고 있습니다.

원래 부분 :

이 Q & A를 확인하는 것이 좋습니다.

TypeScript 외부 모듈과 함께 네임 스페이스를 사용하려면 어떻게합니까?

첫 문장을 인용하겠습니다.

외부 모듈에서 “네임 스페이스”를 사용하지 마십시오.

이러지 마

진심으로. 중지.

…

이 경우에는 module내부가 필요하지 않습니다 test.ts. 이것은 조정 된 내용 일 수 있습니다 test.ts.

export class SomeClass
{
    getName(): string
    {
        return 'name';
    }
}

자세한 내용은 여기를 참조하십시오

수출 =

이전 예제에서 각 유효성 검사기를 소비했을 때 각 모듈은 하나의 값만 내보냈습니다. 이와 같은 경우 단일 식별자도 마찬가지로 정규화 된 이름을 통해 이러한 기호로 작업하는 것이 번거 롭습니다.

export =구문 지정 모듈로부터 익스포트되는 단일 객체 . 클래스, 인터페이스, 모듈, 함수 또는 열거 형일 수 있습니다. 가져올 때 내 보낸 심볼은 직접 사용되며 이름으로 한정되지 않습니다.

나중에 다음과 같이 사용할 수 있습니다.

import App = require('./test');

var sc: App.SomeClass = new App.SomeClass();

sc.getName();

더 많은 것을 읽으십시오 :

선택적 모듈 로딩 및 기타 고급 로딩 시나리오

경우에 따라 특정 조건에서만 모듈을로드 할 수 있습니다. TypeScript에서는 아래 표시된 패턴을 사용하여 유형 및 기타 고급 로딩 시나리오를 구현하여 유형 안전성을 잃지 않고 모듈 로더를 직접 호출 할 수 있습니다.

컴파일러는 각 모듈이 방출 된 JavaScript에서 사용되는지 여부를 감지합니다. 유형 시스템의 일부로 만 사용되는 모듈의 경우 필요 호출이 발생하지 않습니다. 이러한 미사용 참조 컬링은 성능을 최적화하는 데 도움이되며 해당 모듈을 선택적으로로드 할 수도 있습니다.

이 패턴의 핵심 아이디어는 import id = require ( ‘…’) 문을 통해 외부 모듈에 의해 노출 된 유형에 액세스 할 수 있다는 것입니다. 아래 if 블록에 표시된대로 모듈 로더는 동적으로 (요구 사항을 통해) 호출됩니다. 이는 참조 컬링 최적화를 활용하여 필요할 때만 모듈이로드되도록합니다. 이 패턴이 작동하려면 가져 오기를 통해 정의 된 기호가 형식 위치에서만 사용되는 것이 중요합니다 (즉, JavaScript로 방출되는 위치에서는 사용되지 않아야 함).

답변

// test.ts
export namespace App {
    export class SomeClass {
        getName(): string {
            return 'name';
        }
    }
}

// main.ts
import { App } from './test';
var a = new App.SomeClass();

// test.ts
export class SomeClass {
    getName(): string {
        return 'name';
    }
}

// main.ts
import * as App from './test'; // namespace import pattern
var a = new App.SomeClass();

export class MyClass extends Something<string> {
    public blah: string = null;

    constructor() { ... }
  }