Typescript: Type 'string | tanımsız ',' dizge 'türüne atanamaz

Bir arayüzün herhangi bir özelliğini isteğe bağlı yaptığımda, üyesini başka bir değişkene atarken aşağıdaki gibi bir hata yapıyorum

TS2322: 'string' yazın | tanımsız ',' dizge 'türüne atanamaz. 'Tanımlanmamış' türü, 'dizge' türüne atanamaz.

interface Person {
  name?:string,
  age?:string,
  gender?:string,
  occupation?:string,
}

function getPerson(){
  let person = <Person>{name:"John"};
  return person;
}
let person: Person = getPerson();
let name1:string = person.name;//<<<Error here 

Bu hatayı nasıl aşarım?

Artık tam olarak sizin kullanım durumunuz için burada bulunan boş olmayan onaylama işlecini kullanabilirsiniz.

TypeScript'e bir şeyin boş gibi görünse bile, olmadığına size güvenebileceğini söyler:

let name1:string = person.name!; 
//                            ^ note the exclamation mark here  

Kullandığım derleme hatasını önlemek için

let name1:string = person.name || '';

Ve sonra boş dizeyi doğrulayın.

Bunun biraz geç cevap olduğunu biliyorum ama yannick'in cevabının dışında başka bir yol: https://stackoverflow.com/a/57062363/6603342 ! bunu dize olarak çevirmek ve böylece TypeScript'e bunun bir dize olduğundan emin olduğumu söyleyerek

let name1:string = person.name;//<<<Error here 

-e

let name1:string = person.name as string;

Bu, hatayı ortadan kaldıracaktır, ancak herhangi bir şans eseri bu bir dize değilse , türün eşleşmesini sağlamak ve derleme zamanında bu tür hataları önlemek için TypeScript kullandığımız nedenlerden biri olan bir çalışma zamanı hatası alacaksınız .

TypeScript 3.7'den itibaren, sıfır birleştirme operatörü kullanabilirsiniz ??. Bu özelliği, null veya undefined ile uğraşırken varsayılan bir değere "geri dönmenin" bir yolu olarak düşünebilirsiniz.

let name1:string = person.name ?? '';

??Operatör kullanımlarını yerini alabilecek ||bir varsayılan değer kullanmaya çalışıyor vb Boolean, sayılar, ilgilenirken kullanılabilir olduğunda ||kullanılamaz.

TypeScript 4'ten itibaren, ??=atama operatörünü kullanabilirsiniz a ??= b.a = a ?? b;

önceden gerçek değerin ne olduğunu bulmaya çalışın. personGeçerli bir varsa name, atayın name1, yoksa atayın undefined.

let name1: string = (person.name) ? person.name : undefined;

Bunu halletmenin daha üretime hazır bir yolu, gerçekten namemevcut olmasını sağlamaktır . Bunun, bir grup insanın dahil olduğu daha büyük bir projenin minimal bir örneği olduğunu varsayarsak getPerson, gelecekte nasıl değişeceğini bilemezsiniz .

if (!person.name) {
    throw new Error("Unexpected error: Missing name");
}

let name1: string = person.name;

Alternatif olarak, yazabilirsiniz name1olarak string | undefined, ve davalarını undefineddaha da aşağı. Ancak beklenmedik hataları daha önce ele almak genellikle daha iyidir.

Ayrıca, açık türü atlayarak TypeScript'in türü çıkarmasına izin verebilirsiniz: let name1 = person.nameBu, name1örneğin, bir numara olarak yeniden atanmayı yine de engeller .

Neler olduğunu anlamanın hızlı bir yolu:

Aşağıdakileri yaptığınızda:

isim? : string

TypeScript'e isteğe bağlı olduğunu söylüyordun. Yine de yaptığınızda:

let name1 : string = person.name; //<<<Error here 

Ona bir seçenek bırakmadın. Üzerinde tanımlanmamış türü yansıtan bir Birlik olması gerekiyordu:

let name1 : string | undefined = person.name; //<<<No error here 

Cevabınızı kullanarak, temelde bir Arayüz, bir Sınıf ve bir Nesne olan aşağıdakileri çizebildim. Bu yaklaşımı daha basit buluyorum, eğer yapmazsan boşver.

// Interface
interface iPerson {
    fname? : string,
    age? : number,
    gender? : string,
    occupation? : string,
    get_person?: any
}

// Class Object
class Person implements iPerson {
    fname? : string;
    age? : number;
    gender? : string;
    occupation? : string;
    get_person?: any = function () {
        return this.fname;
    }
}

// Object literal
const person1 : Person = {
    fname : 'Steve',
    age : 8,
    gender : 'Male',
    occupation : 'IT'  
}

const p_name: string | undefined = person1.fname;

// Object instance 
const person2: Person = new Person();
person2.fname = 'Steve';
person2.age = 8;
person2.gender = 'Male';
person2.occupation = 'IT';

// Accessing the object literal (person1) and instance (person2)
console.log('person1 : ', p_name);
console.log('person2 : ', person2.get_person());

Değişken name1, cadı türü katı dizge olarak ayarlanmış (dizge OLMALIDIR) nesne alanındaki namedeğerle, cadı değer türü isteğe bağlı dizge olarak ayarlanmış (soru işareti nedeniyle dizge veya tanımsız olabilir). Bu davranışa gerçekten ihtiyacınız varsa, şu şekilde değiştirmelisiniz name1:

let name1: string | undefined = person.name;

Ve iyi olacak;

Değişken bir diziden veya yıkıcıysa, varsayılan değerleri sağlayabileceğinizi unutmayın:

const { DB_HOST = "localhost", DB_PORT: "5432" } = process.env

db.connect(DB_HOST, DB_PORT);

const connectToDb = (host = "localhost", port: "5432") => db.connect(host, port);

Typescript'in isteğe bağlı zincirlemesinden yararlanabilirsiniz. Misal:

const name = person?.name;

Özellik nesnede namemevcutsa persondeğerini alırsınız, ancak yoksa otomatik olarak tanımsız döndürür.

Daha iyi anlamak için bu kaynaktan yararlanabilirsiniz.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html

NonNullableYardımcı Program Türünü kullanabilirsiniz :

Misal

type T0 = NonNullable<string | number | undefined>;  // string | number
type T1 = NonNullable<string[] | null | undefined>;  // string[]

Dokümanlar .

1.Çözüm: Açık tür tanımını kaldırın

Yana getPersonzaten döndüren Personbir adla, biz anlaşılmaktadır türünü kullanabilirsiniz.

function getPerson(){
  let person = {name:"John"};
  return person;
}

let person = getPerson();

Tanımlayacak person: Personolsaydık, bir bilgi parçasını kaybedeceğiz. getPersonİsteğe bağlı olmayan bir özelliğe sahip bir nesne döndürdüğünü biliyoruz name, ancak onu Personisteğe bağlılığı geri getirecek şekilde tanımlayarak .

2.Çözüm: Daha kesin bir tanım kullanın

type Require<T, K extends keyof T> = T & {
  [P in K]-?: T[P]
};

function getPerson() {
  let person = {name:"John"};
  return person;
}

let person: Require<Person, 'name'> = getPerson();
let name1:string = person.name;

3. Çözüm: Arayüzünüzü yeniden tasarlayın

Tüm özelliklerin isteğe bağlı olduğu bir şekle zayıf tip denir ve genellikle kötü tasarımın bir göstergesidir. nameGerekli bir mülk yaparsak , sorununuz ortadan kalkar.

interface Person {
  name:string,
  age?:string,
  gender?:string,
  occupation?:string,
}

Aynı sorunu yaşadım.

Ben tepki-scrips eklemek öğrenmek "strict": trueiçin tsconfig.json.

Kaldırdıktan sonra her şey harika çalışıyor.

Düzenle

Bu özelliği değiştirmenin şu anlama geldiği konusunda uyarmanız gerekir:

artık potansiyel çalışma zamanı hataları hakkında uyarılmıyor.

olarak tarafından belirtildiği PaulG yorumlarda! Teşekkür ederim :)

"strict": falseSadece neyi etkilediğini tam olarak anladıysanız kullanın !