js 'types' hanya dapat digunakan dalam file .ts - Visual Studio Code menggunakan @ ts-check

105

Saya mulai menggunakan TypeScript dalam proyek Node yang saya kerjakan dalam Visual Studio Code. Saya ingin mengikuti strategi "ikut serta", mirip dengan Flow. Oleh karena itu saya meletakkan // @ts-checkdi bagian atas .jsfile saya dengan harapan dapat mengaktifkan TS untuk file itu. Pada akhirnya saya menginginkan pengalaman yang sama tentang "linting" seperti Flow, oleh karena itu saya menginstal plugin TSLint sehingga saya dapat melihat peringatan / kesalahan Intellisense.

Tetapi dengan file saya terlihat seperti:

// @ts-check

module.exports = {
  someMethod: (param: string): string => {
    return param;
  },
};

dan tsconfig.jsonfile saya terlihat seperti ...

{
  "compilerOptions": {
      "target": "es2016",
      "module": "commonjs",
      "allowJs": true
  }
}

Saya mendapatkan kesalahan ini: [js] 'types' can only be used in a .ts file.seperti yang ditunjukkan di bawah ini pada gambar.

kesalahan dari vscode untuk ts

Saya melihat pertanyaan ini yang merekomendasikan menonaktifkan validasi javascript di vscode tetapi kemudian itu tidak menunjukkan kepada saya setiap Info naskah Intellisense.

Saya mencoba mengatur tslint.jsEnableketrue dalam pengaturan vscode saya seperti yang disebutkan dalam dokumen ekstensi TSLint tetapi tidak berhasil di sana.

Apa pengaturan yang benar untuk menggunakan .jsfile dengan TypeScript dan mendapatkan Intellisense jadi saya tahu apa kesalahan dalam kode saya sebelum saya menjalankan perintah TS?

james
sumber
Apakah Anda mengalami kesalahan jika mengubah ekstensi ke ts?
Israel Zinc
@ israel.zinc mengubah ekstensi untuk .tsmenunjukkan kesalahan / peringatan TS seperti yang diharapkan. Saya kira ini bisa berhasil, tetapi saya berharap lebih banyak metode keikutsertaan yang digunakan @ts-checksambil menyimpan semua ekstensi saya sebagai.js
james
@ BuZZ-dEE mungkin saja, tetapi jawaban di sana tidak menyelesaikan masalah. Saya menyebutkan ini dalam pertanyaan awal saya.
James

Jawaban:

203

Saya menggunakan @flow dengan vscode tetapi memiliki masalah yang sama.

Saya menyelesaikannya dengan langkah-langkah ini:

  1. pasang ekstensi Dukungan Bahasa Flow
  2. nonaktifkan ekstensi TypeScript bawaan:

Cara menonaktifkan TypeScript bawaan:

  1. pergi ke tab ekstensi
  2. cari @builtin TypeScript dan Fitur Bahasa JavaScript
  3. klik Nonaktifkan
Idan Dagan
sumber
5
Jawaban yang diterima tidak selalu benar. Ada bug di VSCode dengan React Native dan Flow yang memberikan pesan yang sama di file .js, dan dalam hal ini ANDA TIDAK HARUS mengubah ke .ts, tetapi lanjutkan dengan .js dan perbaiki masalah seperti yang disarankan di sini !!
pashute
107
Sekadar informasi: Menonaktifkan ekstensi ini pada dasarnya membatalkan semua hal baik tentang pengembangan JS dengan VSCode. Sebagai gantinya, Anda harus menambahkan yang berikut ini ke dalam file json pengaturan Anda: "javascript.validate.enable": false
heez
1
seperti yang disebutkan @heez, ini akan mempengaruhi, mencari referensi ke file javascript, pelengkapan otomatis, dll. jangan nonaktifkan Fitur Bahasa Javascript.
Ajitsen
2
Jawaban yang valid dikatakan oleh @heez
Asim Olmez
1
@ heez terima kasih sudah menyelamatkan, saya menemukan. Tidak ada kesalahan sekarang. Dapat menggunakan kode Visual studio akhirnya.
Anish Arya
93

Gunakan "javascript.validate.enable": falsedalam pengaturan VS Code Anda, Ini tidak menonaktifkan ESLINT. Saya menggunakan ESLINT & Flow. Cukup ikuti instruksi Pengaturan Flow For Vs Code

Menambahkan baris ini di settings.json. Membantu "javascript.validate.enable": false

Adeel Imran
sumber
4
Dengan ini Anda tidak perlu menonaktifkan skrip ketikan. Keduanya bisa ada. Solusi terbaik!
Nirus
2
Jika Anda menggunakan ESLint untuk memvalidasi Javascript Anda, maka jawaban ini adalah solusi terbaik. Info lebih lanjut: code.visualstudio.com/docs/languages/… dan juga github.com/flowtype/flow-for-vscode#setup
Beau Smith
1
Di mana saya dapat menemukan file settings.json.?
i18n
1
Hai @ i18n Buka: Kode -> Preferensi -> Pengaturan -> Ekstensi -> Gulir ke bawah dan temukan "Edit di settings.json". Benar-benar menemukan satu di bawah ini: Include Languages Enable Emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and emmet supported language. E.g.: {"vue-html": "html", "javascript": "javascriptreact"}klik Edit di settings.json dan menambahkan ini: "javascript.validate.enable": false.
Fotis Tsakiris
terbaik .. bekerja dengan baik untuk saya
Betini O. Heleno
0

Anda harus menggunakan .tsfile - misalnya test.tsuntuk mendapatkan validasi Ketikan , intellisensetyping vars, jenis kembalian, serta pemeriksaan kesalahan "yang diketik" (misalnya meneruskan a stringke metode yang mengharapkannumber parameter akan error).

Ini akan ditransformasikan ke dalam (standar) .js melaluitsc .


Pembaruan (11/2018):

Klarifikasi diperlukan berdasarkan suara negatif, komentar yang sangat membantu dan jawaban lain.

types

  • Ya, Anda dapat melakukan typepengecekan di VS Code di .jsfile dengan @ts-check- seperti yang ditunjukkan dalam animasi

  • Apa yang awalnya saya maksud untuk Typecript types adalah sesuatu seperti ini .tsyang tidak persis sama:

    hello-world.ts

    function hello(str: string): string {
      return 1;
    }
    
    function foo(str:string):void{
       console.log(str);
    }

    Ini tidak akan dikompilasi. Error: Type "1" is not assignable to String

  • jika Anda mencoba sintaks ini dalam file Javascript hello-world.js :

    //@ts-check
    
    function hello(str: string): string {
      return 1;
    }
    
    function foo(str:string):void{
       console.log(str);
    }

    Pesan kesalahan yang direferensikan oleh OP ditampilkan: [js] 'types' can only be used in a .ts file

Jika ada sesuatu yang saya lewatkan yang mencakup ini serta konteks OP, silakan tambahkan. Mari kita semua belajar.

EdSF
sumber
Saya telah menemukan beberapa artikel yang menyarankan Anda untuk menggunakan semua fitur TS dalam file JS. Ini salah satu dari Smashing Magazine , masalah GitHub untuk vscode yang menjelaskan penyiapan, dan beberapa catatan rilis untuk vscode
james
@ jamez14 Saya belum mencoba / merasa perlu untuk tidak menggunakan .ts. IINM, sampel menunjukkan pengecekan kesalahan dan kecerdasan . Masalah yang Anda miliki adalah (statis) typeing variabel Anda, dan kembali typesjuga - misalnya foo:string, bar:number, fubar:MyClass, myMethod(f:Array):void, anotherMethod():string. Hth ...
EdSF
ya, sepertinya Anda benar dengan penilaian Anda. Setelah melihat lebih banyak contoh, saya melihat itu hanya pemeriksaan kesalahan JS, bukan TS, saat menggunakan @ts-checkatribut. Sangat menyesatkan ...
james
-1

Bagi siapa pun yang mendarat di sini dan semua solusi lain tidak berhasil, cobalah ini. Saya menggunakan skrip + bereaksi dan masalah saya adalah bahwa saya mengaitkan file di vscode karena javascriptreacttidak typescriptreactjadi periksa pengaturan Anda untuk entri berikut.

   "files.associations": {
    "*.tsx": "typescriptreact",
    "*.ts": "typescriptreact"
  },
Kenny Hammerlund
sumber