쉽게 시작하는 TypeScript

🐕 TypeScript

https://typescript-kr.github.io/

TypeScript 한글 문서

 

위 링크에서 어떻게 타입스크립트를 써야하는지

왜 타입스크립트를 써야하는지는 아주 잘 설명이 되어있습니다

바로 시작을 하고 쓰고싶은데 그 부분에 대해서는 설명이 좀 아쉬운 것 같아서

node.js 환경에서 TypeScript를 사용하는 방법을 간단히 정리하겠습니다.

---

👻일단 TypeScript를 install한다.

타입스크립트를 쓰려면 타입스크립트를 깔아야합니다.

npm install typescript
npm install ts-node

더불어 타입스크립트는 자바스크립트 파일로 컴파일하지 않으면 실행시킬 수 없습니다.

따라서 타입스크립트를 컴파일하지 않고도 실행시킬 수 있는

ts-node 또한 설치해주도록 하겠습니다.

ts-node의 사용법은 매우 간단합니다.

ts-node 파일명.ts

터미널에서 실행시키는 명령어를 ts-node로 주면 끝입니다.

만약 타입스크립트 파일을 자바스크립트로 컴파일 해주고 싶다면 tsc 명령어를 이용할 수 있습니다.

tsc 파일명.ts

명령어가 제대로 동작하지 않는다면

npx tsc 파일명.ts

와 같은 형식으로 명령어를 입력해보세요!

---

🥶 기초적인 문법

타입스크립트에서 타입은 후위표기법을 통해 표현합니다.

따라서 다음과 같이 표현할 수 있습니다.

let isDone: boolean = false;
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

간단한 자료형은 이런식으로 표현할 수 있습니다.

array / object같은 참조자료형들은 어떻게 표기해야하는지 살짝 감이 안오네요

배열은 어떻게 작성할 수 있을까요?

let list: number[] = [1, 2, 3];

이렇게 작성하는 경우 배열의 요소에 number만을 받는다는 의미를 가집니다!

두번째 방법으로는 제네릭 배열 타입을 사용하는 방법이 있습니다.

let list: Array<number> = [1, 2, 3];

제네릭 타입이 뭔지는 나중에 나오는 걸로 기억하니까.. 일단 넘어가고

이런 방식으로 작성한다는 것만 기억하겠습니다.

 

그럼 만약 어떤 타입이 들어올지 명확하지 않다면 어떻게 타입을 지정할 수 있을까요?

아니면 여러개의 타입을 허용해주고 싶으면 어떻게 타입을 지정할까요?

const mixedNumbers: Array<number | undefined> = [1, undefined, 3, undefined];

이런 형식으로 | 기호를 사용하여 지정해줄 수 있습니다.

const hi:string|number = '100'

이렇게 두개 이상의 타입 중 하나일 수 있는 타입을 유니온타입이라고 합니다.

 

튜플 타입으로 지정해줄 수도 있습니다.

// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류

---

🌞any 타입과 void 타입 never 타입 object 타입

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공, 분명히 부울입니다.

any 타입은 기존에 자바스크립트로 작업할 수 있는 방법입니다.

컴파일 중에 타입 검사를 하지 않을 수 있습니다.

애플리케이션을 만들 때 알지 못하는 타입을 표현해야 할 수도 있기 때문에

그러한 상황에서 유용합니다. 또한 여러 다른 타입이 섞인 배열을 다룰 때도 유용합니다.

function warnUser(): void {
    console.log("This is my warning message");
}

void 는 어떤 타입도 존재할 수 없음을 나타내기 때문에 any의 반대 타입으로 볼 수 있습니다.

void 는 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰이는 것으로 볼 수 있습니다.

따라서 위 예제의 warnUser 함수는 console.log()를 호출할 뿐

아무것도 반환하고 있지 않기 때문에 반환 타입을 void로 명시해줍니다.

void를 타입 변수로 선언하는 것은 유용하지 않는데 왜냐면 그 변수에는 null or undefined만 할당할 수 있기 때문입니다.

let unusable:void = undefined

이거 어따씀? 몰?루

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
    while (true) {
    }
}

never 타입은 절대 발생할 수 없는 타입을 의미합니다.

위 예제들은 never를 반환하는 몇가지 예제입니다.

let hi:object = []

object 타입은 원시 타입이 아닌 타입을 나타냅니다.

따라서 number, string, boolean , bigint, symbol ,null, undefined가 아닌 나머지를 의미합니다.

---

😋타입 단언(Type assertions)

개발자가 값에 대해 정확히 알고 있음을 타입스크립트에게 알려주는 방법입니다.

타입 단언은 두가지 형태의 문법으로 표현할 수 있습니다.

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

위 예제에서 someValue는 any 타입으로 선언되어 타입스크립트는

someValue가 어떤 값을 가지고 있는지 모르지만 개발자는 someValue가 string인걸 알고있습니다.

따라서 개발자는 타입 단언을 통해 someValue는 문자열이라고 단언합니다.

위와 같이 작성한 방식을 angle-bracket 방식이라고 부릅니다.

 

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

위 방식은 as 문법입니다.

두 예제는 동일하게 동작하기 때문에 어떤 것을 사용할지는 개인의 자유입니다.

---

🐶마치며

다음은 인터페이스에 대해 다루어 보겠습니다.

---

이해했다고 생각할 때가 가장 무서울 때다.