การวิเคราะห์แบบคงที่

การวิเคราะห์แบบคงที่เป็นการทดสอบประเภทหนึ่งที่ให้การตรวจสอบอัตโนมัติเกี่ยวกับ โดยไม่ต้องเรียกใช้โค้ดจริง หรือไม่ต้องเขียนการทดสอบอัตโนมัติ คุณได้ อาจเคยเห็นการทดสอบประเภทนี้แล้วหากคุณใช้ 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
โค้ดจาก ตัวอย่างก่อนหน้า โดยแสดงใน IDE พร้อมด้วยข้อความแสดงข้อผิดพลาดใน ป๊อปอัป
VSCode ระบุว่าคุณได้ส่งค่าที่ไม่ถูกต้อง ประเภท

ท้ายที่สุดแล้ว เป้าหมายของการใช้ 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 เพียงแค่ระบุประเภทตัวแปรทั้งหมดเท่านั้น