TypeScript 기초

본 게시글은 TypeScript의 공식문서를 기반으로 작성되었습니다.

https://www.typescriptlang.org/ko/docs/handbook/typescript-from-scratch.html

Documentation - TypeScript for the New Programmer

TypeScript를 왜 쓸까?

TypeScript는 간단하게, 자바스크립트에 엄격한 자료형 검사가 추가된 형태라고 생각하면 된다.

 

왜 굳이 자유로운 언어인 JavaScript에 제약을 걸어 사용하는지 의문이 들 수 있다.

 

언어가 '자유롭다'라는 것은, 작성하는 사람에 따라 그 형태가 천차만별로 달라진다는 것을 의미한다.

그 형태는 개발 대상의 크기가 커질수록 더욱 큰 변동성을 띄게된다.

따라서 언어의 자유로움은 개발 대상의 크기가 커지거나, 개발에 참여하는 사람이 많아지는 경우 오히려 단점으로 작용할 수 있다.

 

또한 JavaScript에서는 따로 자료형을 체크하거나 엄격한 문법적 검사를 수행하지않기 때문에 예상하지 못한 오류가 발생할 수 있고, 이를 디버깅하는데 굉장히 많은 시간이 소요될 수 있다.

 

공식문서에서 다음과 같은 예시를 확인할 수 있다.

const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

코드를 보면, obj.height 에 접근하는 과정에서 오타가 존재하는 것을 확인할 수 있는데,

자바스크립트의 경우 여기서 에러를 발생시키지 않는다.

결국 area에는 엉뚱한 값이 들어간채로 코드가 줄줄이 실행되게되고, 개발자는 코드를 하나하나 찍어보며 어디서 값이 이상하게 변했는지 찾아야만한다.

 

타입스크립트를 사용하면, 이러한 문법적인 에러를 미리 찾아주기 때문에 사용자가 변수의 값을 하나하나 확인해보아야 하는 대참사를 막을 수 있다.

TypeScript의 특성

TypeScript는 기본적으로 JavaScript의 런타임 특성을 가진 프로그래밍 언어이다. 

TypeScript로 작성된 코드는 컴파일러가 코드 검사를 마치면 타입을 삭제해서 '컴파일 된' 코드를 만들어낸다.

즉 코드가 한 번 컴파일되면, 결과로 타입이 명시되지 않은 일반 JS파일이 리턴된다.

 

타입 추론

TypeScript는 변수 생성과 동시에 특정 값이 할당되는 경우, 해당 변수가 어떤 자료형을 가지는지 스스로 추론한다.

let helloWorld = "Hello World";

위 코드에서, TypeScript는 할당되는 값을 바탕으로 helloWorld가 string 변수임을 추론한다.

 

타입 정의

TypeScript에서는 새로운 데이터 타입을 정의하여 사용할 수 있다.

 

다음과 같이 타입을 선언할 수 있다.

interface User {
  name: string;
  id: number;
}

이후, 변수 선언 뒤에 `: TypeName` 구문을 사용해서 객체가 새로 정의한 타입을 준수하고 있음을 선언할 수 있다.

const user: User = {
  name: "Hayes",
  id: 0,
};

 

만약 아래와 같이 인터페이스를 따르지 않는 객체를 생성하면 에러가 발생한다.

const user: User = {
  username: "Hayes",
  id: 0,
};

 

원시 타입

TypeScript에서 따로 정의하지 않고 사용할 수 있는 원시 타입은 다음과 같다.

 

1. boolean

2. bigint

3. null

4. number

5. string

6. symbol

7. object

8. undefined

9. any : 어떤 타입이든 허용

10. void : undefined를 리턴하거나 리턴 값이 없는 함수에 사용한다.

 

타입 구성

TypeScript에서는 여러 가지 타입을 이용하여 새로운 타입을 작성할 수 있다.

가장 많이 사용되는 코드로는 유니온(Union)과 제너릭(Generic)이 존재한다.

 

Union

유니온은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법이다.

type MyBool = true | false;

위와 같이 선언하면, MyBool이 true또는 false가 됨을 의미한다.

 

function getLength(obj: string | string[]) {
  return obj.length;
}

위와 같이 선언하면, 매개변수 obj가 스트링 혹은 스트링 배열로 들어올 수 있음을 의미한다.

 

Generic

제너릭은 타입에 변수를 제공하는 방법이다.

 

배열에 제너릭을 설정하면, 배열 안에 들어갈 값을 한정지을 수 있다.

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

 

readonly

JavaScript에서 const 선언은 해당 변수의 수정을 불가능하게 만든다.

하지만 배열과 같은 경우, 내부 entry의 값을 변경할 수 있는데, TypeScript에서 제공하는 readonly 제어자를 사용하면 모든 프로퍼티를 수정이 불가능하게 변경할 수 있다.

interface Rx {
  readonly x: number;
}
let rx: Rx = { x: 1 };
rx.x = 12; // error