js 'типы' могут использоваться только в файле .ts - код Visual Studio с использованием @ ts-check

112

Я начинаю использовать TypeScript в проекте Node, над которым я работаю в Visual Studio Code. Я хотел следовать стратегии «согласия», аналогичной Flow. Поэтому я помещаю // @ts-checkвверху своего .jsфайла в надежде включить TS для этого файла. В конечном счете, мне нужен такой же опыт "линтинга", как и у Flow, поэтому я установил плагин TSLint, чтобы видеть предупреждения / ошибки Intellisense.

Но мой файл выглядит так:

// @ts-check

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

и мой tsconfig.jsonфайл выглядит как ...

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

Я получаю эту ошибку: [js] 'types' can only be used in a .ts file.как показано ниже на изображении.

ошибка от vscode для ts

Я видел этот вопрос, в котором рекомендовалось отключить проверку javascript в vscode, но тогда он не показывает мне никакой информации TypeScript Intellisense.

Я попытался установить , tslint.jsEnableчтобы trueв моих настройках vscode , как указано в документации расширения TSLint , но не повезло там.

Какова правильная настройка для использования .jsфайлов с TypeScript и получения Intellisense, чтобы я знал, какие ошибки в моем коде, прежде чем я буду запускать какие-либо команды TS?

Джеймс
источник
У вас есть ошибка, если вы измените расширение на ts?
Israel Zinc
@ israel.zinc изменяет расширение, чтобы .tsпоказать мне ошибки / предупреждения TS, как и ожидалось. Думаю, это может сработать, но я надеялся на использование большего количества метода подписки @ts-check, сохраняя при этом все мои расширения как.js
Джеймс
@ BuZZ-dEE может быть, но ответы там не решили проблему. Я упомянул об этом в своем первоначальном вопросе.
james

Ответы:

210

Я использую @flow с vscode, но у меня такая же проблема.

Я решил это с помощью следующих шагов:

  1. установить расширение Flow Language Support
  2. отключите встроенное расширение TypeScript:

Как отключить встроенный TypeScript:

  1. перейти на вкладку расширений
  2. ищите @builtin TypeScript и особенности языка JavaScript
  3. нажмите Отключить
Идан Даган
источник
5
Принятый ответ не всегда правильный. В VSCode есть ошибка с React Native и Flow, которая выдает такое же сообщение в файлах .js, и в этом случае НЕ СЛЕДУЕТ переходить на .ts, а продолжить с .js и исправить проблему, как предлагается здесь !!
пашуте
110
Просто к сведению: отключение этого расширения в основном сводит на нет все приятные моменты разработки JS с помощью VSCode. Вместо этого вы должны просто добавить следующее в свой файл настроек json: "javascript.validate.enable": false
heez
2
поскольку @heez упомянул, что это повлияет, поиск ссылок на файлы javascript, автозаполнение и т. д. не отключает функции языка Javascript.
Ajitsen
2
Правильный ответ дал @heez
Асим
1
@heez, спасибо за спасение, я узнал. Сейчас ошибок нет. Наконец-то можно использовать код Visual Studio.
Аниш Арья,
96

Используйте "javascript.validate.enable": falseв настройках VS Code, он не отключает ESLINT. Я использую как ESLINT, так и Flow. Просто следуйте инструкциям Flow For Vs Code Setup

Добавляем эту строку в settings.json. Помогает "javascript.validate.enable": false

Адил Имран
источник
4
При этом вам не нужно отключать машинописный текст. Оба могут существовать. Лучшее решение!
Nirus
2
Если вы используете ESLint для проверки своего Javascript, то этот ответ - лучшее решение. Дополнительная информация: code.visualstudio.com/docs/languages/…, а также github.com/flowtype/flow-for-vscode#setup
Бо Смит
1
Где найти файл settings.json.?
i18n
1
Привет @ i18n Перейдите в: Код -> Настройки -> Настройки -> Расширения -> Прокрутите вниз и найдите «Изменить в settings.json». На самом деле найти один под этим: 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"}нажмите на Edit в settings.json и добавить: "javascript.validate.enable": false.
Фотис Цакирис,
0

Вы должны использовать .tsфайл - например, test.tsдля получения проверки Typescript, intellisense typing переменных, возвращаемых типов, а также для проверки «типизированных» ошибок (например, передача stringметоду, который ожидает, что numberпараметр выдаст ошибку).

Он будет перенесен в (стандартный) .js черезtsc .


Обновление (11/2018):

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

types

  • Да, вы можете выполнить typeпроверку кода VS в .jsфайлах с @ts-check- как показано в анимации

  • То, что я изначально имел в виду для Typescript, types - это что-то вроде этого, в .tsкотором не совсем то же самое:

    hello-world.ts

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

    Это не будет компилироваться. Error: Type "1" is not assignable to String

  • если вы пробовали этот синтаксис в файле Javascript hello-world.js :

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

    Отображается сообщение об ошибке, на которое ссылается OP: [js] 'types' can only be used in a .ts file

Если я что-то пропустил, что касается этого, а также контекста OP, добавьте. Давайте все узнаем.

EdSF
источник
Я нашел несколько статей, в которых предлагается использовать все функции TS в файле JS. Вот один из журнала Smashing Magazine , проблема GitHub для vscode , описывающая настройку, и некоторые примечания к выпуску для vscode
Джеймс,
@ jamez14 Я не пробовал / не использовал .ts. IINM, образцы показывают проверку ошибок и intellisense . Проблема у вас есть (статический) typeИНГ переменные, и возвращение , typesа также - например foo:string, bar:number, fubar:MyClass, myMethod(f:Array):void, anotherMethod():string. Hth ...
EdSF
да, похоже, вы правы в своей оценке. Посмотрев более подробно на примеры, я понял, что при использовании @ts-checkатрибута это просто проверка ошибок JS, а не TS . Очень вводит в заблуждение ...
Джеймс
-1

Для тех, кто приземляется здесь, и все другие решения не работают, попробуйте. Я использую машинописный + среагировать и моя проблема заключалась в том , что я ассоциирует файлы в vscode , как javascriptreactне typescriptreactтак , проверьте настройки для следующих записей.

   "files.associations": {
    "*.tsx": "typescriptreact",
    "*.ts": "typescriptreact"
  },
Кенни Хаммерлунд
источник