ด้วย TypeScript มีสองวิธีในการตีความประเภท null และไม่ได้กำหนด และหนึ่งในนั้นสามารถหลีกเลี่ยง ‘ไม่สามารถอ่านคุณสมบัติที่ไม่ได้กำหนด’ TypeError รันไทม์ได้

ของคุณดู : typeerror: ไม่สามารถอ่านคุณสมบัติ ‘requestcontent’ ของไม่ได้กำหนด

ในฐานะนักพัฒนา JavaScript ฉัน แน่ใจว่าคุณพบ TypeError ไม่สามารถอ่านคุณสมบัติของ undefined รันไทม์ที่น่าผิดหวัง TypeScript ช่วยให้คุณตีความประเภท null และ undefined ได้ 2 วิธี หรือที่เรียกว่า Type Check Modes และหนึ่งในนั้นสามารถหลีกเลี่ยง TypeError ที่มองข้ามไปได้อย่างง่ายดาย

จนถึง TypeScript 2.0 มีโหมดตรวจสอบเพียงประเภทเดียว – ปกติ – และถือว่าnull และ ไม่ได้กำหนดเป็นประเภทย่อยของประเภทอื่นๆ ทั้งหมด ซึ่งหมายความว่าค่า null และ undefined เป็นค่าที่ถูกต้องสำหรับทุกประเภท

TypeScript 2.0 เปิดตัว โหมดตรวจสอบประเภทที่เข้มงวด (เรียกอีกอย่างว่าโหมดตรวจสอบค่าว่างที่เข้มงวด) การตรวจสอบประเภทที่เข้มงวดนั้นแตกต่างจากการตรวจสอบประเภทปกติเนื่องจากจะพิจารณาประเภท null และ ไม่ได้กำหนด ของตัวเอง

ฉันจะแสดงให้คุณเห็นว่า Regular Type Check จัดการกับ undefined อย่างไร (เช่นเดียวกับ null) และวิธีที่ Strict Type Check ป้องกันไม่ให้คุณแนะนำพฤติกรรมที่ไม่ต้องการในโค้ดของเรา เช่น TypeError ที่น่าอับอาย อ่านคุณสมบัติของไม่ได้กำหนด.

เมื่อไม่ได้กำหนดจะกลายเป็นปัญหา

ฟังก์ชัน translatePowerLevel ด้านล่างใช้ตัวเลขเป็นอาร์กิวเมนต์และส่งกลับสตริง หนึ่ง, สอง, หลายรายการ หรือ มากกว่า 9000!< /code>.

ฟังก์ชัน translatePowerLevel(powerLevel: number): string {

ถ้า (powerLevel === 1) {
คืนค่า 'หนึ่ง';
}
ถ้า (ระดับพลังงาน === 2) {
ส่งคืน 'สอง';
}
if (powerLevel > 2 && powerLevel <= 9000) {
ส่งคืน 'หลาย';
}
ถ้า (powerLevel > 9000) {
ส่งคืน 'มันมากกว่า 9000!';
}
}

 

อย่างไรก็ตาม รหัสนี้ไม่รองรับ 0 ซึ่งเป็นอินพุตที่ถูกต้อง ใช่ มองมาที่คุณ Yamcha

ระดับพลังของยำชา

 

เมื่อ JavaScript ถึงจุดสิ้นสุดของฟังก์ชันที่ไม่มีการส่งคืนที่ชัดเจน มันจะส่งคืน undefined.

ค่าส่งคืนของฟังก์ชัน translatePowerLevel ถูกพิมพ์อย่างชัดเจนเป็น string แต่อาจส่งคืน undefined เมื่ออาร์กิวเมนต์ powerLevel< /code> มีค่า 0 ทำไม TypeScript จึงไม่ทำให้เกิดข้อผิดพลาด

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

อีกตัวอย่างหนึ่ง หากคุณกำหนด null หรือ undefined ให้กับตัวแปรขณะอยู่ในโหมดตรวจสอบประเภทปกติ TypeScript จะอนุมานว่าตัวแปรเหล่านี้เป็นประเภท ใดๆ< /code>.

const coffee = null;

const tea = ไม่ได้กำหนด;

 

การตีความ undefined หรือ null เป็นประเภทย่อยของประเภทอื่นๆ ทั้งหมดอาจทำให้เกิดปัญหารันไทม์ได้ ตัวอย่างเช่น หากคุณพยายามหาความยาวของผลลัพธ์ของ translateNumber(0) ซึ่งก็คือ undefined JavaScript จะส่ง TypeError นี้ที่รันไทม์: Cannot read คุณสมบัติของไม่ได้กำหนด (อ่าน 'ความยาว')

const powerLevel = translatePowerLevel(0); // ไม่ได้กำหนด

console.log(powerLevel.length); // Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติของไม่ได้กำหนด (อ่าน 'ความยาว')

ขออภัย โหมดตรวจสอบประเภทปกติของ TypeScript ไม่สามารถแจ้งเตือนคุณเมื่อคุณอาจทำผิดพลาด

โหมดตรวจสอบประเภทที่เข้มงวดเพื่อช่วยชีวิต

Strict Type Check Mode เปลี่ยนวิธีที่ TypeScript ตีความค่า undefined และ null แต่ก่อนอื่น มาเปิดใช้งานโหมดตรวจสอบประเภทอย่างเข้มงวด

วิธีเปิดใช้งานโหมดตรวจสอบประเภทที่เข้มงวดใน TypeScript

ในรูทของโปรเจ็กต์ของคุณ ควรมี ไฟล์ tsconfig.json นี่คือไฟล์การกำหนดค่าของ TypeScript และคุณสามารถอ่านเพิ่มเติมได้ ที่นี่

// ตัวอย่าง tsconfig.json

{
"คอมไพเลอร์ออปชั่น": {
"โมดูล": "ระบบ",
"noImplicitAny": จริง,
"ลบความคิดเห็น": จริง,
"preserveConstEnums": จริง,
"outFile": "../../build/local/tsc.js",
"sourceMap": จริง
},
"รวม": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}

ภายในคุณสมบัติ compilerOptions สิ่งที่เราต้องทำคือเพิ่มคุณสมบัติ "strictNullChecks": true

จะมีลักษณะดังนี้:

// tsconfig.json

{
"คอมไพเลอร์ออปชั่น": {
"โมดูล": "ระบบ",
"noImplicitAny": จริง,
"ลบความคิดเห็น": จริง,
"preserveConstEnums": จริง,
"outFile": "../../build/local/tsc.js",
"sourceMap": จริง,
"strictNullChecks": true
},
"รวม": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}

 

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

ข้อความแสดงข้อผิดพลาดนั้นกำลังบอกคุณว่าฟังก์ชันกำลังส่งคืน undefined โดยปริยาย แต่ประเภทการส่งคืนไม่มี undefined อยู่ในนั้น

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

คุณสามารถเพิ่มคำสั่ง return เพื่อให้ฟังก์ชันส่งคืน string (โซลูชัน #1) เสมอ หรือเปลี่ยนประเภทการส่งคืนจาก string เป็น string | ไม่ได้กำหนด (โซลูชัน #2)

จับคู่ค่าส่งคืนที่เป็นไปได้ทั้งหมด

: โซลูชัน #1

การเพิ่มคำสั่ง return เพื่อให้คืนค่าออกมาอย่างชัดเจนเสมอ - ในโค้ดด้านล่าง ขณะนี้กำลังส่งคืน ศูนย์สตริง

// โซลูชัน #1: เพิ่มคำสั่ง return เพื่อให้ส่งคืนสตริงเสมอ

ฟังก์ชัน translatePowerLevel(powerLevel: number): string {
ถ้า (powerLevel === 1) {
คืนค่า 'หนึ่ง';
}
ถ้า (ระดับพลังงาน === 2) {
ส่งคืน 'สอง';
}
if (powerLevel > 2 && powerLevel <= 9000) {
ส่งคืน 'หลาย';
}
ถ้า (powerLevel > 9000) {
ส่งคืน 'มันมากกว่า 9000!';
}
// คำสั่งส่งคืนใหม่
คืนค่า 'ศูนย์';
}

จับคู่ค่าส่งคืนที่เป็นไปได้ทั้งหมด

: โซลูชัน #2

กำหนดประเภทการส่งคืน ไม่ได้กำหนด อย่างชัดเจน ดังนั้นไม่ว่าที่ใดที่ใช้ translatePowerLevel คุณต้องจัดการค่า nullish ด้วยเช่นกัน

// โซลูชัน #2: ประเภทการส่งคืนเป็นสตริง | ไม่ได้กำหนด

ฟังก์ชัน translatePowerLevel(powerLevel: number): string | ไม่ได้กำหนด {
ถ้า (powerLevel === 1) {
คืนค่า 'หนึ่ง';
}
ถ้า (ระดับพลังงาน === 2) {
ส่งคืน 'สอง';
}
if (powerLevel > 2 && powerLevel <= 9000) {
ส่งคืน 'หลาย';
}
ถ้า (powerLevel > 9000) {
ส่งคืน 'มันมากกว่า 9000!';
}
}

หากคุณต้องคอมไพล์โค้ดต่อไปนี้อีกครั้งโดยใช้โซลูชัน #2, TypeScript จะแสดงข้อผิดพลาด Object is 'undefined'.

const powerLevel = translatePowerLevel(0); // ไม่ได้กำหนด

console.log(powerLevel.length); // วัตถุอาจเป็น 'ไม่ได้กำหนด'

เมื่อคุณเลือกโซลูชัน เช่น โซลูชัน #2 TypeScript คาดหวังให้คุณเขียนโค้ดที่จัดการค่า nullish ที่เป็นไปได้

ไม่มีเหตุผลที่จะไม่ใช้โหมดตรวจสอบประเภทที่เข้มงวด

ตอนนี้ คุณเข้าใจวิธีที่ TypeScript ตีความประเภท null และ undefined และวิธีที่คุณสามารถย้ายโครงการของคุณไปยังโหมดเข้มงวด

หากคุณกำลังเริ่มโครงการใหม่ คุณควรเปิดใช้งานโหมดตรวจสอบประเภทที่เข้มงวดตั้งแต่ต้น และในกรณีที่คุณจะย้ายจาก Regular ไปเป็น Strict Type Check ทีมของเราสามารถช่วยคุณด้วยกลยุทธ์ในการทำเช่นนี้ได้โดยไม่เจ็บปวด

ที่ Bitovi เราขอแนะนำอย่างยิ่งให้ใช้ - หรือย้ายไปยัง - โหมดตรวจสอบประเภทที่เข้มงวดสำหรับ การพัฒนาแอปพลิเคชันเชิงมุม เนื่องจากสามารถช่วยให้คุณผลิตได้ดีขึ้น เชื่อถือได้มากขึ้น รหัส. หากคุณต้องการความช่วยเหลือในการสร้างเว็บแอปที่น่าทึ่ง โปรดติดต่อเราที่ bitovi.com


ดูบทความเพิ่มเติมที่เกี่ยวข้องกับหัวข้อ typeerror: ไม่สามารถอ่านคุณสมบัติ 'requestcontent' ของ undefined

Generative Art Tutorial, Code mistake we make while creating 10000 generative NFTs / Artworks.

  • ผู้เขียน: Pioneer3D Studios
  • วันที่ส่ง: 2021-10-30
  • ความคิดเห็น: 4 ⭐ ( 8361 ความคิดเห็น )
  • ตรงกับผลการค้นหา: In Today video I will show you how to avoid some silly mistake while using the art engine, if you are designer and just want to learn about a new gig then it is good for you.
    Issues List:
    UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, scandir
    UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'path' of undefined

    Related Links:
    a) Node js: https://nodejs.org/en/
    b) VS code: https://code.visualstudio.com/
    c) GitHub Repo: https://github.com/WaqasAyubShah/MickyCol
    e) Website: https://www.forecastcreatives.com/
    Commands: You should first enter the directory in which the art engine is 
    npm install

    Node index.js

    Also you might need this
    To go to root directory: cd\\
    To leave a directory: cd..
    To enter a directory: cd (name)

    If you enjoyed this video please leave a 👍 and 🖱️ on the Subscribe button! Let us know if you have any questions in the comments below or chat with us on our Discord server. Thank you everyone!!
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    🌐 Find us on:
    ► Discord - @Wiki Noia0437
    ► Instagram - https://www.instagram.com/waqas_syedhere
    ► Facebook - https://www.facebook.com/groups/1021843348552325
    ► Twitter - https://twitter.com/waqas_syedhere
    ► Email – smwaqas.ayubshah@gmail.com
    ► LinkedIn - www.linkedin.com/in/waqassyedhere

    Code credit go to Hashlips: https://www.youtube.com/c/HashLipsNFT
    Just In Case 😉
    MY MetaMask Wallet Address: 0xC3327B63eEBA5e28AF892F91b142b6Ad409ceB90
    Phantom: 3XgLii23YX4aTaWparW3mhg68hidnHdEG9V7DonTbcsn
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    Disclaimer - This is not financial advice - please do your own research. Everything is for entertainment purposes and from our personal experience. We use Amazon affiliate links. That means if you order using the link we will get a small commission with no additional costs from you! Thank you for your support! ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    bug fix mistake nft nftcollection nfttools topfive topfivenft topfivenftcollection cryptocurrency nftexplained nfttradeexplained solananftexplained proofofwork nftprofits rarityexplained Gpuminingrigs nfttradeatHome bitcoinnft bitcoin cryptocurrency ethnft adanft solananft nfttools nftbuying nftselling nftflip
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    Keywords: hashlips art engine, generative art tutorial, nft crypto,nft collection, generative art, art engine, nft tool, nft tools, nft for beginner, non fungible token, nft token, opensea nft, non fungible, binance nft, ethernity chain, nfts meaning, nft price, foundation nft, logan paul nft, nfts crypto, most expensive nft, nft for sale, nyan cat nft.

TypeError: Cannot read property 'requestContent' of undefined. HMR. Angular

  • ผู้เขียน: stackoverflow.com
  • ความคิดเห็น: 3 ⭐ ( 7737 ความคิดเห็น )
  • ตรงกับผลการค้นหา:

Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'msie' ของ undefined - เครื่องมือ jQuery

  • ผู้เขียน: qastack.in.th
  • ความคิดเห็น: 5 ⭐ ( 4427 ความคิดเห็น )
  • ตรงกับผลการค้นหา: [พบคำตอบแล้ว!] $.browserวิธีการได้ถูกลบออก ณ jQuery 1.9 jQuery.browser() removed jQuery.browser()วิธีการได้รับการคัดค้านตั้งแต่ jQuery 1.3 และจะถูกลบออกใน 1.9 หากจำเป็นจะสามารถใช้ได้เป็นส่วนหนึ่งของปลั๊กอิน jQuery Migrate เราขอแนะนำให้ใช้การตรวจจับคุณสมบัติด้วยไลบรารีเช่น Modernizr…

TypeError: ไม่สามารถอ่านคุณสมบัติ 'findAll' ของ undefined (expressjs)

  • ผู้เขียน: th.fluffyfables.com
  • ความคิดเห็น: 5 ⭐ ( 3722 ความคิดเห็น )
  • ตรงกับผลการค้นหา: TypeError: ไม่สามารถอ่านคุณสมบัติ 'findAll' ของ undefined (expressjs) ฟังก์ชันทั้งหมด (ต่อเนื่อง) ไม่ทำงาน ข้อผิดพลาดทั้งหมด: ไม่สามารถอ่านคุณสมบัติ 'sequelize method' ... module.exports = function (

angular2: ข้อผิดพลาด: TypeError: ไม่สามารถอ่านคุณสมบัติ '...' ของ undefined

  • ผู้เขียน: wikeru.com
  • ความคิดเห็น: 4 ⭐ ( 8196 ความคิดเห็น )
  • ตรงกับผลการค้นหา: ฉันได้แนบ plunker ของชิ้นส่วนโค้ด angular2 ของฉันแล้ว ฉันต้องการพิมพ์ฟิลด์จาก JSON ของฉัน แต่ไม่สามารถพิมพ์ได้ว่าในตอนแรก Object ของฉันเป็นโมฆะและมีการเติมข้อมูลผ่าน Promise นี่คือไฟล์ส่วนประกอบของฉัน

TypeError: Cannot read property 'requestContent' of undefined · Issue #923 · stripe/stripe-node

  • ผู้เขียน: github.com
  • ความคิดเห็น: 3 ⭐ ( 7224 ความคิดเห็น )
  • ตรงกับผลการค้นหา: I have ssr-react-node-webpack application. I successfully posted transaction however I got below error ont he console. GEThttps://checkout.stripe.com/api/color?image_url=https%3A%2F%2Fsvgshare.com%2Fi%2FCUz.svg&key=pk_test_9esfXPUUapdcfg...

TypeError: ไม่สามารถอ่านคุณสมบัติ 'requestContent' ของ undefined HMR. เชิงมุม

  • ผู้เขียน: isolution.pro
  • ความคิดเห็น: 3 ⭐ ( 1938 ความคิดเห็น )
  • ตรงกับผลการค้นหา:

ดูบทความเพิ่มเติมในหมวดหมู่: เวิร์ดเพรสส์

See also  วิธีแทรกและปรับแต่งแท็กเพิ่มเติมในโพสต์บน WordPress - แท็กเพิ่มเติมไม่ทำงาน wordpress

By Admin