TypeScript의 유형

TypeScript와 관련하여 게임의 큰 부분은 유형을 정의하는 것입니다.

이를 통해 주석을 정의할 수 있지만 더 많은 위치에 나타날 수 있습니다.

이 특정 기사에서는 가장 기본적인 유형을 살펴보고 결국 확장된 유형에 대해 조금 더 깊이 파고들 것입니다.

유형의 기둥

기본적으로 대부분의 변수를 담당하는 JavaScript에서 매우 일반적으로 사용되는 기본 유형이 있으며 이 세 가지는 다음과 같습니다.

string : 문자열 값

number : 정수/숫자 값, JavaScript는 int 또는 float 인지 상관하지 않습니다. 그들은 그것을 호출합니다 number

boolean : 좋은 옛것 참 또는 거짓

이 세 가지 기둥 외에도 특정 요소의 배열이 필요할 수 있습니다.

문자열 배열을 가정해 보겠습니다. 이를 위해 대괄호 주석을 사용할 수 있습니다. string[] .

주의 이야기

TypeScript의 경우 특별히 정의하지 않으면 기본 유형이 사용됩니다.
이 유형은 any 라고 하며 무엇이든 될 수 있습니다.

유형을 정의할 때 any 유형을 사용하지 않으려고 합니다.
사용되는 경우 오류가 발생하도록 noImplicitAny 플래그를 설정할 수도 있습니다.

유형 사용

변수나 함수를 선언할 때마다 : {type} 형식을 사용하여 유형에 주석을 달 수 있습니다.

변수와 함수를 찾는 방법을 살펴보겠습니다.

let username: string = 'Chris';

const myName = (name: string) => {
  console.log(`Hello ${name}`);
};

그러나 '사용자 이름' 변수에 유형을 명시적으로 언급할 필요는 없습니다.
이것은 TypeScript가 이것을 문자열로 파생시킬 만큼 충분히 똑똑하기 때문입니다.

제가 의미하는 바를 보여드리겠습니다.



위 이미지에서 왼쪽은 문자열로, 오른쪽은 숫자로 값을 설정한 것을 볼 수 있습니다.

유형을 명시적으로 말하지 않고 TypeScript는 무슨 일이 일어나고 있는지 알고 있습니다.
이것은 직접적인 값을 갖는 변수에서만 가능합니다!

함수의 반환 유형을 정의할 수도 있습니다.
숫자를 받지만 문자열을 반환하는 함수가 있습니다.

const numberToString = (number: number): string => {
  return number.toString();
};

const output = numberToString(123);

함수의 반환 유형을 정의하는 데 사용되는 함수 뒤에 있는 : string에 유의하십시오.

우리는 이미 배열 유형에 대해 간략하게 살펴보았습니다. 또 다른 측면 기둥은 중괄호로 정의된 객체 주석입니다.

const getFullName = (user: {firstname: string, lastname: string}): string => {
  return `${user.firstname} ${user.lastname}`;
};

getFullName({firstname: 'Chris', lastname: 'Bongers'});

위의 예에서 함수는 객체를 user 변수로 받아들입니다. 이 개체에는 문자열인 두 가지 속성이 있습니다.

유형을 선택 사항으로 만들기

위의 예를 들어보자. 이름만 알고 이 함수를 계속 호출하려는 경우가 있을 수 있습니다.
현재 구현에서는 TypeScript 오류가 발생합니다.



TypeScript에서 성의 필수 유형이 누락되었음을 알 수 있습니다.
: 접두사에 물음표를 붙여서 유형을 선택 사항으로 만들 수 있습니다.

const getFullName = (user: {firstname: string, lastname?: string}): string => {
  return `${user.firstname} ${user.lastname}`;
};

기본적으로 변수가 필요하다는 점에 유의하는 것이 중요합니다. 어떤 것이 선택 사항인지 명시적으로 언급해야 합니다.

내 변수에 여러 유형이 있는 경우 어떻게 합니까?

이것은 더 자주 발생합니다. 신분증을 가져갑시다. 예를 들어 숫자나 문자열이 될 수 있습니다.

여러 개가 있는 유형을 정의하려면 공용체 유형을 사용해야 합니다.
파이프| 옵션을 사용하여 이러한 결합 유형을 정의할 수 있습니다.

const getUserId = (id: number | string) => {
  return `Your ID is ${id}`;
};

getUserId(123);
getUserId('Chris123');

보시다시피 두 사용 사례가 모두 유효합니다.

그러나 둘 중 하나에 유효하지 않은 특정 함수를 사용해야 하는 경우에는 어떻게 해야 합니까?

번호 ID에 배치 접두사를 접두사로 붙이고 싶지만 문자열 버전에는 이미 다음이 있습니다.

const getBatchString = (id: number | string): string => {
  if (typeof id === 'number') {
    id = `batch-${id}`;
  }
  return id;
};

getBatchString(123);
getBatchString('batch-123');

위의 예에서 typeof를 사용하여 둘 중 하나를 결정할 수 있음을 알 수 있습니다.

숫자의 경우 문자열을 접두사로 붙입니다. 그렇지 않으면 문자열을 반환합니다.

이러한 사용 사례는 모두 batch-123 를 반환합니다.

TypeScript의 기본 유형과 사용 방법은 여기까지입니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는