TypeScript Tutorial

What is Type Annotation in TypeScript

타입스크립트는 타입 어노테이션을 사용하여 변수, 함수, 객체 등과 같은 식별자의 유형을 명시적으로 지정한다.

: type 구문을 식별자 뒤에 붙이는 타입 어노테이션으로 사용한다.

type은 모든 유효한 유형 가능

식별자에 타입 어노테이션을 추가하면 해당 타입으로만 사용할 수 있다. 식별자가 다른 유형으로 사용되면 타입스클입트 컴파일러에서 오류를 발생시킨다.

Type annotations in variables and constants

1
2
3
let variableName: type;
let variableName: type = value;
const constantName: type = value;

위 코드에서 타입 어노테이션은 변수, 상수 이름 뒤에 :을 붙이고 그 뒤에 타입이 온다.

지정한 타입 외 다른 타입 값을 할당하면 컴파일 에러를 발생시킨다.

Type annotation examples

배열
배열 타입 어노테이션은 : type[] 로 표시한다.

1
2
let arrayName: type[];
let names: string[] = ['John', 'Jane', 'Peter', 'David', 'Mary'];

객체

1
2
3
4
5
6
7
8
9
let person: {
  name: string;
  age: number
};

person = {
  name: 'John',
  age: 25
};

함수 인자와 반환형
1 2 3 4 5
let greeting : (name: string) => string; greeting = function (name: string) { return `Hi ${name}`; };
위와 같이 타입 어노테이션을 사용할 경우 string을 인자로 받고, string을 반환하는 모든 함수를 greeting에 할당할 수 있다.

Base Type

number
타입스크립트에서 모든 숫자는 부동 소수점값과 큰 정수값에 포함된다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
let price: number;
let price = 9.95;

let counter: number = 0;
let x: number = 100, 
    y: number = 200;

let bin = 0b100;
let anotherBin: number = 0B010;

let octal: number = 0o10;

let hexadecimal: number = 0XA;

let big: bigint = 9007199254740991n;

string

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
let firstName: string = 'John';
let title: string = "Web Developer";

let description = `This TypeScript string can 
span multiple 
lines
`;

let firstName: string = `John`;
let title: string = `Web Developer`;
let profile: string = `I'm ${firstName}. 
I'm a ${title}`;

console.log(profile);

/** result
I'm John. 
I'm a Web Developer.
**/

boolean

1
2
3
4
5
let pending: boolean;
pending = true;
// after a while
// ..
pending = false;

Object Type

타입스크립트 object 타입은 원시 타입이 아닌 모든 값을 표현할 수 있다.

타입스크립트 원시 타입
- number
- bigint
- string
- boolean
- null
- undfined
- symbol

object로 선언된 변수는 원시 타입을 제외한 모든 자료형을 할당할 수 있다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let employee: object;

employee = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    jobTitle: 'Web Developer'
};

console.log(employee);

1
2
3
4
5
6
{
  firstName: 'John',       
  lastName: 'Doe',
  age: 25,
  jobTitle: 'Web Developer'
}

만약 object로 선언된 변수를 다른 원시 타입으로 다시 할당하려고 하면 에러가 발생한다.

1
2
employee = "Jane";
// error TS2322: Type '"Jane"' is not assignable to type 'object'.

object 타입은 선언될 때 지정한 프로퍼티 목록을 고정적으로 가지게 되어, 선언되지 않은 프로퍼티를 호출하게 되면 에러를 발생시킨다.

1
2
console.log(employee.hireDate);
// error TS2339: Property 'hireDate' does not exist on type 'object'.

💡 자바스크립트는 보유하지 않은 프로퍼티를 호출하면 undefined를 반환한다.

object 타입 내부에 지정되는 프로퍼티들의 타입을 지정할 수 도 있다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
let employee: {
    firstName: string;
    lastName: string;
    age: number;
    jobTitle: string;
};

employee = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    jobTitle: 'Web Developer'
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
let employee: {
    firstName: string;
    lastName: string;
    age: number;
    jobTitle: string;
} = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    jobTitle: 'Web Developer'
};

`object` VS `Object`

타입스크립트는 첫 번째 대문자만 다른 Object 타입도 있다.

object 타입은 원시 타입이 아닌 모든 값들을 표현하고, Object 타입은 동작하는 모든 객체들을 의미한다.

💡 자바스크립트에 포함된 모든 생성자들은 Object를 extend한다. 따라서 Object에는 모든 객체가 할당될 수 있다. 즉 동작하는 모든 객체를 의미한다.

The empty type

타입스크립트에서 비어있는 타입을 표현하는 다른 방법으로 {} 가 있는데, object 타입과 유사하게 동작한다.

1
2
3
4
let vacant: {};
vacant.firstName = 'John';

//error TS2339: Property 'firstName' does not exist on type '{}'.

1
2
3
4
let vacant: {} = {};

console.log(vacant.toString());
// [object Object]

1
2
3
4
5
6
7
8
9
let vacant: {} = {
    firstName: 'John'
};

console.log(vacant);
// { firstName: 'John' }

console.log(vacant.firstName);
// error TS2339: Property 'firstName' does not exist on type '{}'.

Array

타입스크립트의 Array는 순서가 있는 데이터 리스트를 의미한다.

1
let 이름: 타입[];

1
2
3
4
5
6
let skills: string[];

skills[0] = "Problem Solving";
skills[1] = "Programming";

skills.push('Software Design');

1
let skills = ['Problem Sovling','Software Design','Programming'];

1
2
let skills: string[];
skills = ['Problem Sovling','Software Design','Programming'];

위처럼 선언된 skills에 다른 타입을 넣을 경우 에러가 발생한다

1
2
skills.push(100);
// Argument of type 'number' is not assignable to parameter of type 'string'.

배열 타입이 가진 속성과 메소드

1
2
let series = [1, 2, 3];
console.log(series.length); // 3

유용한 메서드로 forEach(), map(), reduce(), filter() 등이 있다.

1
2
3
4
5
let series = [1, 2, 3];
let doubleIt = series.map(e => e* 2);
console.log(doubleIt);

[ 2, 4, 6 ]

여러 타입 섞어 저장하기

1
let scores = ['Programming', 5, 'Software Design', 4];

1
2
let scores : (string | number)[];
scores = ['Programming', 5, 'Software Design', 4];

Tuple

Tuple은 array에 추가 제약사항이 붙은 형태이다.

내부 요소 갯수 고정
내부 요소의 타입을 선언할 때 같을 필요는 없음

1
2
let skill: [string, number];
skill = ['Programming', 5];

1
2
3
let skill: [string, number];
skill = [5, 'Programming'];
// error TS2322: Type 'string' is not assignable to type 'number'.

1
let color: [number, number, number] = [255, 0, 0];

Optional Tuple Elements

타입스크립트 3.0부터 선택적으로 사용할 수 있는 요소 선언이 추가되었다. 선택적으로 사용할 요소 앞에 ?를 앞에 붙인다.

1
2
3
let bgColor, headerColor: [number, number, number, number?];
bgColor = [0, 255, 255, 0.5];
headerColor = [0, 255, 255];

Enum

Enum은 상수 값들을 그룹으로 묶어 이름 붙인 타입이다.

1
enum name {constant1, constant2, ...};

constant1, constant2, ...는 enum의 멤버가 된다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
enum Month {
    Jan,
    Feb,
    Mar,
    Apr,
    May,
    Jun,
    Jul,
    Aug,
    Sep,
    Oct,
    Nov,
    Dec
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function isItSummer(month: Month) {
    let isSummer: boolean;
    switch (month) {
        case Month.Jun:
        case Month.Jul:
        case Month.Aug:
            isSummer = true;
            break;
        default:
            isSummer = false;
            break;
    }
    return isSummer;
}

isItSummer의 인자인 month는 Month enum에 해당하는 값을 받을 수 있다.

1
2
3
console.log(isItSummer(Month.Dec)); //false
console.log(isItSummer(11)); //false
console.log(isItSummer(MonthSecond.Dec)); //error TS2345: Argument of type 'MonthSecond.Dec' is not assignable to parameter of type 'Month'.