คุณสมบัติ '…' ไม่มีตัวเริ่มต้นและไม่ได้กำหนดไว้อย่างแน่นอนในตัวสร้าง

ในแอป Angular ของฉันฉันมีส่วนประกอบ:

import { MakeService } from './../../services/make.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-vehicle-form',
  templateUrl: './vehicle-form.component.html',
  styleUrls: ['./vehicle-form.component.css']
})
export class VehicleFormComponent implements OnInit {
  makes: any[];
  vehicle = {};

  constructor(private makeService: MakeService) { }

  ngOnInit() {
    this.makeService.getMakes().subscribe(makes => { this.makes = makes
      console.log("MAKES", this.makes);
    });
  }

  onMakeChange(){
    console.log("VEHICLE", this.vehicle);
  }
}

แต่ในคุณสมบัติ "ทำให้" ฉันมีข้อผิดพลาด ฉันไม่รู้จะทำอย่างไรกับมัน ...

ฉันคิดว่าคุณกำลังใช้ TypeScript เวอร์ชันล่าสุด โปรดดูส่วน "การเริ่มต้นคลาสที่เข้มงวด" ในไฟล์link.

มีสองวิธีในการแก้ไขปัญหานี้:

ตอบหากคุณใช้ VSCode คุณต้องเปลี่ยนเวอร์ชัน TS ที่ตัวแก้ไขใช้

B. เพียงเริ่มต้นอาร์เรย์เมื่อคุณประกาศภายในตัวสร้าง

makes: any[] = [];

constructor(private makeService: MakeService) { 
   // Initialization inside the constructor
   this.makes = [];
}

เพียงไปที่tsconfig.jsonและตั้งค่า

"strictPropertyInitialization": false

เพื่อกำจัดข้อผิดพลาดในการคอมไพล์

มิฉะนั้นคุณจะต้องเริ่มต้นตัวแปรทั้งหมดของคุณซึ่งน่ารำคาญเล็กน้อย

เป็นเพราะ TypeScript 2.7 มีการตรวจสอบคลาสที่เข้มงวดซึ่งคุณสมบัติทั้งหมดควรถูกเตรียมใช้งานในตัวสร้าง วิธีแก้ปัญหาคือการเพิ่ม!เป็น postfix ให้กับชื่อตัวแปร:

makes!: any[];

เราอาจได้รับข้อความProperty has no initializer and is not definitely assigned in the constructorเมื่อเพิ่มการกำหนดค่าบางอย่างในtsconfig.jsonไฟล์เพื่อให้มีการคอมไพล์โครงการ Angular ในโหมดเข้มงวด:

"compilerOptions": {
  "strict": true,
  "noImplicitAny": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictPropertyInitialization": true,

จากนั้นคอมไพเลอร์ก็บ่นว่าไม่ได้กำหนดตัวแปรสมาชิกก่อนที่จะใช้

ตัวอย่างของตัวแปรสมาชิกที่ไม่ได้กำหนดไว้ในเวลาคอมไพล์ตัวแปรสมาชิกที่มี@Inputคำสั่ง:

@Input() userId: string;

เราสามารถปิดเสียงคอมไพเลอร์ได้โดยระบุว่าตัวแปรอาจเป็นทางเลือก:

@Input() userId?: string;

แต่จากนั้นเราจะต้องจัดการกับกรณีของตัวแปรที่ไม่ได้กำหนดไว้และทำให้ซอร์สโค้ดยุ่งเหยิงด้วยคำสั่งดังกล่าว:

if (this.userId) {
} else {
}

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

วิธีบอกสิ่งนี้กับคอมไพเลอร์คือการเพิ่มไฟล์ ! definite assignment assertionดำเนินการดังใน:

@Input() userId!: string;

ตอนนี้คอมไพลเลอร์เข้าใจว่าตัวแปรนี้แม้ว่าจะไม่ได้กำหนดไว้ในเวลาคอมไพล์ แต่จะต้องถูกกำหนดที่รันไทม์และในเวลาก่อนที่จะถูกใช้

ตอนนี้ขึ้นอยู่กับแอปพลิเคชันแล้วว่าต้องกำหนดตัวแปรนี้ก่อนที่จะใช้

เพื่อเป็นการป้องกันเพิ่มเติมเราสามารถยืนยันได้ว่ามีการกำหนดตัวแปรก่อนที่เราจะใช้งาน

เราสามารถยืนยันได้ว่าตัวแปรถูกกำหนดไว้นั่นคือการเชื่อมโยงอินพุตที่ต้องการนั้นได้มาจากบริบทการเรียก

private assertInputsProvided(): void {
  if (!this.userId) {
    throw (new Error("The required input [userId] was not provided"));
  }
}

public ngOnInit(): void {
  // Ensure the input bindings are actually provided at run-time
  this.assertInputsProvided();
}

เมื่อทราบตัวแปรถูกกำหนดแล้วสามารถใช้ตัวแปรได้:

ngOnChanges() {
  this.userService.get(this.userId)
    .subscribe(user => {
      this.update(user.confirmedEmail);
    });
}

โปรดทราบว่าngOnInitเมธอดนี้ถูกเรียกใช้หลังจากความพยายามในการเชื่อมโยงอินพุตซึ่งแม้ว่าจะไม่มีการป้อนข้อมูลจริงให้กับการเชื่อมโยงก็ตาม

ในขณะที่ngOnChangesเมธอดถูกเรียกหลังจากความพยายามในการเชื่อมโยงอินพุตและเฉพาะในกรณีที่มีอินพุตจริงที่จัดเตรียมไว้ให้กับการโยง

คุณยังสามารถทำสิ่งต่อไปนี้ได้หากคุณไม่ต้องการเริ่มต้นจริงๆ

makes?: any[];

คุณจำเป็นต้องปิดการใช้งาน--strictPropertyInitializationที่ Sajeetharan อ้างถึงหรือทำสิ่งนี้เพื่อตอบสนองความต้องการในการเริ่มต้น:

makes: any[] = [];

ใน TypeScript 2.7.2 คุณจะต้องเริ่มต้นคุณสมบัติในตัวสร้างหากไม่ได้กำหนดให้ ณ จุดที่ประกาศ

หากคุณมาจาก Vue คุณสามารถลองทำสิ่งต่อไปนี้:

• เพิ่ม"strictPropertyInitialization": trueใน tsconfig.json ของคุณ

• หากคุณไม่พอใจกับการปิดการใช้งานคุณสามารถลองสิ่งนี้makes: any[] | undefinedได้ การทำเช่นนี้ต้องการให้คุณเข้าถึงคุณสมบัติด้วย?.ตัวดำเนินการcheck ( ) null เช่นthis.makes?.length

• คุณสามารถลองเช่นกันmakes!: any[];สิ่งนี้บอก TS ว่าค่าจะถูกกำหนดในรันไทม์

เมื่อคุณอัปเกรดโดยใช้ typescript@2.9.2 คอมไพเลอร์จะเข้มงวดกฎต่อไปนี้สำหรับประเภทอาร์เรย์ที่ประกาศภายในตัวสร้างคลาสคอมโพเนนต์

สำหรับการแก้ไขปัญหานี้ให้เปลี่ยนรหัสที่ประกาศในโค้ดหรือหลีกเลี่ยงการคอมไพเลอร์เพื่อเพิ่มคุณสมบัติ"tightPropertyInitialization": falseในไฟล์"tsconfig.json"และรัน npm start

การพัฒนาแอปพลิเคชันเว็บและมือถือเชิงมุมคุณสามารถไปที่ www.jtechweb.in

คุณไม่สามารถใช้การยืนยันการมอบหมายงานที่ชัดเจนได้หรือไม่? (ดูhttps://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions )

กล่าวคือประกาศทรัพย์สินเป็นmakes!: any[];The! รับรองว่า typescript จะมีค่าที่รันไทม์อย่างแน่นอน

ขออภัยฉันไม่ได้ลองสิ่งนี้ในเชิงมุม แต่มันใช้งานได้ดีสำหรับฉันเมื่อฉันมีปัญหาเดียวกันใน React

รับข้อผิดพลาดนี้ในขณะที่เพิ่ม Node ในโครงการ Angular ของฉัน -

TSError:? ไม่สามารถคอมไพล์ TypeScript: (path) /base.api.ts:19:13 - ข้อผิดพลาด TS2564: คุณสมบัติ 'apiRoot Path' ไม่มีตัวเริ่มต้นและไม่ได้กำหนดไว้อย่างแน่นอนในตัวสร้าง

apiRootPath ส่วนตัว: string;

วิธีการแก้ -

เพิ่ม"strictPropertyInitialization": falseใน 'compilerOptions' ของ tsconfig.json

package.jsonของฉัน-

"dependencies": {
    ...
    "@angular/common": "~10.1.3",
    "@types/express": "^4.17.9",
    "express": "^4.17.1",
    ...
}

อ้างอิง URL - https://www.ryadel.com/en/ts2564-ts-property-has-no-initializer-typescript-error-fix-visual-studio-2017-vs2017/

ข้อผิดพลาดนี้ถูกต้องและอาจป้องกันไม่ให้แอปของคุณขัดข้อง คุณพิมพ์makesเป็นอาร์เรย์ แต่ยังไม่สามารถกำหนดได้

คุณมี 2 ตัวเลือก (แทนที่จะปิดใช้งานเหตุผลของ typescript ที่มีอยู่ ... ):

1.ในกรณีของคุณวิธีที่ดีที่สุดคือการพิมพ์makesโดยไม่ได้กำหนดไว้

makes?: any[]
// or
makes: any[] | undefined

ในกรณีนี้คอมไพลเลอร์จะแจ้งให้คุณทราบเมื่อใดก็ตามที่คุณพยายามเข้าถึงmakesซึ่งอาจไม่ได้กำหนดไว้ ตัวอย่างเช่นหากคุณเขียน// <-- Not okบรรทัดด้านล่างก่อนที่จะgetMakesเสร็จสิ้นหรือหากgetMakesล้มเหลวข้อผิดพลาดในการคอมไพล์จะถูกโยนทิ้ง มิฉะนั้นแอปพลิเคชันของคุณจะขัดข้อง

makes[0] // <-- Not ok
makes.map(...) // <-- Not ok

if (makes) makes[0] // <-- Ok
makes?.[0] // <-- Ok
(makes ?? []).map(...) // <-- Ok

2.คุณสามารถสันนิษฐานได้ว่าจะไม่มีวันล้มเหลวและคุณจะไม่พยายามเข้าถึงก่อนเริ่มต้นด้วยการเขียนโค้ดด้านล่าง (เสี่ยง!) ดังนั้นคอมไพเลอร์จะไม่สนใจมัน

makes!: any[]

เปลี่ยน

fieldname?: any[]; 

สำหรับสิ่งนี้:

fieldname?: any;