Angular 및 TypeScript에서 "Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'" 오류 해결

Angular 및 TypeScript에서 "Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'" 오류 해결

오류 설명

Angular 및 TypeScript에서의 예시

Angular 및 TypeScript에서 이 오류는 다음과 같은 경우 발생할 수 있습니다.

1. localStorage에서 값 가져오기:

const user = localStorage.getItem('currentUser'); // user는 string | null 타입입니다.
const parsedUser = JSON.parse(user); // 오류 발생: user가 null일 수 있기 때문에 JSON.parse()에 문자열을 전달해야 합니다.

1. 컴포넌트 속성에 값 할당:

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  name: string; // name 변수는 string 타입입니다.

  constructor() {
    this.name = localStorage.getItem('userName'); // 오류 발생: localStorage.getItem()은 null을 반환할 수 있습니다.
  }
}

1. 함수 매개변수에 값 전달:

function myFunction(name: string) {
  // ...
}

myFunction(localStorage.getItem('userName')); // 오류 발생: localStorage.getItem()은 null을 반환할 수 있습니다.

오류 해결 방법

이 오류를 해결하려면 다음과 같은 방법을 사용할 수 있습니다.

null 검사 및 조건부 할당:

const user = localStorage.getItem('currentUser');
if (user) {
  const parsedUser = JSON.parse(user);
  // ...
}

nullish coalescing 연산자 (??):

const parsedUser = JSON.parse(localStorage.getItem('currentUser') ?? '{}');

엘비스 연산자 (!):

const parsedUser = JSON.parse(localStorage.getItem('currentUser')!); // 주의: null 값을 처리하지 않고 무시합니다.

타입 가드 사용:

function isString(value: string | null): value is string {
  return value !== null;
}

const user = localStorage.getItem('currentUser');
if (isString(user)) {
  const parsedUser = JSON.parse(user);
  // ...
}

타입 캐스팅:

const user = localStorage.getItem('currentUser') as string; // 주의: null 값을 처리하지 않고 무시합니다.
const parsedUser = JSON.parse(user);

추가 정보

결론

예제 코드

// 오류 발생 코드
const user = localStorage.getItem('currentUser');
const parsedUser = JSON.parse(user); // 오류 발생: user가 null일 수 있기 때문에 JSON.parse()에 문자열을 전달해야 합니다.

// 해결 코드
const user = localStorage.getItem('currentUser');
if (user) {
  const parsedUser = JSON.parse(user);
  // ...
} else {
  // 사용자 정보가 없는 경우 처리
}

// 오류 발생 코드
@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  name: string; // name 변수는 string 타입입니다.

  constructor() {
    this.name = localStorage.getItem('userName'); // 오류 발생: localStorage.getItem()은 null을 반환할 수 있습니다.
  }
}

// 해결 코드
@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  name: string | null; // name 변수는 string 또는 null 타입을 허용합니다.

  constructor() {
    this.name = localStorage.getItem('userName');
  }

  ngOnInit() {
    if (this.name === null) {
      // 사용자 이름이 없는 경우 처리
    }
  }
}

// 오류 발생 코드
function myFunction(name: string) {
  // ...
}

myFunction(localStorage.getItem('userName')); // 오류 발생: localStorage.getItem()은 null을 반환할 수 있습니다.

// 해결 코드
function myFunction(name: string | null) {
  // ...
}

myFunction(localStorage.getItem('userName'));

// 또는

function myFunction(name: string) {
  if (name === null) {
    // name이 null인 경우 처리
    return;
  }

  // ...
}

myFunction(localStorage.getItem('userName')!); // null 체크 후 값을 전달합니다.

// 오류 발생 코드
function myFunction(name: string) {
  // ...
}

myFunction(localStorage.getItem('userName')); // 오류 발생: localStorage.getItem()은 null을 반환할 수 있습니다.

// 해결 코드
function isString(value: string | null): value is string {
  return value !== null;
}

function myFunction(name: string) {
  if (isString(name)) {
    // ...
  } else {
    // name이 null인 경우 처리
  }
}

myFunction(localStorage.getItem('userName'));

// 오류 발생 코드
function myFunction(name: string) {
  // ...
}

myFunction(localStorage.getItem('userName')); // 오류 발생: localStorage.getItem()은 null을 반환할 수 있습니다.

// 해결 코드
function myFunction(name: string) {
  // ...
}

myFunction(localStorage.getItem('userName') as string); // 주의: null 값을 처리하지 않고 무시합니다.

결론

참고:

• Angular에서 localStorage

"Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'" 오류 해결을 위한 대체 방법

Optional Chaining 연산자 (?.) 사용:

const parsedUser = JSON.parse(localStorage.getItem('currentUser')?.toString()); // null 체크 후 JSON.parse()에 문자열을 전달합니다.

const parsedUser = JSON.parse(localStorage.getItem('currentUser') ?? '{}'); // null인 경우 빈 문자열("")을 반환합니다.

기본값 설정:

function myFunction(name: string = '') {
  // ...
}

myFunction(localStorage.getItem('userName')); // null인 경우 빈 문자열("")을 기본값으로 사용합니다.

const parsedUser = JSON.parse(localStorage.getItem('currentUser')!); // 주의: null 값을 처리하지 않고 무시합니다.

function isString(value: string | null): value is string {
  return value !== null;
}

function myFunction(name: string) {
  if (isString(name)) {
    // ...
  } else {
    // name이 null인 경우 처리
  }
}

myFunction(localStorage.getItem('userName'));

function myFunction(name: string) {
  // ...
}

myFunction(localStorage.getItem('userName') as string); // 주의: null 값을 처리하지 않고 무시합니다.

결론