'!'의 차이점 그리고 '?' TypeScript에서

Question

Class Employee {
  firstName: string;
  lastName!: string;
  middleName?: string;
}

이 세 가지 Employee수업 분야의 차이점은 무엇입니까 ?

라이브 예

Answer 1

?그 위치에 표시 속성 선택 .

!그 위치는이다 명확한 할당 주장 . Null 이 아닌 어설 션 연산자 의 선언 수준 버전 이지만 표현식이 아닌 속성 (변수에도 사용할 수 있음)에 사용됩니다.

이 예에는 두 가지 또는 틀림없이 세 가지 오류가 있습니다.

1. Class이어야합니다 class; JavaScript 및 TypeScript는 대소 문자를 구분합니다.

2. 이니셜 라이저 firstName(또는 무조건 할당하는 생성자)가 필요합니다.

3. !에는 lastName타이프 알려줍니다 lastName확실히 당신이 얻고있는 오류의 종류를 억제 할당됩니다 firstName사실, 그러나 (이 예에서) 아무것도 하지 사용하는 할당 !이 약속하는 것은 당신이 당신이하고있는 알 타이프 라이터를.

편집 : 나중에 연결 한 코드 는 위의 # 1과 # 2를 다루지 만 # 3은 다루지 않습니다. TypeScript는 lastName할당 되지 않았 음을 경고하지 않으며 해당 값이 문자열이라고 가정합니다 undefined.

Answer 2

그것들은 TypeScript 의 문서에 잘 숨겨져 있습니다.

?인터페이스에 설명되어 있으며 선택적 속성을 표시합니다 .

!는 IS 명확한 주장 연산자 . TypeScript의 분석이이를 감지 할 수없는 경우에도 속성이 설정 ( null또는 undefined아님) 되었음을 컴파일러에 알립니다 .

---

Btw Class는 TypeScript 또는 JavaScript 키워드가 아니며 해당 위치에서 오류를 생성합니다. 클래스 선언을위한 키워드는 class입니다. 타이프 라이터와 자바 스크립트 식별자와 키워드는 대소 문자를 구분 ( Class그리고 class다른 것들).

Answer 3

컴파일러 옵션이있는 경우 strictNullChecks: false

당신이있는 경우 strictNullChecks: false귀하에 tsconfig.json그들은 정확히 가진 이후 동일 strictNullChecks모든 필드를 null 또는 유효한 값으로 정의되지 않은 것을 사용할 방법을.

컴파일러 옵션이있는 경우 strictNullChecks: true

class Employee {
   firstName: string;
   lastName!: string;
   middleName?: string;
}

firstName: stringfirstName는이어야 함을 의미합니다 string. null또는 undefinedfirstName에 유효한 값이 아닙니다.

모든 필드에 기본값 undefined이 지정되어 오류가 발생합니다.Property 'firstName' has no initializer and is not definitely assigned in constructor

오류를 없애려면 선언을 변경 firstName: string = 'Some default value'하거나 생성자를 추가하고 생성자에 값을 할당해야합니다.

constructor() {
    this.firstName = 'some default value';
}

이제! 통사론. lastName!: string로 구문은 유사하다 lastName: string점에서 그것은 기본적에만 있다고 string만 허용 유형입니다. null및 undefined허용되지 않습니다. 그러나 그것은 명확한 할당 오류에 대해 컴파일러를 침묵시킵니다. 다음 코드가 있다고 가정 해 보겠습니다.

class Employee {firstName : 문자열; lastName !: 문자열; middleName ?: 문자열;

  constructor() {
      // This will silence the compiler about first name not initialized
      this.firstName = 'some default value';
      // The compiler cannot tell that lastName is assigned in init() function
      this.init();
  }
  
  private init(): void {
      this.lastName = 'some default value';
  }
}

이전 코드에서는 호출을 통해 lastName확실히 할당됩니다 . 그러나 컴파일러는 그것을 알 수 없습니다. 그래서! 기본적으로 컴파일러에게 "닥쳐, 내가 뭘하고 있는지 알아"라고 말하는 것 입니다. 코드의 정확성을 확인하는 것은 귀하에게 달려 있습니다.constructorthis.init()

[정보] middleName?: string구문. 이것은 정확히 동일합니다 middleName: string | undefined; 모든 값은 기본값이이므로 undefined컴파일러는 middleName할당 되지 않았다고 불평 하지 않습니다.