HOWTO · TypeScript

TypeScript에서 JSON 문자열 구문 분석

이 튜토리얼은 TypeScript에서 JSON 문자열을 구문 분석하는 방법을 보여줍니다.

문자열은 인터넷을 통한 통신 수단이며 모든 데이터는 JSON으로 알려진 매우 인기 있는 형식으로 전송됩니다. 데이터의 이 JSON 표현은 종종 TypeScript의 객체 또는 클래스를 나타냅니다.

이 튜토리얼은 JSON 문자열을 TypeScript 객체로 안전하게 다시 구문 분석하는 방법에 중점을 둘 것입니다.

JSON.parse()를 사용하여 TypeScript에서 JSON 문자열을 개체로 구문 분석

JavaScript에서 사용되는 JSON.parse() 함수는 TypeScript가 JavaScript의 상위 집합이므로 TypeScript에서도 사용할 수 있습니다. 그러나 다음 메서드는 개체로 변환할 JSON 문자열에 개체와 연결된 모든 필수 속성이 있다고 가정합니다.

예제 코드:

interface Person {
    name : string;
    age : number;
}

const personString = `{"name" : "david", "age" : 20}`;

const personObj : Person = JSON.parse(personString);
console.log(personObj);

출력:

{
  "name": "david",
  "age": 20
}

TypeScript에서 JSON 문자열을 개체로 안전하게 변환하기 위해 가드 사용

사용자 정의 가드는 JSON 문자열에 필요한 속성의 전체 또는 일부가 포함되어 있는지 확인하여 즉각적인 필요에 따라 추가로 처리하거나 거부할 수 있습니다.

예제 코드:

interface Person {
    name : string;
    age : number;
}

function checkPersonType( obj : any ) : obj is Person {
    return 'name' in obj && 'age' in obj;
}

const personString1 = `{"name" : "david"}`;
const personString2 = `{"name" : "david", "age" : 20 }`;
const personObj1 : Person = JSON.parse(personString1);
if ( checkPersonType(personObj1)) {
    console.log(personObj1);
} else {
    console.log(personString1 + ' cannot be parsed');
}

const personObj2 : Person = JSON.parse(personString2);
if ( checkPersonType(personObj2)) {
    console.log(personObj2);
} else {
    console.log(personString2 + ' cannot be parsed');
}

출력:

"{"name" : "david"} cannot be parsed"
{
  "name": "david",
  "age": 20
}

Partial 키워드를 사용하여 TypeScript에서 런타임 오류 방지

JSON 문자열에 일부 필드가 없을 수 있습니다. 이 경우 개체의 속성을 일부 기본값으로 채울 수 있습니다.

TypeScript의 Partial 키워드는 객체의 모든 속성을 선택 사항으로 만들어 이를 달성하는 데 도움이 되므로 null 검사 연산자와 연결하여 기본값을 설정할 수 있습니다.

예제 코드:

interface Person {
    name : string;
    age : number;
}

const personString = `{"name" : "david"}`;

const personObj : Partial<Person> = JSON.parse(personString);
console.log(personObj);

console.log( personObj.age ?? 30);

출력:

{
  "name": "david"
}
30

따라서 JSON 문자열에는 Person 인터페이스에서 요구하는 age 속성이 없지만 null 검사 또는 ?? 연산자는 age 속성에 대한 기본값을 갖는 데 사용됩니다.