TypeScript에서 객체 속성 문자열 유형 값을 문자열 리터럴 유형으로 만드는 방법은 무엇입니까?

Originally posted here!

개체 속성string 유형 값을 string literals로 만들려면 속성as 값 뒤에 string 키워드를 사용한 다음 문자열 리터럴을 입력하거나 속성에 액세스한 후 as 키워드를 사용할 수 있습니다. 그런 다음 문자열 리터럴을 입력합니다.

TL;DR

방법 1

// a simple object
// with "name" property type changed
// from "string" to "John Doe" string literal
const person = {
  name: "John Doe" as "John Doe",
  age: 23,
};

방법 2

// a simple object
const person = {
  name: "John Doe",
  age: 23,
};

// a simple function call
// with "name" property type changed
// from "string" to "John Doe" string literal
sayName(person.name as "John Doe");

더 잘 이해하기 위해 각각 값이 person 및 name인 age 및 John Doe라는 두 개의 속성을 가진 23라는 객체가 있다고 가정해 보겠습니다.

// a simple object
const person = {
  name: "John Doe",
  age: 23,
};

이제 name 객체의 person 속성 위로 마우스를 가져가면 아래 이미지와 같이 name 속성의 유형이 string로 표시됩니다.



대부분의 경우 괜찮습니다. 그러나 어떤 경우에는 name 속성의 유형을 string에서 string literal로 변환하여 함수 호출에 인수로 전달해야 할 수도 있습니다.

이를 위해 as 속성의 문자열 값 뒤에 name 키워드를 사용한 다음 사용해야 하는 string literal를 입력할 수 있습니다. 우리의 경우 John Doe 문자열 리터럴 유형으로 변경해야 합니다. 다음과 같이 할 수 있습니다.

// a simple object
// with "name" property type converted
// from just "string" to "John Doe" string literal
const person = {
  name: "John Doe" as "John Doe",
  age: 23,
};

이제 name 속성 위로 마우스를 가져가면 name 속성의 유형이 string에서 우리가 원하는 문자열 리터럴John Doe로 변경된 것을 볼 수 있습니다.

다음과 같이 보일 수 있습니다.



동일한 기능을 달성하는 또 다른 방법은 as 키워드를 사용하고 개체에서 속성에 액세스하는 경우에만 문자열 리터럴을 입력하는 것입니다.

예를 들어, sayName라는 함수를 가정하고 함수를 호출할 때 다음과 같이 name 속성 값을 전달해 보겠습니다.

// a simple object
const person = {
  name: "John Doe",
  age: 23,
};

// a simple function call
sayName(person.name);

이제 name 속성의 유형을 string에서 "John Doe"string literal로 변경하려면 as 뒤에 person.name 키워드를 사용하고 문자열 리터럴을 다음과 같이 입력합니다.

// a simple object
const person = {
  name: "John Doe",
  age: 23,
};

// a simple function call
// with "name" property type changed
// from "string" to "John Doe" string literal
sayName(person.name as "John Doe");

이는 동일한 기능을 달성하는 유효한 방법이기도 합니다.

codesandbox에서 위 코드의 작동을 확인하십시오.

그게 다야 😃!

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.