มีเครื่องมือในการแปลงไฟล์ JavaScript เป็น TypeScript หรือไม่ [ปิด]

ตอนนี้ TypeScript ออกมาแล้วมันเป็นข่าวที่น่าตื่นเต้นสำหรับฉัน แต่ฉันจะแปลงไฟล์ JavaScript ที่มีอยู่ทั้งหมดเป็น TypeScript ได้อย่างไร

ฉันกลัวว่านี่จะเป็นปัญหามาก typescript เป็น superset ของ JavaScript นี่หมายความว่าโค้ด JavaScript ที่ถูกต้องทั้งหมดยังเป็นรหัส TypeScript ที่ถูกต้อง ซึ่งผิดเพียง. รหัสต่อไปนี้ถูกต้องใน JavaScript แต่สร้างข้อผิดพลาดใน TypeScript:

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

คุณสามารถรับพฤติกรรมแบบไดนามิกของ JavaScript ได้โดยการประกาศข้อมูลเป็น "สภาพแวดล้อม"

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

ตอนนี้สิ่งนี้จะทำงานใน TypeScript ด้วย อย่างไรก็ตามคุณสามารถเปลี่ยนนามสกุลของไฟล์. js เป็น. ts และส่งไฟล์นี้ไปยังคอมไพเลอร์ TypeScript สิ่งนี้ทำให้ฉันสับสนจริงๆและฉันถามคำถามในช่อง TypeScript IRC บน freenode ปรากฎว่าคอมไพลเลอร์ 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" ... พฤติกรรมนี้สามารถหลีกเลี่ยงได้หากประเภทเริ่มต้นเป็น "ใด ๆ " เสมอ แต่การอนุมานประเภทจะไร้ประโยชน์อย่างที่สุด

แล้วคุณจะแก้ปัญหานี้อย่างไร? คำตอบคือไฟล์ประกาศ คุณสามารถใช้โค้ด JavaScript ของคุณ "ตามสภาพ" ในโปรเจ็กต์และยังคงได้รับการตรวจสอบประเภทคงที่ด้วยความช่วยเหลือของไฟล์. d.ts บางไฟล์ พวกเขาแจ้งคอมไพเลอร์ว่าตัวแปรวิธีการและ "คลาส" ใดบ้างที่ประกาศในไฟล์ JavaScript รวมถึงประเภทของตัวแปร ดังนั้นจึงอนุญาตให้มีการตรวจสอบประเภทเวลาคอมไพล์และ Intellisense ที่ยอดเยี่ยม ไฟล์. d.ts สำหรับตัวอย่างของฉันจะเป็น

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

บันทึกเป็น "myjsfile.d.ts" และนำเข้าสู่ typescript ด้วย

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

อย่าลืมรวมสคริปต์ JavaScript ไว้ในไฟล์ html ของคุณเหนือ typescript ที่คอมไพล์แล้ว นี่คือการเชื่อมโยงที่น่าสนใจ คุณอาจสนใจในส่วน "การเปลี่ยน JavaScript เป็น TypeScript"

อัปเดต: มีการอธิบายรายละเอียดเครื่องมือไว้ในโพสต์นี้

ReSharper ที่เริ่มต้นด้วยเวอร์ชัน 9 (มีEAP builds ) มีฟังก์ชันในการแปลงโค้ด JavaScript เป็น TypeScript โดยอัตโนมัติ คุณสามารถเริ่มต้นด้วยการเปลี่ยนชื่อไฟล์. js เป็น. ts และดูคำแนะนำ R # เช่นนี้:

ยังไม่ได้ลองใช้กับตัวอย่างในโลกแห่งความเป็นจริง แต่สามารถแปลงรูปแบบ JavaScript จำนวนมากได้

จากเทอร์มินัล (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 {} \;