J's inner world

union type 이 뭘까?

OR 연산이라고 생각하면 좀더 이해하기 쉽다.

혹은, 객관식 답안지 만들기 라고 이해해도 좋을 것 같다.

특정 선택지만을 선택할 수 있게 type 을 지정하는 것이다.

기본 사용 예시

type Direction = 'left' | 'right' | 'up' | 'down';
    
function move(direction: Direction) {
    console.log(direction);
}

네 가지의 선택지 중에 하나만 선택해서 인자로 넣을 수 있다.

이때, String Literal Type 이란?

union 은 여러 선택지 중에 하나만 고르라는 느낌이라면,

이 타입은 하나의 선택지만 주어진다.

/**
 * String Literal Type
 */
    
// 이를 이용하면 무조건 지정된 문자열만을 불러올 수 있다.
// 오타가 쉽게 나는 상황이라던가에 유용하게 쓰인다.
type Name = 'Jinn_o';
const userName:Name = 'Jinn_o';

Type Alias 가 뭘까?

alias 를 번역하면 '별명' 이라는 의미이다.

그렇다. 내 입맛대로 타입을 지정할 수 있는 것을 의미한다.

사용 예제

  /*
    *   TYPE ALIAS
    */

    // 원시적인 타입인 string 을 재정의 해보았다.
    type Text = string;
    const name: Text = 'Jinn_O';
    const address: Text = 'Korea';
    
    // Object 도 type 으로 지정할 수 있다!
    type User = {
        name: string;
        age: number;
    }
    const user: User = {
        name: 'Jinn_o',
        age: 1000
    }

1. Optional parameter

// Optional parameter
// 파라미터에 ?를 붙이면 넣어도 되고 안넣어도 되는 부가적 파라미터로 바뀐다.
// 필수적으로 명시해야 하는 파라미터가 아니어도 되는 것이다.
function printName(firstName: string, lastName?: string): void {
    console.log(firstName + lastName);
}

function printName2(firstName: string, lastName: string | undefined): void {
    console.log(firstName + lastName);
}

printName('O', 'Jinn');
printName('JIN');

printName2('O', 'Jinn');
printName2('JIN', undefined);

2. default parameter

// default parameter
// 파라미터에 default 값을 지정해주면,
// default 값을 지정해준 파라미터 값에 아무런 값을 지정해주지 않아도
// 자동으로 default 값이 할당되는 파라미터이다.
function addNumber(x:number, y:number = 1): void {
    console.log(x + y);
}

addNumber(2, 5);
addNumber(1);

3. rest parameter

// Rest parameter
// 여러 개의 파라미터를 배열의 형태로 받을 수 있는 방법이다.
function addNumbers(...numbers: number[]): number {
    return numbers.reduce((a,b) => a + b);
}

console.log(addNumbers(1));
console.log(addNumbers(1, 3));
console.log(addNumbers(1, 3, 5));
console.log(addNumbers(1, 3, 5, 7));

타입스크립트는 자바스크립트 기반으로 돌아가는 언어이다.

단지 자바스크립트에 "타입" 을 끼얹어준것이다.

따라서 타입스크립트를 가동시키기 위해서는 자바스크립트로 변환해주는 과정이 필요하다.

그 방법에 대해서 알아보자.

ts 파일을 실행시키는 방법

node script.ts

타입스크립트를 설치할 때도 node 의 npm 을 이용해 설치해줬던 것만큼,

타입스크립트는 노드와 상당히 밀접한 관계가 있다는 것을 알 수 있다.

그러나 이 때 문제 발생! 타입스크립트 코드안에 자바스크립트에는 없는 타입스크립트만의 문법을 사용하면 오류가 발생한다!

따라서 typescript 파일을 javascript 파일로 변환해준 다음에 사용해야 한다.

// typescript 파일을 javascript 파일로 자동으로 변환해서 만들어준다.
tsc script.ts
// 위의 명령어를 실행하면 script.js 파일이 자동으로 생성된다.

// 이때 -w, 즉 watch 옵션을 사용하면 변경사항이 있을 때마다 굳이 tsc 명령어를 입력하지 않아도
// 자동으로 툴 내에서 watch, 주시하고 있다가 자동으로 변경해준다.
tsc script.ts -w

javascript 파일로 변환하지 않고 터미널에서 간단하게 사용하는 방법은 없는걸까?

그럴리가. 당연히 있다.

// 번거로운 작업을 자동으로 해주어서 typescript 파일을 사용하게 해주는 명령어
npm install -g ts-node

// 설치 후의 사용방법
ts-node script.ts

타입스크립트는 자바스크립트에서 파생된 언어이다.

따라서 기본적으로 자바스크립트와 비슷하지만, 가장 핵심적인 부분이 다르다.

자바스크립트를 사용할 때는 가끔 코드가 모호해지는 경우가 있다.

그 이유는 자바스크립트에서는 변수의 타입을 지정해주지 않기 때문이다.

이러한 문제를 보완하기 위해서 나온 것이 바로 타입스크립트이다.

그렇다. 타입스크립트는 말그대로 자바스크립트와 다르게 "타입을 명시" 해주는 언어이다.

<원래의 자바스크립트 코드>

function add(x, y) {
	return x + y;
}

<"타입이 명시되어서 명확해진" 타입스크립트 코드>

function (x: number, y: number): number {
	return x + y;
}

+) 타입스크립트 설치방법 & 초기 환경 구축

먼저, npm을 원활히 사용하기 위해서 node js 도 설치가 되어있어야 한다.

글로벌하게 typescript를 설치하는 명령어는 다음과 같다.

npm install -g typescript

또, tsc 란 typescript를 가리킨다.