json - จุดประสงค์ของ "resolveJsonModule"?

การตั้งค่าที่ฉันอ้างถึงจะแสดงในโค้ดตัวอย่างด้านล่าง

{
  "compilerOptions": {
    "resolveJsonModule": true,
  }
}

ฉันไม่ค่อยเข้าใจว่าทำไมวิศวกรภาษา TS ถึงเพิ่มแฟล็กสำหรับ "resolveJsonModule" ล่ะ? สภาพแวดล้อมจะสนับสนุนการแก้ไข JSON เป็นโมดูลผ่านคำสั่ง import (หรือวิธี require()) หรือไม่ก็ไม่สนับสนุน ทำไมต้องมายุ่งยากเพิ่มอีก?

คำตอบ #1

บริบท

ในทางประวัติศาสตร์ Node ได้รวมตัวโหลด JSON แบบพิเศษ (ไม่เกี่ยวข้องกับมาตรฐาน ECMA) เพื่ออนุญาตให้นำเข้าข้อมูล JSON เฉพาะในโหมด CommonJS เท่านั้น

การนำเข้าแบบมาตรฐาน ของ สิ่งใดก็ตาม (โมดูล ES) เป็นปรากฏการณ์ที่ค่อนข้างใหม่ใน ECMAScript การนำเข้าข้อความไฟล์ที่มี JSON ที่ถูกต้อง โดยการแปลงเป็นข้อมูล JS แบบเนทีฟ ("การนำเข้า JSON") ถูกอธิบายไว้ในข้อเสนอที่ยังอยู่ในขั้นตอนที่ 3 เท่านั้น

อย่างไรก็ตาม ในช่วงหลังมานี้มีความเคลื่อนไหวเกี่ยวกับการดำเนินการตามข้อเสนอที่กล่าวมาข้างต้น:

• V8 ได้นำมันมาใช้ในเดือนมิถุนายน 2021 (Chrome 91+)
• TypeScript v4.5.0 นำไปใช้ในเดือนพฤศจิกายน 2021
• Deno v1.17.0 ได้ใช้งานในเดือนธันวาคม 2021
• Node LTS v16.14.0 ได้นำมันไปใช้ในเดือนกุมภาพันธ์ 2022 (อยู่เบื้องหลังธง CLI --experimental-json-modules)

TypeScript

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

ทางเลือก

รันไทม์ JS ทุกตัวมีทางเลือกแทนคำสั่ง import สำหรับการนำเข้าข้อมูล JSON ในรูปข้อความ (ซึ่งสามารถถูกแยกวิเคราะห์โดยใช้ JSON.parse) และไม่มีตัวใดที่ต้องกำหนดค่าคอมไพเลอร์ตามที่คุณถามมา:

หมายเหตุ: ข้อมูลที่ถูกแยกวิเคราะห์จากสตริง JSON ที่นำเข้าด้วยวิธีเหล่านี้จะไม่เข้าร่วมในความสามารถการอนุมานประเภท "อัตโนมัติ" ของโมดูลคอมไพเลอร์กราฟ เนื่องจากพวกมันไม่เป็นส่วนหนึ่งของกราฟการคอมไพล์ ดังนั้นพวกมันจะถูกกำหนดประเภทเป็น any (หรืออาจเป็น unknown ในการตั้งค่าที่เข้มงวดมาก)

• เบราว์เซอร์และ Deno: window.fetch
• Deno: Deno.readTextFile
• โหนด: fs.readFile

นอกจากนี้ เนื่องจาก JSON (JavaScript Object Notation) ทั้งหมดเป็น JS ที่ถูกต้อง คุณสามารถเพิ่มข้อมูลในไฟล์ JSON ของคุณด้วย export default จากนั้นบันทึกไฟล์เป็น data.js แทนที่จะเป็น data.json แล้วนำเข้าไฟล์เป็นโมดูลมาตรฐานได้ดังนี้: import { default as data } from "./data.js";.

โน้ตสุดท้ายเกี่ยวกับประเภทที่สันนิษฐาน:

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