JavaScript 파일을 TypeScript로 변환하는 도구가 있습니까?


133

이제 TypeScript가 나왔습니다. 흥미로운 소식이지만 기존의 모든 JavaScript 파일을 TypeScript로 변환하는 방법은 무엇입니까?


3
typescript는 javascript의 상위 집합이므로 모든 javascript 파일은 이미 typescript 파일입니다.
Benjamin Gruenbaum

6
이것은 한 가지 프로그래밍 언어에서 다른 언어로 변환하는 것은 완전히 프로그래밍 문제입니다.
Ivan Castellanos

2
@Tony_Henrich 그렇다면이 주제는 "주제로 닫히지 않고"옮겨 졌어 야하는데, 이러한 사이트에는 소프트웨어 엔지니어를위한 소프트웨어 권장 사항에 대한 명확한 범주가 있어야합니다.
Ivan Castellanos

3
@Tony_Henrich 이런 식으로하자 : 이것은 "JavaScript를 TypeScript로 변환"에 대한 인터넷의 최고 결과이며 당신이 할 수있는 가장 좋은 방법은 추가 답변을 통해 주제를 닫고 주제를 벗어난 것입니까? 이러한 좁은 사고는이 사이트의 소멸이 될 것이라고 생각합니다.
Ivan Castellanos

5
이 주제가 주제로 폐쇄되었다는 것은 우스운 일입니다.
bharal

답변:


112

이것이 매우 문제가 될까봐 걱정됩니다. TypeScript는 JavaScript의 상위 집합입니다 . 이는 유효한 모든 JavaScript 코드가 유효한 TypeScript 코드이기도 함을 의미합니다. 그건 그냥 잘못이야 다음 코드는 JavaScript에서는 정확하지만 TypeScript에서 오류를 생성합니다.

var data={x:5, y:6};
data.z=5;

데이터를 "ambient"로 선언하면 JavaScript의 동적 동작을 얻을 수 있습니다

var data:any={x:5, y:6};
data.z=5;

이제 이것은 TypeScript에서도 작동합니다. 그럼에도 불구하고 .js 파일의 확장자를 .ts로 변경하고이 파일을 TypeScript 컴파일러에 전달할 수 있습니다. 이것은 정말로 혼란 스러웠으며 freenode의 TypeScript IRC 채널에서 질문을했습니다. Typescript 컴파일러는 입력에 유효한 JavaScript가 있는지 확인하고 무언가를 발견하면 아무것도하지 않는 것으로 나타났습니다. 직관적으로 이것은 좋은 소리입니다. 파일 확장자 만 업데이트하면 모든 JavaScript를 Typescript로 "변환"할 수 있어야합니다. 불행히도 이것은 예상대로 작동하지 않습니다. 이 코드가 있다고 가정 해 봅시다.

var func=function(n){alert(n)};

var data={x:5};
data.z=6;

편집 : 방금 이것을 컴파일하려고했지만 작동하지 않습니다. 죄송합니다. 착각 한 것 같습니다. TypeScript 컴파일러는 순수한 JavaScript도 허용하지 않습니다. 무엇이 잘못되었는지 알아 내려고 노력할 것이다.

파일 확장자를 .ts로 변경하고 다른 코드에서 func 함수를 사용하십시오. 처음에는 모든 것이 잘 보이지만 추악한 버그가 나타납니다. 정적 유형 검사가 도움이 될 것으로 판단하고 코드를 다음과 같이 변경하십시오.

var func=function(n:string){alert(n)};

var data={x:5};
data.z=6;

그러나 이제 이것은 더 이상 유효한 JavaScript 코드가 아니며 컴파일러로 인해 많은 오류 메시지가 생성됩니다. 모든 데이터에는 "z"멤버가 없습니다. ... 기본 유형이 항상 "any"이지만 유형 유추가 전혀 쓸모없는 경우이 동작을 피할 수 있습니다.

어떻게이 문제를 해결합니까? 답은 선언 파일입니다. 프로젝트에서 JavaScript 코드를 "있는 그대로"사용하고 몇 개의 .d.ts 파일을 사용하여 정적 유형 검사를 계속할 수 있습니다. 컴파일러는 변수, 메소드 및 "클래스"가 유형을 포함하여 JavaScript 파일에 선언 된 변수를 컴파일러에 알려줍니다. 따라서 컴파일 타임 유형 검사 및 환상적인 인텔리전스를 허용합니다. 내 예제의 .d.ts 파일은

declare var data:any;
declare function func(n:string);

이것을 "myjsfile.d.ts"로 저장하고 다음을 사용하여 typescript로 가져옵니다.

///<reference path="myjsfile.d.ts"/>

컴파일 된 타이프 스크립트 위의 HTML 파일에 JavaScript 스크립트를 포함 시키십시오. 여기의 흥미로운 링크 . "JavaScript를 TypeScript로 변환"섹션에 관심이있을 수 있습니다.


58
모든 유효한 JS가 유효한 TS는 아님을 지적하기 위해 +1.
켄 스미스

14
실제로, 게시 한 모든 자바 스크립트 스 니펫은 유효한 유형 스크립트입니다. --noImplictAny 등과 같은 일부 컴파일러 스위치를 끄면됩니다. 그러나 결국 스위치를 켜고 필요한 경우 형식 주석을 추가하는 것이 좋습니다.
Liero

감사합니다. 사람들에게 TypeScript가 어떤 예제를 제공하든 JavaScript의 상위 집합이 아니라고 말할 때 논쟁의 여지가 없습니다. 결국 사람들은 내가 왜 그 이유를 보여 주었을 때 논쟁을 포기하고 다음 주에 푸딩의 증거를 잊어 버린 것과 똑같이 논쟁합니다. " 모든 유효한 JavaScript 코드도 유효한 TypeScript 코드입니다 ... 잘못되었습니다 "-LHK
Cody

3
TypeScript "오류"(유형의 현재 데모 버전에서이 답변의 모든 JavaScript 예제는 컴파일에 아무런 문제가 없음)에도 불구하고 JavaScript로 컴파일 할 수있는 TypeScript를 사용하면 일종의 수퍼 세트로 작동합니다. TypeScript 컴파일러는 처리 할 수 ​​있습니다 ...
Brett Zamir

그래, 나는이 문제의 "양쪽에 있었다". 기본적으로 TS는 다음과 같은 점에서 JS의 상위 집합입니다. TypeScript는 일부 유효한 JS 코드에 대해 불평하지만 noEmitOnError꺼져있는 한 여전히 변환 및 변환 할 수 있습니다. 따라서 오류가 표시되는 동안 실제로 오류를 무시하고 오류에도 불구하고 TypeScript 변환을 사용할 수 있습니다 (예 : JS에서 TS 로의 점진적 전환 허용). 또한, noImplicitAnyIDK 와 같은 스위치를 통해 적어도 일부 오류를 비활성화 할 수 있습니다 .
Venryx '11

51

업데이트 : 도구는이 게시물에 자세히 설명되어 있습니다

버전 9 ( EAP 빌드 사용 가능 )로 시작하는 ReSharper 에는 JavaScript 코드를 TypeScript로 자동 변환하는 기능이 있습니다. .js 파일의 이름을 .ts로 바꾸는 것으로 시작하여 다음과 같은 R # 제안을 볼 수 있습니다.

실제 사례에서 시도하지 않았습니다. 그러나 많은 JavaScript 패턴을 변환 할 수 있습니다.


수동으로 편집 한 메타 파일을 사용하여 필요한 모든 TS 팽창을 만들어이 작업을 즉시 수행하고 싶습니다.
xamiro

안녕하세요, resharper를 사용하고 있으므로 .js에서 .ts로만 이름을 바꾸는 것만 가능합니까? 내가 .js 파일을 사용하고 파일 이름을 바꾸는 것처럼 wih a.ts는 resharper가 제안을 줄 것입니까? Visual Studio 커뮤니티 버전을 사용하고 있으며 Resharper
Swift

1

터미널 (mac)에서 :

for f in *.js; do mv $f `basename $f .js`.ts; done;

모든 .js 파일의 이름을 .ts로 바꿉니다.

이것은 다소 혀가 있지만 벤자민이 지적한 것처럼 JavaScript 파일은 유효한 TypeScript입니다. 입니다. JavaScript에 유형, 클래스, 인터페이스 등을 추가 하려면 이러한 개념을 사용하여 코드디자인하고 변경해야합니다. 합니다. 자동 변환이 거의 없거나 전혀 없습니다.

GNU findutils (대부분 * nixes) + Bash를 사용하여 다음을 수행하십시오.

find -type f -name '*.js' -exec bash -c 'mv "${1}" "${1%???}.ts"' bash {} \;

10
+1-요약 된 책을 정식 버전으로 자동 변환하는 것과 약간 같습니다.
Fenton

모든 유형 정보가 제거되고 모든 인터페이스가 제거됩니다. 많은 정보가 사라졌습니다. 형식 정보를 유추하기에 충분한 정보가있는 JavaScript는 이미 TypeScript 파일에 붙여 넣을 수 있으며 컴파일러는 형식을 처리하지만 JavaScript가 일관성이 없기 때문에 작동하지 않는 인스턴스가 많이 있습니다.
Fenton

1
무엇에서 무엇으로 변환합니까? JS에서 유형을 파생시켜 var에 추가 하시겠습니까? 클래스, 인터페이스, 모듈을 어떻게 파생시킬 수 있는지 잘 모릅니다.
7zark7

4
모든 JavaScript 코드가 TypeScript에서 유효한 것은 아닙니다. 다음을 시도해보십시오.var a = 5; a = "";
coudy

4
두 번째로, downvote를 정당화하기 위해 모듈이나 플러그인을 네이티브 JS에서 TypeScript로 변환하려고 할 때 모든 JS 코드가 TypeScript에서 유효하지는 않다는 것을 매우 빨리 알 것입니다 (예 : jquery.address 등)
dpb
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.