การวิเคราะห์แบบคงที่เป็นการทดสอบประเภทหนึ่งที่ให้การตรวจสอบอัตโนมัติเกี่ยวกับ โดยไม่ต้องเรียกใช้โค้ดจริง หรือไม่ต้องเขียนการทดสอบอัตโนมัติ คุณได้ อาจเคยเห็นการทดสอบประเภทนี้แล้วหากคุณใช้ IDE เช่น VSCode ซึ่งเป็นประเภท การตรวจสอบที่ดำเนินการโดย TypeScript เป็นการวิเคราะห์แบบคงที่และรายงาน ขึ้นเป็นเส้นยึกยือภายใต้ข้อผิดพลาดหรือคำเตือน
ESLint
ESLint เป็นเครื่องมือที่สามารถให้ข้อเสนอแนะเกี่ยวกับปัญหาที่อาจเกิดขึ้นใน ฐานของโค้ด ปัญหาเหล่านี้อาจเป็นประเภทปลอดภัย แต่ข้อผิดพลาดหรือลักษณะการทำงานที่ไม่เป็นไปตามมาตรฐาน ด้วยตนเอง ESLint ช่วยให้คุณใช้กฎหลายข้อที่มีการตรวจสอบ ฐานของโค้ดของคุณ รวมถึงโค้ดจำนวนมากใน "โค้ดที่แนะนำ" ตั้งค่า
ตัวอย่างที่ดีของกฎ ESLint คือ
no-unsafe-finally
กฎ ซึ่งทำให้คุณไม่สามารถเขียนข้อความที่ดัดแปลง
ควบคุมโฟลว์ภายในบล็อก finally
ซึ่งเป็นกฎที่ดีเพราะการดำเนินการนี้
เป็นวิธีที่ผิดปกติในการเขียน JavaScript ซึ่งอาจติดตามได้ยาก อย่างไรก็ตาม
สิ่งที่กระบวนการตรวจสอบโค้ดที่มีประสิทธิภาพควรสามารถตรวจพบได้
try {
const result = await complexFetchFromNetwork();
if (!result.ok) {
throw new Error("failed to fetch");
}
} finally {
// warning - this will 'overrule' the previous exception!
return false;
}
ด้วยเหตุนี้ ESLint จึงไม่ได้มาแทนที่กระบวนการตรวจสอบที่ดีต่อสุขภาพ (และรูปแบบ ที่กำหนดหน้าตาของโค้ดเบส) เพราะไม่ใช่โค้ด ตรวจจับทุกแนวทางที่แปลกใหม่ ที่นักพัฒนาซอฟต์แวร์ อาจพยายามแนะนำ ลงในฐานของโค้ด คู่มือแนวทางปฏิบัติด้านวิศวกรรมของ Google มีส่วนสั้นๆ เกี่ยวกับ "การทำให้เข้าใจง่าย"
ESLint จะช่วยให้คุณละเมิดกฎและใส่คำอธิบายประกอบโค้ดเป็น "อนุญาต" ได้ ตัวอย่างเช่น คุณสามารถ สามารถอนุญาตตรรกะก่อนหน้านี้ได้โดยการใส่คำอธิบายประกอบดังต่อไปนี้
finally {
// eslint-disable-next-line no-unsafe-finally
return false;
}
หากคุณพบว่าตัวเองทำผิดกฎอย่างต่อเนื่อง ให้ลองพิจารณาปิดกฎนั้น เหล่านี้ เครื่องมือจะกระตุ้นให้คุณเขียนโค้ดด้วยวิธีใดวิธีหนึ่ง แต่อาจมีการใช้ทีมของคุณ ในการเขียนโค้ด ด้วยวิธีการต่างๆ และตระหนักถึงความเสี่ยงของการทำงานนั้นอยู่แล้ว ของเรา
และสุดท้าย การใช้เครื่องมือวิเคราะห์แบบคงที่ในฐานของโค้ดขนาดใหญ่อาจสร้าง ของสัญญาณรบกวนที่ไม่เป็นประโยชน์ (และงานยุ่งที่ต้องเปลี่ยนโครงสร้างภายในโค้ด) แทนโค้ดที่ใช้ โอเค จึงเป็นเรื่องง่ายที่จะเปิดใช้งานตั้งแต่เนิ่นๆ ในวงจรของโปรเจ็กต์
ปลั๊กอิน ESLint สำหรับการรองรับเบราว์เซอร์
คุณสามารถเพิ่มปลั๊กอินลงใน ESLint เพื่อแจ้งการใช้ API ที่ไม่ได้ใช้ในวงกว้างได้ หรือไม่รองรับโดยรายชื่อเบราว์เซอร์เป้าหมายของคุณ Eslint-plugin-compat จะแจ้งเตือนคุณเมื่อ API ไม่พร้อมใช้งานสำหรับผู้ใช้ของคุณ ดังนั้น จะได้ไม่ต้องคอยตามหาตัวเองอยู่เสมอ
การตรวจสอบประเภทสำหรับการวิเคราะห์แบบคงที่
เมื่อเรียนรู้ JavaScript นักพัฒนาซอฟต์แวร์รายใหม่มักจะได้รับแนวคิด เป็นภาษาที่พิมพ์น้อย กล่าวคือ คุณสามารถประกาศ เป็นประเภทหนึ่ง ใช้ตำแหน่งเดียวกันสำหรับสิ่งต่างๆ แตกต่างกัน ฟีเจอร์นี้คล้ายกับ Python และภาษาสคริปต์อื่นๆ แต่ต่างจาก ภาษาที่คอมไพล์ เช่น C/C++ และ Rust
ภาษาประเภทนี้อาจเหมาะกับการเริ่มต้น ซึ่งจริงๆ แล้วก็คงไม่มีความหมาย
ความเรียบง่ายที่ทำให้ JavaScript ได้รับความนิยมอย่างมาก แต่มักเป็นจุดล้มเหลว
สำหรับโค้ดเบสบางอย่าง หรือสิ่งที่ทำให้เกิดข้อผิดพลาดที่ก่อให้เกิดความสับสน
เกิดขึ้น ตัวอย่างเช่น โดยการส่ง number
โดยที่ string
หรือประเภทออบเจ็กต์
ค่าที่พิมพ์อย่างไม่ถูกต้องนั้นสามารถกระจายผ่าน
ก่อนที่จะสร้าง TypeError
ที่สับสนในที่สุด
TypeScript
TypeScript เป็นโซลูชันที่ได้รับความนิยมมากที่สุดสำหรับการที่ JavaScript ขาดการพิมพ์ หลักสูตรนี้ใช้ประโยชน์จากกระบวนการนี้อย่างกว้างขวาง และแม้ว่าจะไม่ใช่หลักสูตรเกี่ยวกับ TypeScript นี่อาจเป็นส่วนสำคัญของกล่องเครื่องมือของคุณเนื่องจากมี การวิเคราะห์แบบคงที่
สำหรับตัวอย่างสั้นๆ นี้ โค้ดนี้ ซึ่งคาดว่าจะได้รับการติดต่อกลับที่ยอมรับ
ชื่อของstring
และอายุ number
รายการ:
const callback = (name: string, age: string): void => {
console.info(name, 'is now', age, 'years old!');
};
onBirthday(callback);
สร้างข้อผิดพลาดต่อไปนี้เมื่อเรียกใช้ผ่าน TypeScript หรือแม้แต่เมื่อวางเมาส์เหนือ ใน IDE:
bad.ts:4:12 - error TS2345: Argument of type '(name: string, age: string) => void' is not assignable to parameter of type '(name: string, age: number) => void'.
Types of parameters 'age' and 'age' are incompatible.
Type 'number' is not assignable to type 'string'.
4 onBirthday(callback);
~~~~~~~~
Found 1 error in bad.ts:4
ท้ายที่สุดแล้ว เป้าหมายของการใช้ TypeScript คือการป้องกันข้อผิดพลาดเช่นนี้
อายุควรเป็น number
ไม่ใช่ string
กำลังคืบหน้าเข้าไปในโปรเจ็กต์ของคุณ ช่วงเวลานี้
อาจทำให้ตรวจพบข้อผิดพลาดได้ยากหากใช้การทดสอบประเภทอื่นๆ
ยิ่งไปกว่านั้น ระบบประเภทสามารถให้ข้อเสนอแนะได้ก่อนที่จะเขียนการทดสอบ
ซึ่งจะทำให้กระบวนการเขียนโค้ดง่ายขึ้นด้วยการให้ความคิดเห็นตั้งแต่เนิ่นๆ
เกี่ยวกับข้อผิดพลาดประเภท ขณะที่คุณพัฒนาซอฟต์แวร์ ไม่ใช่เมื่อโค้ด
ทำงานได้ในที่สุด
ส่วนที่ท้าทายที่สุดในการใช้ TypeScript คือการตั้งค่าอย่างถูกต้อง ทุก
โปรเจ็กต์ต้องมีไฟล์ tsconfig.json
ซึ่งในขณะที่ tsc
ใช้เป็นหลัก
นอกจากนี้ ตัวเครื่องมือบรรทัดคำสั่งเองยังอ่านโดย IDE เช่น VSCode รวมถึงเครื่องมืออื่นๆ อีกมากมาย
สร้างเครื่องมือและเครื่องมือต่างๆ รวมถึง Vitest ไฟล์นี้มีหลายร้อยรายการ
ตัวเลือกและแฟล็ก อีกทั้งคุณสามารถดูแหล่งข้อมูลที่เป็นประโยชน์สำหรับการตั้งค่าได้ที่นี่
เคล็ดลับทั่วไปเกี่ยวกับ TypeScript
เมื่อตั้งค่าและใช้ TypeScript ผ่านไฟล์ tsconfig.json
ให้คง
ดังต่อไปนี้
- ตรวจสอบว่าไฟล์ต้นฉบับรวมอยู่และได้รับการตรวจสอบแล้วจริงๆ หากไฟล์ "ไม่มีข้อผิดพลาด" อย่างลึกลับ นั่นอาจเป็นเพราะไม่ได้มีการตรวจสอบ
- มีการอธิบายประเภทและอินเทอร์เฟซภายในไฟล์
.d.ts
อย่างชัดเจน ไม่ใช่ การมีคำอธิบายโดยปริยายขณะที่คุณเขียนฟังก์ชัน จะทำให้ สามารถทดสอบฐานของโค้ดได้ง่ายขึ้น เขียนคำล้อเลียนและ "ปลอม" ได้ง่ายกว่า เวอร์ชันของ เมื่ออินเทอร์เฟซที่เกี่ยวข้องชัดเจน
TypeScript โดยนัย
หนึ่งในตัวเลือกการกำหนดค่าที่มีประสิทธิภาพและมีประโยชน์มากที่สุดของ TypeScript คือ
แฟล็ก noImplicitAny
อย่างไรก็ตาม การเปิดใช้งานก็เป็นเรื่องที่ยากที่สุดเช่นกัน
โดยเฉพาะหากคุณมีฐานของโค้ดขนาดใหญ่อยู่แล้ว (แฟล็ก noImplicitAny
คือ
เปิดใช้โดยค่าเริ่มต้นหากคุณอยู่ในโหมด strict
แต่ไม่ใช่ในโหมดอื่น)
แฟล็กนี้จะทำให้ฟังก์ชันนี้แสดงผลข้อผิดพลาด
export function fibonacci(n) {
if (n <= 1) {
return 0;
} else if (n === 2) {
return 1;
}
return fibonacci(n - 1) + fibonacci(n - 2);
}
แต่ในฐานะผู้อ่าน เห็นได้ชัดเจนว่า n
ควรเป็นตัวเลข
TypeScript ยืนยันข้อมูลนี้อย่างมั่นใจไม่ได้ หากคุณใช้ VSCode ให้วางเมาส์เหนือ
ฟังก์ชันนี้จะอธิบายข้อมูลต่อไปนี้
function fibonacci(n: any): any
ตัวเรียกฟังก์ชันนี้จะสามารถส่งผ่านค่าประเภท any
ได้
(ประเภทที่อนุญาตให้ใช้ประเภทอื่นได้) ไม่ใช่แค่ number
ด้วยการเปิดใช้
noImplicitAny
คุณสามารถป้องกันโค้ดประเภทนี้ได้ในระหว่างการพัฒนา
โดยไม่จำเป็นต้องเขียนการทดสอบตรรกะทางธุรกิจที่ครอบคลุมสำหรับการส่งผ่านโค้ด
ประเภทข้อมูลผิดในบางตำแหน่ง
วิธีแก้ไขง่ายๆ ก็คือการทำเครื่องหมายทั้งอาร์กิวเมนต์ n
และประเภทการคืนสินค้าของ fibonacci
เป็น number
แฟล็ก noImplicitAny
ไม่ได้ป้องกันไม่ให้คุณเขียน any
ใน อย่างชัดแจ้ง
ฐานของโค้ด คุณยังคงเขียนฟังก์ชันที่ยอมรับหรือส่งคืนได้
ประเภท any
เพียงแค่ระบุประเภทตัวแปรทั้งหมดเท่านั้น