คุณช่วยอธิบายเกี่ยวกับภาษาของ TypeScript ได้ไหม?

JavaScript หรือไลบรารีที่มีอยู่ไม่สามารถทำได้สิ่งนั้นจะทำให้ฉันมีเหตุผลที่จะต้องพิจารณา

ฉันเริ่มเขียนคำตอบนี้เมื่อ TypeScript ยังร้อนแรงกด ห้าปีต่อมานี่เป็นภาพรวมที่ใช้ได้ แต่ดูคำตอบของ Lodewijkด้านล่างเพื่อดูรายละเอียดเพิ่มเติม

มุมมอง 1000 ฟุต ...

TypeScriptเป็นชุดของ JavaScript ซึ่งส่วนใหญ่จะให้การพิมพ์คงที่เป็นตัวเลือกคลาสและอินเทอร์เฟซ หนึ่งในผลประโยชน์ที่ยิ่งใหญ่คือการเปิดใช้ IDEs เพื่อให้สภาพแวดล้อมที่ดียิ่งขึ้นสำหรับการจำข้อผิดพลาดทั่วไปขณะที่คุณพิมพ์รหัส

เพื่อให้เข้าใจถึงสิ่งที่ฉันหมายถึงดูวิดีโอแนะนำของ Microsoftเกี่ยวกับภาษา

สำหรับโครงการ JavaScript ขนาดใหญ่การใช้ TypeScript อาจส่งผลให้ซอฟต์แวร์มีเสถียรภาพมากขึ้นในขณะที่ยังคงสามารถปรับใช้ได้โดยที่แอปพลิเคชัน JavaScript ปกติจะทำงาน

มันเป็นโอเพ่นซอร์ส แต่คุณจะได้รับ Intellisense ที่ฉลาดเมื่อคุณพิมพ์ถ้าคุณใช้ IDE ที่รองรับ ในขั้นต้นนี้เป็นเพียง Visual Studio ของ Microsoft (มีการระบุไว้ในบล็อกโพสต์จากMiguel de Icaza ) ทุกวันนี้IDEs อื่น ๆ ก็ให้การสนับสนุน TypeScript ด้วยเช่นกัน

มีเทคโนโลยีอื่น ๆ เช่นนี้อีกไหม?

มีCoffeeScriptแต่นั่นให้บริการวัตถุประสงค์ที่แตกต่าง IMHO, CoffeeScript ให้อ่านง่ายสำหรับมนุษย์ แต่ typescript นอกจากนี้ยังมีการอ่านลึกสำหรับเครื่องมือที่ผ่านการพิมพ์คงไม่จำเป็น (ดูนี้โพสต์บล็อกล่าสุดสำหรับคำติชมน้อยมาก) นอกจากนี้ยังมีDartแต่ใช้แทน JavaScript ได้เต็มรูปแบบ (แม้ว่าจะสามารถสร้างโค้ด JavaScript ได้ )

ตัวอย่าง

ตัวอย่างเช่นนี่คือ TypeScript บางส่วน (คุณสามารถเล่นกับสิ่งนี้ได้ในTypeScript Playground )

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

และนี่คือ JavaScript ที่มันจะผลิต

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

ขอให้สังเกตว่า TypeScript กำหนดประเภทของตัวแปรสมาชิกและพารามิเตอร์วิธีการเรียน สิ่งนี้จะถูกลบออกเมื่อแปลเป็น JavaScript แต่ใช้โดย IDE และคอมไพเลอร์เพื่อระบุข้อผิดพลาดเช่นการส่งประเภทตัวเลขไปยังตัวสร้าง

นอกจากนี้ยังมีความสามารถในการอนุมานประเภทที่ไม่ได้ประกาศอย่างชัดเจนเช่นจะกำหนดgreet()วิธีการส่งคืนสตริง

การดีบัก TypeScript

เบราว์เซอร์และ IDE หลายแห่งให้การสนับสนุนการดีบักโดยตรงผ่านซอร์สโค้ด ดูคำถาม Stack Overflow นี้สำหรับรายละเอียดเพิ่มเติม: การดีบักรหัส TypeScript ด้วย Visual Studio

ต้องการทราบข้อมูลเพิ่มเติมหรือไม่

ฉันเริ่มเขียนคำตอบนี้เมื่อ TypeScript ยังร้อนแรงกด ลองดูคำตอบของ Lodewijkสำหรับคำถามนี้เพื่อดูรายละเอียดเพิ่มเติมในปัจจุบัน

TypeScript สัมพันธ์กับ JavaScript

typescript เป็นพิมพ์ superset ของ JavaScript ที่รวบรวมเพื่อ JavaScript ธรรมดา - typescriptlang.org

JavaScript เป็นภาษาโปรแกรมที่พัฒนาโดยคณะกรรมการด้านเทคนิคของ EMCA 39ซึ่งเป็นกลุ่มคนที่ประกอบด้วยผู้มีส่วนได้ส่วนเสียที่แตกต่างกันจำนวนมาก TC39 เป็นคณะกรรมการที่จัดทำโดยECMA : องค์กรมาตรฐานภายใน JavaScript มีการใช้งานที่แตกต่างกันมากมายโดยผู้จำหน่ายหลายราย (เช่น Google, Microsoft, Oracle เป็นต้น) เป้าหมายของ JavaScript คือการเป็นภาษากลางของเว็บ

TypeScript เป็นชุดของภาษาจาวาสคริปต์ที่มีคอมไพเลอร์โอเพนซอร์ซเดียวและได้รับการพัฒนาโดยผู้ขายรายใหญ่: Microsoft เป้าหมายของ TypeScript คือการช่วยตรวจจับข้อผิดพลาดในช่วงต้น ๆ ของระบบการพิมพ์และเพื่อให้การพัฒนา JavaScript มีประสิทธิภาพยิ่งขึ้น

TypeScript เป็นหลักบรรลุเป้าหมายในสามวิธี:

1. รองรับคุณสมบัติ JavaScript ที่ทันสมัย - ภาษา JavaScript (ไม่ใช่รันไทม์) ได้รับการกำหนดมาตรฐานผ่านมาตรฐานECMAScript ไม่ใช่เบราว์เซอร์และ JavaScript ที่ใช้งานได้ทุกเวลาเท่านั้นที่รองรับคุณสมบัติทั้งหมดของมาตรฐาน ECMAScript ทั้งหมด (ดูภาพรวมนี้) TypeScript อนุญาตให้ใช้คุณสมบัติ ECMAScript ล่าสุดจำนวนมากและแปลเป็น ECMAScript เป้าหมายที่เก่ากว่าที่คุณเลือก (ดูรายการของเป้าหมายการคอมไพล์ภายใต้--targetตัวเลือกคอมไพเลอร์) ซึ่งหมายความว่าคุณสามารถใช้คุณสมบัติใหม่ ๆ ได้อย่างปลอดภัยเช่นโมดูลฟังก์ชั่นแลมบ์ดาชั้นเรียนผู้ดำเนินการแพร่กระจายและการทำลายล้างในขณะที่ยังคงย้อนหลังเข้ากันได้กับเบราว์เซอร์รุ่นเก่าและรันไทม์ JavaScript

2. ระบบประเภทขั้นสูง - การรองรับประเภทไม่ได้เป็นส่วนหนึ่งของมาตรฐาน ECMAScript และอาจจะไม่เกิดจากธรรมชาติที่ถูกตีความแทนที่จะเป็นธรรมชาติของ JavaScript ระบบประเภทของ TypeScript นั้นอุดมสมบูรณ์อย่างเหลือเชื่อและรวมถึง: อินเตอร์เฟส, enums, ประเภทไฮบริด, ชื่อสามัญ, ยูเนี่ยน / ประเภทสี่แยก, ตัวดัดแปลงการเข้าถึงและอีกมากมาย เว็บไซต์อย่างเป็นทางการของ typescript ให้ภาพรวมของคุณสมบัติเหล่านี้ ระบบประเภทของ typescript นั้นมีความเท่าเทียมกับภาษาที่พิมพ์อื่น ๆ ส่วนใหญ่และในบางกรณีอาจมีประสิทธิภาพมากกว่า

3. การสนับสนุนเครื่องมือสำหรับนักพัฒนา - คอมไพเลอร์ของ TypeScript สามารถเรียกใช้เป็นกระบวนการพื้นหลังเพื่อสนับสนุนการคอมไพล์ที่เพิ่มขึ้นและการรวม IDE ซึ่งคุณสามารถนำทางได้ง่ายขึ้นระบุปัญหาตรวจสอบความเป็นไปได้และปรับฐานโค้ดของคุณใหม่

ความสัมพันธ์ของ TypeScript กับภาษาอื่น ๆ ที่ใช้ภาษาจาวาสคริปต์

TypeScript มีปรัชญาที่เป็นเอกลักษณ์เมื่อเทียบกับภาษาอื่น ๆ ที่รวบรวมเป็น JavaScript รหัส JavaScript เป็นรหัส TypeScript ที่ถูกต้อง TypeScript เป็นชุดของ JavaScript คุณสามารถเปลี่ยนชื่อ.jsไฟล์เป็น.tsไฟล์และเริ่มใช้งาน TypeScript ได้ (ดู "การทำงานร่วมกันของ JavaScript" ด้านล่าง) ไฟล์ TypeScript ถูกคอมไพล์ไปยัง JavaScript ที่สามารถอ่านได้ดังนั้นการโยกย้ายกลับจึงเป็นไปได้และการเข้าใจ TypeScript ที่คอมไพล์แล้วนั้นไม่ยากเลย TypeScript สร้างจากความสำเร็จของ JavaScript ในขณะที่ปรับปรุงจุดอ่อนของมัน

ในอีกด้านหนึ่งคุณมีเครื่องมือพิสูจน์ในอนาคตที่ใช้มาตรฐาน ECMAScript ที่ทันสมัยและรวบรวมลงใน JavaScript รุ่นเก่าโดย Babel เป็นเครื่องมือที่ได้รับความนิยมมากที่สุด ในอีกทางหนึ่งคุณมีภาษาที่อาจแตกต่างจาก JavaScript อย่างสิ้นเชิงซึ่งมีเป้าหมาย JavaScript เช่น CoffeeScript, Clojure, Dart, Elm, Haxe, Scala.js และโฮสต์ทั้งหมดเพิ่มเติม (ดูรายการนี้) ภาษาเหล่านี้แม้ว่าพวกเขาอาจจะดีกว่าที่อนาคตของ JavaScript อาจนำไปสู่ ​​แต่มีความเสี่ยงมากขึ้นที่จะไม่รับประกันการยอมรับล่วงหน้าสำหรับอนาคตของพวกเขา คุณอาจมีปัญหาในการค้นหานักพัฒนาที่มีประสบการณ์สำหรับบางภาษาเหล่านี้แม้ว่าภาษาที่คุณจะพบมักจะกระตือรือร้นมากกว่า การทำงานร่วมกันกับ JavaScript อาจมีส่วนเกี่ยวข้องมากกว่านี้เล็กน้อยเนื่องจากจะถูกลบออกไปจาก JavaScript จริง ๆ

TypeScript อยู่ในระหว่างสุดขั้วทั้งสองนี้ดังนั้นจึงเป็นการสร้างความเสี่ยง TypeScript ไม่ได้เป็นทางเลือกที่มีความเสี่ยงตามมาตรฐานใด ๆ ใช้ความพยายามน้อยมากหากคุณคุ้นเคยกับ JavaScript เนื่องจากไม่ใช่ภาษาที่แตกต่างอย่างสิ้นเชิงมีการรองรับการทำงานร่วมกันของ JavaScript ที่ยอดเยี่ยมและได้เห็นการยอมรับมากมายเมื่อเร็ว ๆ นี้

การพิมพ์และการอนุมานแบบคงที่เป็นทางเลือก

พิมพ์ JavaScript แบบไดนามิก ซึ่งหมายความว่า JavaScript ไม่ทราบว่าตัวแปรชนิดใดจนกว่าจะมีการสร้างอินสแตนซ์ในขณะใช้งานจริง นี่ก็หมายความว่ามันอาจจะสายเกินไป TypeScript เพิ่มการสนับสนุนประเภทให้กับ JavaScript ข้อบกพร่องที่เกิดจากการสันนิษฐานผิด ๆ ของตัวแปรบางประเภทสามารถกำจัดให้หมดไปได้อย่างสมบูรณ์ถ้าคุณเล่นไพ่ของคุณอย่างถูกต้อง (คุณเข้มงวดกับการพิมพ์รหัสของคุณมากน้อยแค่ไหน

TypeScript ทำให้การพิมพ์ง่ายขึ้นเล็กน้อยและชัดเจนน้อยลงโดยการใช้การอนุมานประเภท ตัวอย่างเช่นvar x = "hello"ใน typescript var x : string = "hello"เป็นเช่นเดียวกับ ชนิดถูกอนุมานจากการใช้งาน แม้ว่าคุณจะไม่ได้พิมพ์ประเภทอย่างชัดเจนพวกเขายังคงอยู่ที่นั่นเพื่อให้คุณประหยัดจากการทำบางสิ่งบางอย่างซึ่งอาจทำให้เกิดข้อผิดพลาดในการทำงาน

TypeScript ถูกพิมพ์เป็นทางเลือกโดยค่าเริ่มต้น ตัวอย่างเช่นfunction divideByTwo(x) { return x / 2 }ฟังก์ชั่นที่ถูกต้องใน TypeScript ซึ่งสามารถเรียกด้วยพารามิเตอร์ชนิดใด ๆแม้ว่าการเรียกมันด้วยสตริงจะทำให้เกิดข้อผิดพลาดรันไทม์ เช่นเดียวกับที่คุณคุ้นเคยกับใน JavaScript งานนี้เพราะเมื่อไม่มีประเภทที่ได้รับมอบหมายอย่างชัดเจนและชนิดไม่สามารถอนุมานเช่นในตัวอย่าง divideByTwo ที่ typescript anyจะปริยายกำหนดประเภท ซึ่งหมายความว่าลายเซ็นประเภทฟังก์ชั่น divideByTwo function divideByTwo(x : any) : anyกลายเป็นอัตโนมัติ --noImplicitAnyมีธงคอมไพเลอร์จะไม่อนุญาตพฤติกรรมนี้: การเปิดใช้งานการตั้งค่าสถานะนี้ช่วยให้คุณมีระดับความปลอดภัยที่สูงขึ้น แต่ก็หมายความว่าคุณจะต้องพิมพ์เพิ่มเติม

ประเภทมีค่าใช้จ่ายที่เกี่ยวข้องกับพวกเขา ก่อนอื่นมีเส้นโค้งการเรียนรู้และประการที่สองแน่นอนคุณจะต้องเสียเวลามากขึ้นในการตั้งค่ารหัสฐานโดยใช้การพิมพ์ที่เข้มงวดเช่นกัน จากประสบการณ์ของฉันค่าใช้จ่ายเหล่านี้คุ้มค่ากับ codebase ร้ายแรงที่คุณแบ่งปันกับผู้อื่น การศึกษาขนาดใหญ่ของภาษาการเขียนโปรแกรมและคุณภาพของรหัสใน Githubแสดงให้เห็นว่า"ภาษาที่พิมพ์แบบคงที่โดยทั่วไปมีข้อบกพร่องน้อยกว่าประเภทแบบไดนามิกและการพิมพ์ที่แข็งแกร่งดีกว่าการพิมพ์ที่อ่อนแอในเรื่องเดียวกัน"

เป็นที่น่าสนใจที่จะทราบว่ากระดาษเดียวกันนี้พบว่า TypeScript มีข้อผิดพลาดน้อยกว่า JavaScript:

สำหรับผู้ที่มีสัมประสิทธิ์เชิงบวกเราสามารถคาดหวังได้ว่าภาษามีความสัมพันธ์กับ ceteris paribus ซึ่งเป็นจำนวนที่มากขึ้นของการแก้ไขข้อบกพร่อง ภาษาเหล่านี้รวมถึง C, C ++, JavaScript , Objective-C, Php และ Python ภาษา Clojure, Haskell, Ruby, Scala และTypeScript ล้วนแต่มีค่าสัมประสิทธิ์เชิงลบซึ่งหมายความว่าภาษาเหล่านี้มีโอกาสน้อยกว่าค่าเฉลี่ยในการแก้ไขข้อบกพร่อง

การสนับสนุน IDE ขั้นสูง

ประสบการณ์การพัฒนาด้วย TypeScript เป็นการปรับปรุงที่ดีกว่า JavaScript IDE จะแจ้งให้ทราบในแบบเรียลไทม์โดยคอมไพเลอร์ TypeScript บนข้อมูลประเภทที่หลากหลาย นี่เป็นข้อได้เปรียบที่สำคัญสองประการ ตัวอย่างเช่นด้วย TypeScript คุณสามารถทำการปรับโครงสร้างใหม่ได้อย่างปลอดภัยเช่นเปลี่ยนชื่อทั่วทั้งฐานข้อมูลของคุณ เมื่อเสร็จสิ้นการโค้ดคุณสามารถรับความช่วยเหลือแบบอินไลน์ในฟังก์ชั่นที่ห้องสมุดอาจมีให้ ไม่จำเป็นต้องจำไว้หรือค้นหาพวกเขาในการอ้างอิงออนไลน์ ข้อผิดพลาดในการรวบรวมมีการรายงานโดยตรงใน IDE ด้วยเส้นสีแดงไก่เขี่ยขณะที่คุณกำลังเข้ารหัส ทั้งหมดนี้ช่วยให้ได้รับผลผลิตที่สำคัญเมื่อเทียบกับการทำงานกับ JavaScript หนึ่งสามารถใช้เวลาในการเข้ารหัสเพิ่มเติมและลดเวลาในการดีบัก

มี IDE หลากหลายประเภทที่รองรับการใช้งาน TypeScript เช่น Visual Studio Code, WebStorm, Atom และ Sublime

การตรวจสอบ null อย่างเข้มงวด

ข้อผิดพลาดรันไทม์ของแบบฟอร์มcannot read property 'x' of undefinedหรือundefined is not a functionเกิดจากข้อบกพร่องในรหัส JavaScript TypeScript ที่ไม่อยู่ในกล่องจะลดความน่าจะเป็นของข้อผิดพลาดประเภทนี้ไปแล้วเนื่องจากไม่สามารถใช้ตัวแปรที่ไม่รู้จักกับคอมไพเลอร์ TypeScript (ยกเว้นคุณสมบัติของanyตัวแปรที่พิมพ์) ยังคงเป็นไปได้แม้ว่าจะใช้ตัวแปรที่ตั้งค่าไว้undefinedอย่างไม่เหมาะสม อย่างไรก็ตามด้วย TypeScript เวอร์ชัน 2.0 คุณสามารถกำจัดข้อผิดพลาดประเภทเหล่านี้ทั้งหมดเข้าด้วยกันผ่านการใช้งานประเภทที่ไม่เป็นโมฆะ งานนี้เป็นดังนี้:

ด้วยการเปิดใช้งานการตรวจสอบ null อย่างเข้มงวด (การ--strictNullChecksตั้งค่าสถานะคอมไพเลอร์) คอมไพเลอร์ TypeScript จะไม่อนุญาตให้undefinedถูกกำหนดให้กับตัวแปรเว้นแต่คุณจะประกาศอย่างชัดเจนว่าเป็นประเภท nullable ตัวอย่างเช่นlet x : number = undefinedจะส่งผลให้เกิดข้อผิดพลาดในการรวบรวม เหมาะอย่างยิ่งกับทฤษฎีประเภทเนื่องจากundefinedไม่ได้เป็นจำนวนมาก หนึ่งสามารถกำหนดxให้เป็นประเภทผลรวมของnumberและการแก้ไขนี้:undefinedlet x : number | undefined = undefined

เมื่อชนิดเป็นที่รู้จักกันเป็นโมฆะความหมายมันเป็นประเภทที่สามารถเป็นของค่าnullหรือundefinedคอมไพเลอร์ TypeScript สามารถตรวจสอบผ่านการวิเคราะห์ประเภทตามการควบคุมการไหลไม่ว่ารหัสของคุณสามารถใช้ตัวแปรได้อย่างปลอดภัยหรือไม่ กล่าวอีกนัยหนึ่งเมื่อคุณตรวจสอบตัวแปรundefinedผ่านตัวอย่างเช่นifข้อความสั่งคอมไพเลอร์ TypeScript จะอนุมานว่าประเภทในสาขานั้นของโฟลว์การควบคุมของโค้ดของคุณนั้นไม่มีค่าว่างอีกต่อไปและสามารถใช้งานได้อย่างปลอดภัย นี่คือตัวอย่างง่ายๆ:

let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.

ในระหว่างการสร้างผู้ออกแบบร่วมประชุม 2016 ของ TypeScript Anders Hejlsberg ให้คำอธิบายโดยละเอียดและสาธิตคุณสมบัตินี้: วิดีโอ (ตั้งแต่ 44:30 - 56:30 น.)

การรวบรวม

ในการใช้ TypeScript คุณต้องมีกระบวนการบิลด์เพื่อคอมไพล์โค้ด JavaScript กระบวนการสร้างโดยทั่วไปใช้เวลาเพียงไม่กี่วินาทีขึ้นอยู่กับขนาดโครงการของคุณ คอมไพเลอร์ TypeScript รองรับการคอมไพล์ที่เพิ่มขึ้น ( --watchแฟล็กคอมไพเลอร์) เพื่อให้การเปลี่ยนแปลงที่ตามมาทั้งหมดสามารถรวบรวมได้ด้วยความเร็วที่สูงขึ้น

คอมไพเลอร์ TypeScript สามารถ inline แหล่งข้อมูลแผนที่ในไฟล์. js ที่สร้างขึ้นหรือสร้างไฟล์. map ที่แยกต่างหาก ข้อมูลแผนที่ต้นทางสามารถใช้โดยการดีบักโปรแกรมอรรถประโยชน์เช่น Chrome DevTools และ IDE อื่น ๆ เพื่อเชื่อมโยงบรรทัดใน JavaScript กับรายการที่สร้างขึ้นใน TypeScript สิ่งนี้ทำให้คุณสามารถตั้งค่าเบรกพอยต์และตรวจสอบตัวแปรระหว่างรันไทม์โดยตรงบนโค้ด TypeScript ของคุณ ข้อมูลแผนที่ที่มาทำงานได้ค่อนข้างดีก่อนที่จะถึง TypeScript แต่การดีบัก TypeScript นั้นโดยทั่วไปไม่ค่อยดีเท่าเมื่อใช้ JavaScript โดยตรง ใช้ thisคำหลักตัวอย่างเช่น เนื่องจากความหมายที่เปลี่ยนแปลงของthisคำหลักรอบการปิดตั้งแต่ ES2015 thisอาจมีอยู่จริงในระหว่างรันไทม์เป็นตัวแปรที่เรียกว่า_this(ดูคำตอบนี้) สิ่งนี้อาจทำให้คุณสับสนระหว่างการดีบัก แต่โดยทั่วไปจะไม่เกิดปัญหาหากคุณรู้หรือตรวจสอบรหัส JavaScript ควรสังเกตว่า Babel ประสบปัญหาประเภทเดียวกัน

มีเทคนิคอื่น ๆ ไม่กี่คอมไพเลอร์ typescript สามารถทำเช่นการสร้างรหัสที่ขัดขวางการขึ้นอยู่กับมีตกแต่ง , การสร้างรหัสโหลดโมดูลโมดูลสำหรับระบบที่แตกต่างกันและแยกJSX อย่างไรก็ตามคุณอาจต้องใช้เครื่องมือสร้างนอกเหนือจากคอมไพเลอร์ typescript ตัวอย่างเช่นถ้าคุณต้องการบีบอัดรหัสของคุณคุณจะต้องเพิ่มเครื่องมืออื่น ๆ ในกระบวนการสร้างของคุณให้ทำ

มีปลั๊กอินการรวบรวม TypeScript สำหรับWebpack , Gulp , Gruntและเครื่องมือสร้าง JavaScript อื่น ๆ เอกสารประกอบ TypeScript มีส่วนในการรวมกับเครื่องมือสร้างครอบคลุมพวกเขาทั้งหมด คุณยังสามารถใช้linterในกรณีที่คุณต้องการตรวจสอบเวลาสร้างเพิ่มเติม นอกจากนี้ยังมีโครงการเมล็ดพันธุ์จำนวนมากที่จะให้คุณเริ่มต้นกับ TypeScript ร่วมกับเทคโนโลยีอื่น ๆ เช่น Angular 2, React, Ember, SystemJS, Webpack, Gulp และอื่น ๆ

การทำงานร่วมกันของ JavaScript

เนื่องจาก TypeScript เกี่ยวข้องกับ JavaScript อย่างใกล้ชิดจึงมีความสามารถในการทำงานร่วมกันได้ดี แต่จำเป็นต้องมีการทำงานเพิ่มเติมเพื่อทำงานกับไลบรารี JavaScript ใน TypeScript คำจำกัดความ typescriptมีความจำเป็นเพื่อให้คอมไพเลอร์ typescript เข้าใจว่าการเรียกฟังก์ชันเช่น_.groupByหรือangular.copyหรือ$.fadeOutไม่ได้อยู่ในงบที่ผิดกฎหมายจริง คำจำกัดความสำหรับฟังก์ชั่นเหล่านี้จะอยู่ใน.d.tsไฟล์

รูปแบบที่ง่ายที่สุดที่คำนิยามสามารถทำได้คืออนุญาตให้ใช้ตัวระบุในทุกทาง ตัวอย่างเช่นเมื่อใช้Lodashไฟล์คำจำกัดความบรรทัดเดียวdeclare var _ : anyจะช่วยให้คุณสามารถเรียกใช้ฟังก์ชันใด ๆ ที่คุณต้องการ_แต่แน่นอนว่าคุณยังสามารถทำผิดพลาดได้: _.foobar()จะเป็นการเรียกใช้ TypeScript ที่ถูกกฎหมาย แต่แน่นอน สายผิดกฎหมายในเวลาทำงาน หากคุณต้องการการสนับสนุนประเภทที่เหมาะสมและการเติมโค้ดให้สมบูรณ์ไฟล์คำจำกัดความของคุณจะต้องแม่นยำยิ่งขึ้น (ดูตัวอย่างคำจำกัดความของ lodash )

โมดูล Npmที่มาพร้อมกับข้อกำหนดชนิดล่วงหน้าของตัวเองจะเข้าใจโดยอัตโนมัติโดยคอมไพเลอร์ TypeScript (ดูเอกสารประกอบ ) สำหรับห้องสมุด JavaScript กึ่งยอดนิยมอื่น ๆ ที่ไม่ได้มีคำจำกัดความของตัวเองใครบางคนที่นั่นได้ทำคำจำกัดความประเภทแล้วผ่านโมดูล npm อื่น โมดูลเหล่านี้จะมีคำนำหน้าด้วย "@ ประเภท /" และมาจากที่เก็บ Github เรียกDefinitelyTyped

มีหนึ่ง caveat: คำจำกัดความประเภทจะต้องตรงกับรุ่นของห้องสมุดที่คุณใช้ในเวลาทำงาน หากไม่มี TypeScript อาจไม่อนุญาตให้คุณเรียกใช้ฟังก์ชันหรือยกเลิกการพิจารณาตัวแปรที่มีอยู่หรืออนุญาตให้คุณเรียกใช้ฟังก์ชันหรือยกเลิกการพิจารณาตัวแปรที่ไม่มีอยู่เพียงเพราะประเภทไม่ตรงกับเวลาทำงานในเวลารวบรวม . ดังนั้นให้แน่ใจว่าคุณโหลดคำจำกัดความประเภทที่ถูกต้องสำหรับเวอร์ชันที่ถูกต้องของไลบรารีที่คุณใช้อยู่

พูดตามตรงมีความยุ่งยากเล็กน้อยในเรื่องนี้และอาจเป็นหนึ่งในเหตุผลที่คุณไม่ได้เลือก TypeScript แต่แทนที่จะไปหาสิ่งที่เหมือน Babel ที่ไม่ต้องทนทุกข์จากการต้องพิมพ์คำจำกัดความเลย ในทางกลับกันถ้าคุณรู้ว่าคุณกำลังทำอะไรคุณสามารถเอาชนะปัญหาประเภทใด ๆ ที่เกิดจากไฟล์คำจำกัดความไม่ถูกต้องหรือหายไปได้อย่างง่ายดาย

การแปลงจาก JavaScript เป็น TypeScript

.jsไฟล์ใด ๆ ที่สามารถเปลี่ยนชื่อเป็น.tsไฟล์และวิ่งผ่านคอมไพเลอร์ TypeScript เพื่อรับ syntactically รหัส JavaScript เดียวกับการส่งออก (ถ้ามันถูกต้อง syntactically ในตอนแรก) แม้เมื่อคอมไพเลอร์ TypeScript ได้รับข้อผิดพลาดในการรวบรวมก็จะยังคงผลิต.jsไฟล์ มันยังสามารถรับ.jsไฟล์เป็นอินพุตด้วย--allowJsแฟล็ก สิ่งนี้ช่วยให้คุณเริ่มต้นด้วย TypeScript ได้ทันที น่าเสียดายที่ข้อผิดพลาดในการรวบรวมมีแนวโน้มที่จะเกิดขึ้นในตอนแรก เราจำเป็นต้องจำไว้ว่าสิ่งเหล่านี้ไม่ใช่ข้อผิดพลาดที่แสดงให้เห็นอย่างที่คุณคุ้นเคยกับคอมไพเลอร์อื่น ๆ

ข้อผิดพลาดในการรวบรวมที่ได้รับในตอนแรกเมื่อแปลงโครงการ JavaScript เป็นโครงการ TypeScript จะไม่สามารถหลีกเลี่ยงได้โดยธรรมชาติของ TypeScript TypeScript ตรวจสอบรหัสทั้งหมดเพื่อความถูกต้องและจำเป็นต้องทราบเกี่ยวกับฟังก์ชันและตัวแปรทั้งหมดที่ใช้ ดังนั้นคำจำกัดความประเภทจำเป็นต้องมีอยู่สำหรับพวกเขาทั้งหมดมิฉะนั้นข้อผิดพลาดในการรวบรวมจะเกิดขึ้น ดังที่กล่าวไว้ในบทด้านบนสำหรับเฟรมเวิร์ก JavaScript ใด ๆ ที่มี.d.tsไฟล์ที่สามารถรับได้ง่ายด้วยการติดตั้งแพคเกจ DefinitelyTyped. อย่างไรก็ตามอาจเป็นไปได้ว่าคุณใช้ห้องสมุดที่ไม่ชัดเจนซึ่งไม่มีคำจำกัดความของ TypeScript ให้ใช้หรือคุณได้ทำการเติมจาวาสคริปต์พื้นฐานแล้ว ในกรณีดังกล่าวคุณต้องระบุคำจำกัดความประเภทสำหรับบิตเหล่านี้เพื่อให้ข้อผิดพลาดในการรวบรวมหายไป เพียงแค่สร้าง.d.tsไฟล์และรวมไว้ในอาเรย์ของ tsconfig.json filesเพื่อให้มันถูกพิจารณาโดยคอมไพเลอร์ TypeScript เสมอ มันประกาศบิตที่ typescript anyไม่ทราบเกี่ยวกับชนิด เมื่อคุณกำจัดข้อผิดพลาดทั้งหมดแล้วคุณสามารถแนะนำการพิมพ์ไปยังส่วนเหล่านั้นตามความต้องการของคุณ

งานบางอย่างใน (อีกครั้ง) การกำหนดค่าการสร้างไปป์ไลน์ของคุณจะต้องได้รับ TypeScript ในการสร้างไปป์ไลน์ ดังที่ได้กล่าวไว้ในบทเกี่ยวกับการรวบรวมมีทรัพยากรที่ดีมากมายอยู่ในนั้นและฉันขอแนะนำให้คุณค้นหาโครงการเมล็ดพันธุ์ที่ใช้การผสมผสานของเครื่องมือที่คุณต้องการทำงานด้วย

อุปสรรค์ที่ใหญ่ที่สุดคือช่วงการเรียนรู้ ฉันแนะนำให้คุณเล่นกับโปรเจ็กต์เล็ก ๆ ในตอนแรก ดูวิธีการทำงานวิธีการสร้างไฟล์ที่ใช้วิธีการกำหนดค่าวิธีการทำงานใน IDE ของคุณโครงสร้างโครงสร้างเครื่องมือที่ใช้ ฯลฯ การแปลง codebase JavaScript ขนาดใหญ่เป็น TypeScript ทำได้เมื่อคุณรู้ คุณกำลังทำอะไรอยู่. อ่านบล็อกนี้สำหรับการแปลงบรรทัด 600k เป็น typescript ใน 72 ชั่วโมง ) เพียงให้แน่ใจว่าคุณเข้าใจภาษาได้ดีก่อนที่จะกระโดด

การรับเป็นบุตรบุญธรรม

TypeScript เป็นโอเพ่นซอร์ส (Apache 2 ลิขสิทธิ์ให้ดูGitHub ) และได้รับการสนับสนุนจาก Microsoft Anders Hejlsbergสถาปนิกหลักของ C # กำลังเป็นหัวหอกในโครงการ มันเป็นโครงการที่ใช้งานมาก ทีม TypeScript ได้เปิดตัวฟีเจอร์ใหม่มากมายในช่วงไม่กี่ปีที่ผ่านมาและยังมีแผนการที่ยอดเยี่ยมอีกมากมายที่ยังคงวางแผนมา (ดูแผนที่ )

ข้อเท็จจริงบางประการเกี่ยวกับการยอมรับและความนิยม:

• ในแบบสำรวจนักพัฒนา StackOverflow 2017 TypeScript เป็นตัวแปลภาษา JavaScript ที่ได้รับความนิยมมากที่สุด (อันดับที่ 9 โดยรวม) และได้รับรางวัลที่สามในประเภทภาษาการเขียนโปรแกรมที่เป็นที่ชื่นชอบมากที่สุด
• ในปี 2018 การสำรวจสถานะ js ของ TypeScript ได้รับการประกาศให้เป็นหนึ่งในสองผู้ชนะที่ยิ่งใหญ่ในหมวดหมู่รสชาติของ JavaScript (โดย ES6 เป็นอีกหนึ่ง)
• ใน2019 StackOverlow deverloper สำรวจ TypeScript เพิ่มขึ้นเป็นอันดับที่ 9 ของภาษาที่นิยมมากที่สุดในหมู่นักพัฒนามืออาชีพแซงทั้ง C และ C ++ มันเกิดขึ้นที่สามในหมู่ภาษาที่รักมากที่สุด

TypeScript ทำสิ่งที่คล้ายกับที่น้อยกว่าหรือ sass สำหรับ CSS มันเป็นชุดสุดยอดของมันซึ่งหมายความว่าทุกรหัส JS ที่คุณเขียนเป็นรหัส TypeScript ที่ถูกต้อง นอกจากนี้คุณยังสามารถใช้สินค้าอื่น ๆ ที่มันเพิ่มเข้าไปในภาษาและรหัส transpiled จะเป็น js ที่ถูกต้อง คุณยังสามารถตั้งค่ารุ่น JS ที่คุณต้องการรหัสผลลัพธ์ของคุณ

TypeScript ปัจจุบันเป็นชุดสุดยอดของ ES2015 ดังนั้นอาจเป็นทางเลือกที่ดีในการเริ่มเรียนรู้คุณสมบัติ js ใหม่และ transpile ให้เป็นมาตรฐานที่จำเป็นสำหรับโครงการของคุณ

" TypeScript Fundamentals " - หลักสูตรวิดีโอของ Pluralsight โดยDan WahlinและJohn Papaนั้นได้รับการอัปเดตที่ดีมากในปัจจุบัน (25 มีนาคม 2016) เพื่อให้สะท้อนถึง TypeScript 1.8 บทนำของ typescript

สำหรับฉันคุณสมบัติที่ดีจริง ๆ นอกเหนือจากความเป็นไปได้ที่ดีสำหรับ intellisense คือคลาส , อินเทอร์เฟซ , โมดูล , ความง่ายในการใช้ AMD และความเป็นไปได้ที่จะใช้ดีบัก Visual Studio Typescript เมื่อเรียกใช้ด้วย IE

ในการสรุป : หากใช้ตามวัตถุประสงค์แล้ว typescript สามารถทำให้การเขียนโปรแกรม JavaScript เชื่อถือได้มากขึ้นและง่ายขึ้น มันสามารถเพิ่มผลผลิตของโปรแกรมเมอร์ JavaScript อย่างมีนัยสำคัญมากกว่า SDLC แบบเต็ม

Ecma script 5 (ES5) ซึ่งเบราว์เซอร์ทั้งหมดสนับสนุนและเตรียมคอมไพล์แล้ว ES6 / ES2015 และ ES / 2016 มาในปีนี้ด้วยการเปลี่ยนแปลงมากมายดังนั้นเพื่อให้ปรากฏการเปลี่ยนแปลงเหล่านี้มีบางสิ่งที่ควรคำนึงถึง TypeScript

• TypeScript คือประเภท -> หมายถึงเราต้องกำหนดประเภทข้อมูลของแต่ละคุณสมบัติและวิธีการ ถ้าคุณรู้ C # แล้ว typescript นั้นเข้าใจง่าย

•ข้อได้เปรียบที่สำคัญของ TypeScript คือเราระบุตัวตนประเภทปัญหาที่เกี่ยวข้องก่อนไปผลิต วิธีนี้ช่วยให้การทดสอบหน่วยล้มเหลวหากมีชนิดไม่ตรงกันใด ๆ