저와 함께 Typescript 배우기 - 2부

이전 기사에서 TypeScript의 기본을 배웠습니다. 아직 읽어보지 않으셨다면 이 기사를 읽기 전에 읽어보시기 바랍니다.

1- 저와 함께 타이프스크립트 배우기 - 1

열거형

열거형은 명명된 상수 집합을 정의하는 방법을 제공합니다. 기본적으로 Enum 값은 0으로 시작하지만 재정의할 수 있습니다.

enum Color { Red = "RED", Green = "GREEN", Blue = "BLUE", };

const getColorMessage = (color: Color): string => { 
      return You selected ${color};
 }; 

console.log(getColorMessage(Color.Red));

배열

typescript의 배열을 사용하면 동일한 유형의 요소 컬렉션을 정의할 수 있습니다. 이를 일종의 목록처럼 생각할 수 있습니다. Python에서는 이를 목록 유형이라고 합니다.

const numbers: number[] = [1, 2, 3, 4];

numbers.push(5);

console.log(numbers);

now if I try to add a string in numbers array typescript will complain

number.push("five") // type string is not assignable to type number

튜플

튜플은 고정된 크기와 유형의 배열을 정의할 수 있는 TypeScript의 특수 배열 유형입니다. 튜플은 데이터의 모양을 정확히 아는 경우에 사용되며, 튜플을 사용하면 데이터를 읽을 때 성능이 향상됩니다.

const user: [number, string] = [1, "Alice"];

console.log(user);

물체

typescript의 객체를 사용하면 유형을 사용하여 객체의 구조를 정의할 수 있습니다. 이와 같이 객체를 입력할 수 있습니다. 유형 별칭 주제의 객체에 대해 자세히 알아보세요

const user: { id: number; name: string } = { id: 1, name: "Alice" }; 

console.log(user.name);

유형 별칭

유형 별칭을 사용하면 더 나은 코드 재사용 및 가독성을 위해 TypeScript에서 사용자 정의 유형을 정의할 수 있습니다. 이제 객체를 Type Alias ​​UserType

으로 입력할 수 있습니다.

참고: 실제 프로젝트에서는 문자와 같은 단어를 사용하지 마세요.

type UserType = { id: number; name: string; };

const user: UserType = { id: 1, name: "Alice" };

console.log(user.id);

선택적 속성

선택적 속성을 사용하면 존재하거나 존재하지 않을 수 있는 객체 속성을 정의할 수 있습니다. 이전 예에서 사용자가 ID와 이름만 가질 것이라고 생각했다면 존재할 수도 있고 존재하지 않을 수도 있습니다. 추가할 수 있나요? before : 이것이 선택적 속성임을 나타냅니다.

type UserType = { id: number; name?: string; };

const user: User = { id: 1 };

console.log(user.name ?? "Name not provided");

축소/타입 가드

유형 가드를 사용하면 특정 코드 블록 내에서 값 유형의 범위를 좁힐 수 있습니다. 따라서 사용자의 이름이 선택적 속성이라는 것을 알고 있으므로 이제 사용자 이름을 인쇄하려고 하면 고객에게 표시하고 싶지 않은 정의되지 않음이 표시되므로 표시하기 전에 사용자 이름이 문자열인지 확인하세요. 그

if (typeof user.name == 'undefined') {
   console.log("Welcome", user.name)
}  else {
   console.log("Welcome Guest")
}

다음 글에서는 함수와 유형 어설션에 대해 다루겠습니다.

대니쉬 알리

위 내용은 저와 함께 Typescript 배우기 - 2부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!