valleycho

typescript tutorial(4탄) 본문

typescript(타입 스크립트)

typescript tutorial(4탄)

valleycho 2020. 11. 8. 22:54

7. 기본 타입

7.1 boolean

const isTypeScriptAwesome: boolean = true;
const doesJavaScriptHasTypes: boolean = false;

 

7.2 number

const yourScore: number = 100;
const ieee754IsAwesome: number = 0.1 + 0.2;

 

7.3 null / undefined

null 타입과 undefined 타입은 각각 nullundefined라는 하나의 값만을 갖는다. 이 두 값을 자기 자신의 타입, 그리고 아래에서 언급될 void 타입 이외의 타입에 할당하려 하면 타입 에러(TS2322: Type 'null' is not assignable to type 'number' 등)가 발생한다.

 

const nullValue: null = null;
const undefinedValue: undefined = undefined;
const numberValue: number = null; // TS2322: Type 'null' is not assignable to type 'number'

 

7.4 any

any 타입은 모든 타입과 호환 가능.

let bool: any = true;
bool = 3;
bool = 'whatever';
bool = {};

 

7.5 void

void는 null과 undefined 만을 값으로 가질 수 있는 타입이다. 아무런 값도 반환하지 않는 함수의 반환 타입을 표시할 때 사용한다.

function nothing(): void { }

 

7.6 never

never는 아무런 값도 가질 수 없는 타입이다.

function alwaysThrow(): never {
    throw new Error(`I'm a wicked function!`);
}

 

8. 배열과 튜플

8.1 배열

const pibonacci: number[] = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: string[] = ['Imperial Stout', 'India Pale Ale', 'Weizenbock'];

배열 타입을 표현하는 또 다른 방식이 있다.

const pibonacci: Array<number> = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: Array<string> = ['Imperial Stout', 'India Pale Ale', 'Weizenbock'];

배열 타입을 표현하는 또 다른 방식이 있다.

 

 

8.2 튜플

튜플 타입을 이용해 원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의 할 수 있다.

튜플 타입 변수는 정확히 명시된 개수 만큼의 원소만을 가질 수 있다. (TypeScript 2.6 이후 버전)

const invalidNameAndHeight: [string, number] = ['안희종', 176, 42];

 

다만 튜플 타입의 값을 Array 프로토타입의 메소드를 통해 조작하는 것은 금지되지 않는다는 점에 유의해야 한다. 예를 들어 아래와 같은 코드는 에러를 내지 않는다.

const validNameAndHeight: [string, number] = ['안희종', 176];
validNameAndHeight.push(42); // no error

 

9. 객체

9-1. 객체 타입

const user: { name: string; height: number; } = { name: '안희종', height: 176};

 

  • 콜론(:)의 우변에는 값 대신 해당 속성의 타입이 들어간다.

  • 구분자로 콤마(,) 뿐만 아니라 세미콜론(;)을 사용할 수 있다.

9-2. 선택 속성

함수의 선택 매개변수와 비슷하게 속성명 뒤에 물음표(?)를 붙여 해당 속성이 존재하지 않을 수도 있음을 표현할 수 있다.

const userWithUnknownHeight: { name: string; height?: number; } = {
      name: '김수한무'
};

9-3. 선택 속성

속성명 앞에 readonly 키워드를 붙여 해당 속성의 재할당을 막을 수 있다. readonly 키워드가 붙은 속성은 const 키워드를 이용한 변수의 정의와 비슷하게 동작한다.

const user: {
     readonly name: string;
     height: numer;
} = { name: '안희종', height: 176 };
user.name = '종희안'; // error TS2540: Cannot assign to 'name' because it is a constant or a read-only                                     property.

 

10. 타입 별칭

타입 별칭(type alias)을 이용해 이미 존재하는 타입에 다른 이름을 붙여 복잡한 타입을 간단하게 쓸 수 있다.

type UUID = string;

type Height = number;

type AnotherUUID = UUID;

type Animals = Animal[];

type User = {

    name: string;

    height: number;

};

 

11. 함수

ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/function

 

3.5 함수

자바스크립트 프로그램에서 가장 핵심적인 역할을 차지하는 함수 타입이 타입스크립트에서 어떻게 표현되는지 다룬다.

ahnheejong.gitbook.io

 

12. 제네릭

ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/generics

 

3.6 제너릭

제너릭을 이용해 여러 타입에 대해 동일한 규칙을 갖고 동작하는 타입을 손쉽고 우아하게 정의할 수 있다.

ahnheejong.gitbook.io

 

13. 유니온

(유니온 타입이 나온 이유를 읽어보면 좋다.)

ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/union-type

 

3.7 유니온 타입

유니온 타입을 이용해 “여러 경우 중 하나”인 타입을 표현할 수 있다.

ahnheejong.gitbook.io

유니온 타입은 가능한 모든 타입을 파이프(|) 기호로 이어서 표현

type Whatever = number | string | boolean;

 

14. 인터섹션

(인터섹션 타입이 나온 이유를 읽어보면 좋다.)

ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/intersection-type

 

3.8 인터섹션 타입

인터섹션 타입을 이용해 “여러 경우에 모두 해당”하는 타입을 표현할 수 있다.

ahnheejong.gitbook.io

여러 타입을 앰퍼샌드(&) 기호로 이어서 인터섹션 타입을 나타낼 수 있다.

type BeerLovingProgrammer = Programmar & BeerLover;

 

15. 열거형

(읽어 보면 좋음)

ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/enums

 

3.9 열거형

유한한 경우의 수를 갖는 값의 집합을 표현하기 위해 사용하는 열거형(enum) 타입에 대해 배운다.

ahnheejong.gitbook.io

enum Direction {
    East,
    West,
    South,
    North
}
const east: Direction = Direction.East;

 

'typescript(타입 스크립트)' 카테고리의 다른 글

typescript tutorial(5탄)  (0) 2020.11.09
typescript tutorial(3탄)  (0) 2020.11.08
typescript tutorial(2탄)  (0) 2020.11.08
typescript tutorial(1탄)  (0) 2020.11.04