javascript - TypeScript ES6 impor modul "File bukan modul kesalahan"

Saya menggunakan TypeScript 1.6 dengan sintaks modul ES6.

File saya adalah:

test.ts:

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

main.ts:

import App from './test';

var a = new App.SomeClass();

Ketika saya mencoba mengompilasi file main.ts saya mendapatkan kesalahan ini:

Kesalahan TS2306: File 'test.ts' bukan modul.

Bagaimana saya bisa mencapainya?

Jawaban #1

Diperluas - untuk memberikan lebih banyak detail berdasarkan beberapa komentar

Kesalahan

Kesalahan TS2306: Berkas 'test.ts' bukan modul.

Berasal dari fakta yang dijelaskan di sini http://exploringjs.com/es6/ch_modules.html

17. Modul

Bab ini menjelaskan bagaimana modul bawaan bekerja di ECMAScript 6.

17.1 Ikhtisar

Dalam ECMAScript 6, modul disimpan di file. Terdapat tepat satu modul per file dan satu file per modul. Anda memiliki dua cara untuk mengekspor sesuatu dari modul. Kedua cara ini bisa dicampur, tetapi biasanya lebih baik digunakan secara terpisah.

17.1.1 Beberapa ekspor bernama

Bisa ada beberapa ekspor bernama:

//------ 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 Ekspor default tunggal

Hanya bisa ada satu ekspor default. Misalnya, sebuah fungsi:

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

Berdasarkan hal di atas, kita memerlukan export, sebagai bagian dari file test.js. Mari kita sesuaikan isinya seperti ini:

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

Dan sekarang kita bisa mengimpornya dengan tiga cara ini:

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

Dan kita bisa mengonsumsi barang impor seperti ini:

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();

dan panggil metodenya untuk melihatnya beraksi:

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

Bagian asli mencoba membantu mengurangi tingkat kompleksitas dalam penggunaan namespace

Bagian asli:

Saya sangat menyarankan untuk memeriksa Tanya Jawab ini:

Bagaimana cara menggunakan namespace dengan modul eksternal TypeScript?

Izinkan saya mengutip kalimat pertama:

Jangan menggunakan "namespaces" dalam modul eksternal.

Jangan lakukan ini.

Serius. Berhenti.

...

Dalam hal ini, kita tidak perlu module di dalam test.ts. Ini bisa menjadi kontennya yang disesuaikan test.ts:

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

Baca lebih lanjut di sini

Ekspor =

Dalam contoh sebelumnya, ketika kita menggunakan setiap validator, masing-masing modul hanya mengekspor satu nilai. Dalam kasus seperti ini, bekerja dengan simbol-simbol tersebut melalui nama yang memenuhi syarat terasa merepotkan padahal satu pengenal saja sudah cukup.

Sintaks export = menentukan satu objek yang diekspor dari modul. Ini bisa berupa kelas, antarmuka, modul, fungsi, atau enum. Saat diimpor, simbol yang diekspor digunakan langsung dan tidak dikualifikasi dengan nama apa pun.

kita bisa mengonsumsinya nanti seperti ini:

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

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

sc.getName();

Baca lebih lanjut di sini:

Pemuatan Modul Opsional dan Skenario Pemuatan Lanjutan Lainnya

Dalam beberapa kasus, Anda mungkin hanya ingin memuat sebuah modul dalam kondisi tertentu. Dalam TypeScript, kita dapat menggunakan pola yang ditunjukkan di bawah ini untuk mengimplementasikan ini dan skenario pemuatan lanjutan lainnya untuk memanggil langsung pemuat modul tanpa kehilangan keamanan tipe.

Kompiler mendeteksi apakah setiap modul digunakan dalam JavaScript yang dihasilkan. Untuk modul yang hanya digunakan sebagai bagian dari sistem tipe, tidak ada pemanggilan require yang dihasilkan. Penyaringan referensi yang tidak digunakan ini adalah optimasi kinerja yang baik, dan juga memungkinkan pemuatan opsional dari modul-modul tersebut.

Gagasan inti dari pola ini adalah bahwa pernyataan import id=require('...') memberi kita akses ke tipe yang diekspos oleh modul eksternal. Pemuat modul dipanggil (melalui require) secara dinamis, seperti yang ditunjukkan dalam blok if di bawah ini. Ini memanfaatkan optimasi penghapusan referensi sehingga modul hanya dimuat ketika diperlukan. Agar pola ini bekerja, penting bahwa simbol yang didefinisikan melalui import hanya digunakan dalam posisi tipe (yaitu, tidak pernah digunakan di posisi yang akan diterbitkan ke JavaScript).

Jawaban #2

Jawaban di atas benar. Tapi untuk berjaga-jaga... Mendapat kesalahan yang sama di VS Code. Harus menyimpan ulang/mengompilasi ulang file yang menimbulkan kesalahan.

Jawaban #3

Bagaimana saya bisa mencapainya?

Contoh Anda mendeklarasikan internal module TypeScript < 1.5, yang sekarang disebut namespace. Sintaks lama module App {} sekarang setara dengan namespace App {}. Akibatnya, hal berikut ini berfungsi:

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

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

Dengan mengatakan itu...

Cobalah untuk menghindari mengekspor namespace dan sebaliknya ekspor modul (yang sebelumnya disebut external modules). Jika perlu, Anda dapat menggunakan namespace saat mengimpor dengan namespace import pattern seperti ini:

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

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

Jawaban #4

Selain jawaban A. Tim, ada kalanya bahkan itu tidak berhasil, jadi kamu perlu:

  1. Tulis ulang string impor, menggunakan intellisense. Terkadang ini memperbaiki masalah
  2. Mulai Ulang VS Code

Artikel terkait