TypeScript에서 JSON 문자열 구문 분석
Shuvayan Ghosh Dastidar
2023년1월30일
-
JSON.parse()를 사용하여 TypeScript에서 JSON 문자열을 개체로 구문 분석 - TypeScript에서 JSON 문자열을 개체로 안전하게 변환하기 위해 가드 사용
-
Partial키워드를 사용하여 TypeScript에서 런타임 오류 방지
문자열은 인터넷을 통한 통신 수단이며 모든 데이터는 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 속성에 대한 기본값을 갖는 데 사용됩니다.
