พิมพ์คำจำกัดความในวัตถุตามตัวอักษรใน TypeScript

ในคลาส typescript เป็นไปได้ที่จะประกาศประเภทของคุณสมบัติเช่น:

class className {
  property: string;
};

ประกาศประเภทของคุณสมบัติในวัตถุตามตัวอักษรได้อย่างไร

ฉันลองใช้รหัสต่อไปนี้แล้ว แต่ไม่ได้คอมไพล์:

var obj = {
  property: string;
};

ฉันได้รับข้อผิดพลาดต่อไปนี้:

ชื่อ 'สตริง' ไม่มีอยู่ในขอบเขตปัจจุบัน

ฉันกำลังทำสิ่งผิดปกติหรือเป็นข้อผิดพลาดหรือไม่?

คุณกำลังสวยใกล้เคียงคุณก็ต้องเปลี่ยนด้วย= :คุณสามารถใช้ตัวอักษรประเภทวัตถุ (ดูมาตรา 3.5.3) หรืออินเทอร์เฟซ การใช้ตัวอักษรประเภทวัตถุใกล้เคียงกับสิ่งที่คุณมี:

var obj: { property: string; } = { property: "foo" };

แต่คุณยังสามารถใช้อินเทอร์เฟซ

interface MyObjLayout {
    property: string;
}

var obj: MyObjLayout = { property: "foo" };

อัปเดต 2019-05-15 (ปรับปรุงรูปแบบรหัสเป็นทางเลือก)

หลังจากใช้งานมาหลายปีconstและได้รับประโยชน์จากโค้ดที่ใช้งานได้มากขึ้นผมขอแนะนำให้ใช้ต่อไปนี้ในกรณีส่วนใหญ่ (เมื่อสร้างวัตถุการบังคับให้ระบบประเภทเป็นประเภทเฉพาะแทนที่จะปล่อยให้มันอนุมานประเภทมักจะบ่งชี้ว่ามีบางอย่างผิดปกติ)

แต่ฉันขอแนะนำให้ใช้constตัวแปรให้มากที่สุดแล้วเขียนวัตถุเป็นขั้นตอนสุดท้าย:

const id = GetId();
const hasStarted = true;
...
const hasFinished = false;
...
return {hasStarted, hasFinished, id};

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

เพิ่มเติม 2020-02-26

หากคุณต้องการชนิดที่คุณสามารถเริ่มต้นได้อย่างเกียจคร้าน: ทำเครื่องหมายว่าเป็นประเภทยูเนี่ยนที่สามารถยกเลิกได้ (โมฆะหรือประเภท) ระบบประเภทจะป้องกันคุณจากการใช้โดยไม่ต้องแน่ใจว่ามีค่า

ในtsconfig.jsonตรวจสอบให้แน่ใจว่าคุณเปิดใช้งานการตรวจสอบ null อย่างเข้มงวด:

"strictNullChecks": true

จากนั้นใช้รูปแบบนี้และอนุญาตให้ระบบประเภทปกป้องคุณจากการเข้าใช้ null / ไม่ได้กำหนดโดยไม่ตั้งใจ:

const state = {
    instance: null as null | ApiService,
    // OR
    // instance: undefined as undefined | ApiService,

};

const useApi = () => {
    // If I try to use it here, the type system requires a safe way to access it

    // Simple lazy-initialization 
    const api = state?.instance ?? (state.instance = new ApiService());
    api.fun();

    // Also here are some ways to only access it if it has value:

    // The 'right' way: Typescript 3.7 required
    state.instance?.fun();

    // Or the old way: If you are stuck before Typescript 3.7
    state.instance && state.instance.fun();

    // Or the long winded way because the above just feels weird
    if (state.instance) { state.instance.fun(); }

    // Or the I came from C and can't check for nulls like they are booleans way
    if (state.instance != null) { state.instance.fun(); }

    // Or the I came from C and can't check for nulls like they are booleans 
    // AND I was told to always use triple === in javascript even with null checks way
    if (state.instance !== null && state.instance !== undefined) { state.instance.fun(); }
};

class ApiService {
    fun() {
        // Do something useful here
    }
}

อย่าทำด้านล่างใน 99% ของกรณี:

อัพเดท 2016-02-10 - จัดการ TSX (ขอบคุณ @Josh)

ใช้asโอเปอเรเตอร์สำหรับ TSX

var obj = {
    property: null as string
};

ตัวอย่างที่ยาวกว่า:

var call = {
    hasStarted: null as boolean,
    hasFinished: null as boolean,
    id: null as number,
};

คำตอบเดิม

ใช้ตัวดำเนินการร่ายเพื่อทำให้รวบรัดนี้ (โดยการร่ายโมฆะเป็นประเภทที่ต้องการ)

var obj = {
    property: <string> null
};

ตัวอย่างที่ยาวกว่า:

var call = {
    hasStarted: <boolean> null,
    hasFinished: <boolean> null,
    id: <number> null,
};

สิ่งนี้ดีกว่าการมีสองส่วน (หนึ่งเพื่อประกาศประเภทที่สองเพื่อประกาศค่าเริ่มต้น):

var callVerbose: {
    hasStarted: boolean;
    hasFinished: boolean;
    id: number;
} = {
    hasStarted: null,
    hasFinished: null,
    id: null,
};

ฉันประหลาดใจที่ไม่มีใครพูดถึงเรื่องนี้ แต่คุณสามารถสร้างอินเทอร์เฟซที่เรียกObjectLiteralว่ารับkey: valueประเภทคู่ได้string: any:

interface ObjectLiteral {
  [key: string]: any;
}

จากนั้นคุณจะใช้มันเช่นนี้

let data: ObjectLiteral = {
  hello: "world",
  goodbye: 1,
  // ...
};

โบนัสเพิ่มเติมคือคุณสามารถใช้อินเทอร์เฟซนี้ซ้ำได้หลายครั้งตามที่คุณต้องการบนวัตถุจำนวนมากที่คุณต้องการ

โชคดี.

หากคุณพยายามที่จะเขียนคำอธิบายประกอบประเภทไวยากรณ์คือ:

var x: { property: string; } = ...;

หากคุณพยายามที่จะเขียนตัวอักษรวัตถุไวยากรณ์คือ:

var x = { property: 'hello' };

รหัสของคุณพยายามใช้ชื่อประเภทในตำแหน่งค่า

ใน TypeScript ถ้าเราประกาศวัตถุแล้วเราจะใช้ไวยากรณ์ต่อไปนี้:

[access modifier] variable name : { /* structure of object */ }

ตัวอย่างเช่น:

private Object:{ Key1: string, Key2: number }

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

function foo({ bar, baz }: { bar: boolean, baz: string }) {
  // ...
}

foo({ bar: true, baz: 'lorem ipsum' });

หากคุณสมบัติของคุณมีประเภทเดียวกันคุณสามารถใช้ประเภทยูทิลิตี้ที่กำหนดไว้ล่วงหน้าRecord:

type Keys = "property" | "property2"

var obj: Record<Keys, string> = {
  property: "my first prop",
  property2: "my second prop",
};

แน่นอนคุณสามารถไปต่อและกำหนดประเภทที่กำหนดเองสำหรับค่าคุณสมบัติของคุณ:

type Keys = "property" | "property2"
type Value = "my prop" | "my other allowed prop"

var obj: Record<Keys, Value> = {
  property: "my prop",
  property2: "my second prop", // TS Error: Type '"my second prop"' is not assignable to type 'Value'.
};

// Use ..

const Per = {
  name: 'HAMZA',
  age: 20,
  coords: {
    tele: '09',
    lan: '190'
  },
  setAge(age: Number): void {
    this.age = age;
  },
  getAge(): Number {
    return age;
  }
};
const { age, name }: { age: Number; name: String } = Per;
const {
  coords: { tele, lan }
}: { coords: { tele: String; lan: String } } = Per;

console.log(Per.getAge());

ในรหัสของคุณ:

var obj = {
  myProp: string;
};

คุณกำลังสร้างวัตถุตามตัวอักษรและกำหนดสตริงตัวแปรให้กับคุณสมบัติ myProp แม้ว่าการปฏิบัติที่เลวร้ายมากนี่เป็นรหัส TS ที่ถูกต้อง (อย่าใช้สิ่งนี้!):

var string = 'A string';

var obj = {
  property: string
};

อย่างไรก็ตามสิ่งที่คุณต้องการก็คือพิมพ์ตัวอักษรของวัตถุ สามารถทำได้หลายวิธี:

อินเตอร์เฟซ:

interface myObj {
    property: string;
}

var obj: myObj = { property: "My string" };

ประเภทที่กำหนดเอง:

type myObjType = {
    property: string
};

var obj: myObjType = { property: "My string" };

ผู้ประกอบการหล่อ:

var obj = {
    myString: <string> 'hi',
    myNumber: <number> 132,
};

ประเภทวัตถุที่แท้จริง:

var obj: { property: string; } = { property: "Mystring" };