Maszynopis: Wpisz „ciąg | undefined „nie można przypisać do typu„ string ”

Kiedy ustawiam dowolną właściwość interfejsu jako opcjonalną, popełniam błąd jak naśladowanie podczas przypisywania jej elementu członkowskiego do innej zmiennej

TS2322: Wpisz „ciąg znaków | undefined ”nie można przypisać do typu„ string ”. Typu „undefined” nie można przypisać do typu „string”.

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 

Jak obejść ten błąd?

Możesz teraz użyć niezerowego operatora potwierdzenia, który jest tutaj dokładnie dla twojego przypadku użycia.

Mówi TypeScript, że nawet jeśli coś wygląda na to, że może być zerowe, może ci ufać, że tak nie jest:

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

Aby uniknąć błędu kompilacji, którego użyłem

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

A następnie zweryfikuj pusty ciąg.

Wiem, że to trochę późna odpowiedź, ale inny sposób niż odpowiedź Yannick https://stackoverflow.com/a/57062363/6603342 do użycia! polega na rzutowaniu go jako ciągu, w ten sposób mówiąc TypeScript, że jestem pewien, że jest to ciąg, a zatem konwertuje

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

do

let name1:string = person.name as string;

Spowoduje to, że błąd zniknie, ale jeśli przypadkiem nie jest to ciąg , otrzymasz błąd czasu wykonania, który jest jednym z powodów, dla których używamy TypeScript, aby upewnić się, że typ jest zgodny i uniknąć takich błędów w czasie kompilacji .

Począwszy od TypeScript 3.7 można używać zerowego operatora łączenia ?? . Możesz myśleć o tej funkcji jako o sposobie „powrotu” do wartości domyślnej, gdy mamy do czynienia z wartością null lub undefined

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

??Operator może zastąpić zastosowania ||podczas próby użycia wartości domyślnej i może być używany w kontaktach z logicznych, liczb itp gdzie ||nie mogą być użyte.

Począwszy od TypeScript 4 można używać ??=operatora przypisania, a ??= bktóry jest alternatywą dlaa = a ?? b;

Bardziej gotowym do produkcji sposobem radzenia sobie z tym jest faktyczna nameobecność. Zakładając, że jest to minimalny przykład większego projektu, w który zaangażowana jest grupa ludzi, nie wiesz, jak getPersonto się zmieni w przyszłości.

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

let name1: string = person.name;

Alternatywnie możesz pisać name1jako string | undefinedi obsługiwać przypadki w undefineddalszej części. Jednak zazwyczaj lepiej jest zająć się nieoczekiwanymi błędami wcześniej.

Możesz również pozwolić TypeScript wywnioskować typ, pomijając typ jawny: na przykład let name1 = person.namezapobiegnie to ponownemu name1przypisaniu jako liczby.

spróbuj wcześniej dowiedzieć się, jaka jest rzeczywista wartość. Jeśli personma ważny name, przypisz go do name1, w przeciwnym razie przypisz undefined.

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

Oto szybki sposób sprawdzenia tego, co się dzieje:

Kiedy wykonałeś następujące czynności:

Nazwa? : strunowy

Mówiłeś do TypeScript, że to opcjonalne. Niemniej jednak, kiedy to zrobiłeś:

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

Nie zostawiłeś tego wyboru. Musiałeś mieć na nim Unię odzwierciedlającą niezdefiniowany typ:

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

Korzystając z twojej odpowiedzi, mogłem naszkicować następujący, który jest w zasadzie interfejsem, klasą i obiektem. Uważam, że to podejście jest prostsze, nieważne, jeśli nie.

// 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());

Próbujesz ustawić zmienną name1, typ wiedźmy ustawiony jako ścisły ciąg (MUSI to być łańcuch) z wartością z pola obiektu name, typ wartości ustawiony jako opcjonalny ciąg (może to być ciąg lub nieokreślony, ze względu na znak zapytania). Jeśli naprawdę potrzebujesz tego zachowania, musisz zmienić jego typ name1:

let name1: string | undefined = person.name;

I będzie dobrze;

Możesz użyć NonNullabletypu narzędzia:

Przykład

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

Dokumenty .

Możesz skorzystać z opcjonalnego łańcucha Typescript. Przykład:

const name = person?.name;

Jeśli właściwość nameistnieje w personobiekcie, otrzymasz jej wartość, ale jeśli nie, to automatycznie zwróci wartość undefined.

Możesz skorzystać z tego źródła, aby lepiej zrozumieć.

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

Rozwiązanie 1: Usuń jawną definicję typu

Ponieważ getPersonjuż zwraca a Personz nazwą, możemy użyć wywnioskowanego typu.

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

let person = getPerson();

Gdybyśmy mieli zdefiniować person: Person, stracilibyśmy część informacji. Wiemy, że getPersonzwraca obiekt z wywołaną nie opcjonalną właściwością name, ale opisanie go w Persontaki sposób, aby przywrócić opcjonalność.

Rozwiązanie 2: Użyj dokładniejszej definicji

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;

Rozwiązanie 3: Przeprojektuj interfejs

Kształt, w którym wszystkie właściwości są opcjonalne, nazywany jest typem słabym i zwykle jest wskaźnikiem złego projektu. Gdybyśmy mieli wykonać namewymaganą nieruchomość, Twój problem zniknie.

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

Miałem ten sam problem.

I okazuje się, że reagują-scrips dodać "strict": truedo tsconfig.json.

Po usunięciu wszystko działa świetnie.

Edytować

Musisz ostrzec, że zmiana tej właściwości oznacza, że:

nie jest już ostrzegany o potencjalnych błędach w czasie wykonywania.

jak zauważył PaulG w komentarzach! Dziękuję Ci :)

Używaj "strict": falsetylko wtedy, gdy w pełni rozumiesz, na co wpływa!