[typescript] Typescript : ‘문자열 | undefined ‘는’string ‘유형에 할당 할 수 없습니다.

Question 1

인터페이스의 속성을 선택적으로 만들면 멤버를 다른 변수에 할당하는 동안 다음과 같은 오류가 발생합니다.

TS2322 : ‘문자열 | undefined ‘는’string ‘유형에 할당 할 수 없습니다. ‘undefined’유형은 ‘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

이 오류를 어떻게 해결합니까?

Question 2

이제 사용 사례에 정확히있는 null 이 아닌 어설 션 연산자 를 사용할 수 있습니다.

TypeScript에 무언가가 null 일 수있는 것처럼 보이지만 그렇지 않다는 것을 신뢰할 수 있습니다.

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

Question 3

내가 사용한 컴파일 오류를 피하기 위해

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

그런 다음 빈 문자열의 유효성을 검사합니다.

Question 4

나는 이것이 다소 늦은 대답이라는 것을 알고 있지만 yannick의 대답 https://stackoverflow.com/a/57062363/6603342 외에 다른 방법 으로 사용합니다! 문자열로 캐스팅하여 TypeScript에 이것이 문자열임을 확신하므로

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

…에

let name1:string = person.name as string;

이렇게하면 오류가 사라지지만 만일 이것이 문자열 이 아니라면 TypeScript를 사용하여 유형이 일치하는지 확인하고 컴파일 타임에 이러한 오류를 피하는 이유 중 하나 인 런타임 오류가 발생 합니다 .

Question 5

TypeScript 3.7 부터는 nullish 병합 연산자를 사용할 수 있습니다 ??. 이 기능은 null 또는 undefined를 처리 할 때 기본값으로 “대체”하는 방법으로 생각할 수 있습니다.

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

??연산자의 용도를 대체 할 수있는 ||기본값을 사용하려고 시도하는 등 논리 값, 숫자를 처리 할 때 사용할 수있는 경우에 ||사용 할 수 없습니다.

타이프 라이터 (4)로서 당신은 사용할 수 있습니다 ??=로 할당 연산자 a ??= b에 대한 대안이다a = a ?? b;

Question 6

이를 처리하는보다 생산 준비된 방법은 실제로 name존재 하는지 확인하는 것 입니다. 이것이 사람들의 그룹이 참여하는 더 큰 프로젝트의 최소한의 예라고 가정하면 getPerson미래에 어떻게 변할 지 모릅니다 .

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

let name1: string = person.name;

또는로 입력 name1하고 더 string | undefined낮은 경우를 처리 할 수 있습니다 undefined. 그러나 일반적으로 예상치 못한 오류를 일찍 처리하는 것이 좋습니다.

또한 명시 적 유형을 생략하여 TypeScript가 유형을 유추하도록 할 수도 있습니다 . 예를 들어 let name1 = person.name여전히 name1숫자로 재 할당되는 것을 방지 합니다.

Question 7

실제 값이 무엇인지 미리 알아보십시오. 경우 person유효한있다 name,에 할당 name1, 다른 할당 undefined.

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

Question 8

상황을 파악하는 빠른 방법은 다음과 같습니다.

다음을 수행 한 경우 :

이름? : 문자열

TypeScript에게 선택 사항이라고 말하고 있습니다. 그럼에도 불구하고 다음과 같은 경우 :

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

당신은 그것을 선택하지 않았습니다. 정의되지 않은 유형을 반영하는 Union이 필요했습니다.

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

귀하의 답변을 사용하여 기본적으로 인터페이스, 클래스 및 객체 인 다음을 스케치 할 수있었습니다. 이 접근 방식이 더 간단하다고 생각합니다.

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