Node.js 'types'는 .ts 파일에서만 사용할 수 있습니다.-Visual Studio Code using @ ts-check


104

Visual Studio Code에서 작업중인 Node 프로젝트에서 TypeScript를 사용하기 시작했습니다. Flow와 유사한 "옵트 인"전략을 따르고 싶었습니다. 따라서 해당 파일에 대해 TS를 활성화하기 위해 파일 // @ts-check상단에 배치 했습니다 .js. 궁극적으로 Flow와 동일한 "linting"경험을 하므로 Intellisense 경고 / 오류를 볼 수 있도록 TSLint 플러그인을 설치했습니다 .

하지만 내 파일은 다음과 같습니다.

// @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.아래 이미지와 같습니다.

ts에 대한 vscode의 오류

내가 본 이 질문을 나에게 보여주지 않는 다음 vscode에서 자바 스크립트 유효성 검사를 사용하지 않도록 권장하지만, 어떤 타이프 라이터 인텔리 정보를.

TSLint 확장 문서에 언급 된대로 내 vscode 설정에서 설정 tslint.jsEnable을 시도 true했지만 운이 없었습니다.

.jsTypeScript와 함께 파일 을 사용 하고 Intellisense를 가져 와서 TS 명령을 실행하기 전에 코드의 오류가 무엇인지 알 수 있는 올바른 설정은 무엇입니까 ?


확장자를 ts로 변경하면 오류가 있습니까?
Israel Zinc

@ israel.zinc .ts가 예상대로 TS 오류 / 경고 를 표시 하도록 확장을 변경합니다 . 나는 이것이 작동 할 수 있다고 생각한다. 그러나 나는 @ts-check나의 모든 확장을 유지하면서 사용 하는 더 많은 옵트 인 방법을 바랐다..js
james


@ BuZZ-dEE 일 수도 있지만 답변으로 문제가 해결되지 않았습니다. 나는 이것을 나의 원래 질문에서 언급했습니다.
james

답변:


204

내가 사용하고 @flow vscode과를하지만 같은 문제가 있었다.

이 단계로 해결했습니다.

  1. 확장 Flow Language Support 설치
  2. 내장 TypeScript 확장을 비활성화합니다.

내장 TypeScript를 비활성화하는 방법 :

  1. 확장 탭으로 이동
  2. 검색 타이프 라이터와 자바 스크립트 언어 기능 @builtin
  3. 비활성화를 클릭하십시오.

5
허용되는 답변이 항상 올바른 것은 아닙니다. .js 파일에서 동일한 메시지를 제공하는 React Native 및 Flow가있는 VSCode에 버그가 있으며,이 경우 .ts로 변경해서는 안되지만 .js로 계속 진행하고 여기에 제안 된대로 문제를 해결해야합니다 !!
파슈 테

106
참고로이 확장 기능을 비활성화하면 기본적으로 VSCode를 사용한 JS 개발에 대한 모든 좋은 점이 무효화됩니다. 대신 설정 json 파일에 다음을 추가해야합니다. "javascript.validate.enable": false
heez

1
@heez가 언급했듯이 자바 스크립트 파일에 대한 참조 찾기, 자동 완성 등은 자바 스크립트 언어 기능을 비활성화하지 않습니다.
Ajitsen

2
유효한 대답은 @heez으로 말했다
아심 Olmez

1
@heez는 저장해 주셔서 감사합니다. 지금 오류가 없습니다. 마침내 Visual Studio 코드를 사용할 수 있습니다.
Anish Arya

94

사용 "javascript.validate.enable": false그것은 비활성화 ESLINT을하지 않습니다, 당신 VS 코드 설정에서. ESLINT와 Flow를 모두 사용합니다. 지침을 따르기 만하면 Vs 코드 설정 흐름

settings.json에이 줄을 추가합니다. 도움 "javascript.validate.enable": false


4
이것으로 타이프 스크립트를 비활성화 할 필요가 없습니다. 둘 다 존재할 수 있습니다. 최고의 솔루션!
Nirus

2
ESLint를 사용하여 Javascript의 유효성을 검사하는 경우이 답변이 최상의 솔루션입니다. 추가 정보 : code.visualstudio.com/docs/languages/…github.com/flowtype/flow-for-vscode#setup
Beau Smith

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"}십시오. settings.json에서 편집을 클릭하고 다음을 추가하십시오 "javascript.validate.enable": false..
Fotis Tsakiris

최고의 .. 나에게 잘 작동합니다
Betini O. Heleno

1

.ts파일을 사용해야합니다. 예 test.ts를 들어 Typescript 유효성 검사, var typing 의 지능, 반환 유형 및 "유형이 지정된"오류 검사 (예 : 매개 변수 string를 예상하는 메서드에를 전달 number하면 오류가 발생 함)를 얻을 수 있습니다.

.js 를 통해tsc (표준)으로 변환 됩니다 .


업데이트 (2018 년 11 월) :

반대 투표, 매우 유용한 댓글 및 기타 답변을 기반으로 설명이 필요합니다.

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의 맥락뿐만 아니라 이것을 다루지 못한 것이 있다면 추가하십시오. 모두 배우자.


JS 파일 내에서 TS의 모든 기능을 사용할 수 있음을 제안하는 몇 가지 기사를 찾았습니다. 다음은 Smashing Magazine , 설정을 설명하는 vscodeGitHub 문제와 vscode의 일부 릴리스 노트입니다
james

@ jamez14 나는 시도하지 않았거나 사용 하지 않을 필요가 있었다 .ts. IINM, 샘플은 오류 검사intellisense를 보여줍니다 . 당신이 가진 문제는 (정적)입니다 type귀하의 변수를 보내고, 및 반환 types뿐만 아니라 - 예를 들어 foo:string, bar:number, fubar:MyClass, myMethod(f:Array):void, anotherMethod():string.
Hth

네, 당신의 평가가 옳은 것 같습니다. 예제를 자세히 살펴본 결과 @ts-check속성을 사용할 때 TS가 아닌 JS 오류 검사 일 뿐이라는 것을 알았습니다 . 매우 오해의 소지가있는 ...
james

-1

여기에 착륙하고 다른 모든 솔루션이 작동하지 않은 사람은 이것을 시도해보십시오. 나는 typescript + react를 사용하고 있으며 내 문제는 다음 항목에 대한 설정을 확인 javascriptreact하지 않기 typescriptreact때문에 vscode에서 파일을 연결하고 있다는 것 입니다.

   "files.associations": {
    "*.tsx": "typescriptreact",
    "*.ts": "typescriptreact"
  },
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.