TypeScript 프로젝트 환경 구성하기

1. 프로젝트 폴더 생성

mkdir typescript-learn(폴더명)
cd typescript-learn(폴더명)

2. 새로운 프로젝트 초기화

npm init -y

3. TypeScript 설치

npm install typescript --save-dev

4. 루트 디렉토리에 tsconfig.json 파일을 생성 후 아래 내용 삽입

//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다.
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ]
}

5. src 폴더에 index.ts 파일을 만들어서 TypeScript 코드를 작성 가능

• typescript-eslint, Prettier 확장프로그램 설치

TypeScript 문법 (타입, 함수, 연산자 활용 타입)

1. Type

1-1. Boolean(불리언) 타입

가장 기본적인 데이터 타입으로, JavaScript에서도 마찬가지로 boolean 값이라고 불리는 참(true), 거짓(false) 값을 의미.

let isShow: boolean = true;
let isDone: boolean = false;

1-2. Number(숫자) 타입

JavaScript와 마찬가지로 TypeScript 또한 정수와 실수의 구분 없이 Number 타입 하나로 표기한다. TypeScript는 이 외에도 추가로 bigint를 지원한다.

let number1: number = 5;
let number2: number = 0.7;

1-3. String(문자열) 타입

TypeScript는 JavaScript처럼 큰따옴표(")나 작은따옴표(')를 사용하여 문자열 데이터를 표현한다. 또한 백틱(`)을 사용한 문자열인 템플릿 리터럴을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있다.

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`

1-4. Array(배열) 타입

TypeScript는 JavaScript처럼 값들을 배열로 다룰 수 있게 할 수 있으며, 두 가지 방법으로 배열 타입을 선언해 사용할 수 있다.

배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 작성하는 것은 불가능하다.

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

첫 번째 방법: 배열 요소들을 나타내는 타입 뒤에 배열을 나타내는 []을 쓰는 것

두 번째 방법: 제네릭 배열 타입을 사용하는 것

Array를 먼저 작성한 뒤, <>안에 배열의 요소들을 나타내는 타입을 작성
제네릭 타입으로 작성 시, <> 안에는 하나의 인자만 들어갈 수 있다.
let shoes: Array<string, number> = ["Nike", 78, "Asics", 34]; (X)

1-5. Tuple(튜플) 타입

TypeScript에서 튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

let user: [string, number, boolean] = ["kimcoding", 20, true];

모든 요소가 전부 같을 필요는 없지만, 배열의 index마다 타입이 정해져 있기 때문에 정확한 index에 접근할 필요가 있다.

console.log(user[2].toString());

이렇게 user[2]에 접근하게 되면, user[2]에 있는 요소는 boolean 타입이기 때문에 타입 에러가 발생하게 되는 것이다.
JavaScript에서도 튜플 타입을 지원하며, JavaScript에서의 튜플 또한 여러 개의 값을 가진 배열을 나타내는 데에 사용한다. 그러나 JavaScript에서는 튜플 타입을 명시적으로 선언할 수 없기 때문에 개발자가 직접 튜플의 각 요소의 타입을 확인하고 유추해야 하므로 타입 에러가 더 쉽게 발생한다.

1-6. Object(객체) 타입

TypeScript에서 객체는 JavaScript와 마찬가지로 원시 타입이 아닌 타입을 나타낸다.

JavaScript에서 Object(객체) 타입은 프로퍼티를 가지는 JavaScript의 값을 말하며 typeof 연산자를 사용했을 때 “object”을 반환하는 모든 타입을 의미한다.

JavaScript 원시 타입: number, string, boolean, undefined, null, symbol

let obj: object = {};

TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있다.
(그러나 이는 타입 안정성을 보장하지 않기 때문에 편하지만, 추천하는 방법은 아니다.)

따라서 객체의 프로퍼티 타입들을 각기 명시해 주는 것이 훨씬 좋다! 객체는 이런 방식으로 key-value에 구체적인 타입까지도 지정할 수 있다.

1-7. Any 타입

간혹 애플리케이션을 만들 때, 알지 못하는 타입 을 표현해야 할 때도 있다.
클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있는데, 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있다.

let maybe: any = 4;

any 타입을 사용하게 되면, 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있게 된다.
아래 예시로 살펴보자.

let obj: object = {};

//에러
obj = "hello";

let maybe: any = 4;

//정상적으로 동작
maybe = true;

또한 엄격한 타입 검사를 진행하지 않기 때문에, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않는다.

실제 할당된 값이 가지지 않는 메서드 및 프로퍼티라서 반환 값은 undefined

let maybe: any = 4;

//undefined로 출력
console.log(maybe.length);

또한 any 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용하다.
예를 들어서 여러 타입이 섞인 배열을 받고자 할 때!

let list: any[] = [1, true, "free"];

/* any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 
number 타입으로 재할당할 수 있다. */ 
list[1] = 100;

tsconfig.json 설정 파일의 세부 내용