[TypeScript 독학] #1 타입스크립트 개념 및 타입

안광의·2022년 2월 10일

TypeScript 독학

목록 보기

1/12

시작하며

지난 6개월간 부트 캠프를 마치고 취업을 준비하면서 많은 회사에서 타입스크립트를 채택하고 있다는 것을 알게 되었다. 타입스크립트는 변수의 타입을 지정해야 하는 자바스크립트 정도로 알고 있었고, 프로젝트를 진행하기 전에는 타입스크립트의 장점이 와닿지 않았다. 왜 굳이 번거롭게 타입을 지정해서 사용해야 하나라고 생각했으나 React 기반의 프로젝트를 진행하고 에러 핸들링하는 과정에서 타입스크립트의 장점이 와닿게 되었다. 또 javaScript 기반의 언어이기 때문에 수월하게 배울 수 있다고 판단해서 독학을 시작하게 되었다.

공부 계획 및 참고 자료

타입스크립트를 배우기로 정하고 어떤 자료를 바탕으로 공부할지 고민이 되었다. 온라인 상에 타입스크립트와 관련된 강의들이 많지만 유튜브에 있는 무료 강의들이나 공식문서, 블로깅들이 넘쳐나기 때문에 굳이 유료로 배울 필요가 없다고 느껴졌다. 기본 개념과 공부 순서는 아래 영상들과 사이트를 참고하고 추가적으로 궁금한 부분은 스택오버플로우나 블로깅을 찾아보면서 정리할 예정이다.

TypeScript 강좌 - 코딩앙마 : 자바스크립트를 이해한 사람을 대상으로 설명된 강의여서 불필요한 부분 없이 깔끔하게 잘 설명되어 있다.
타입스크립트 핸드북 : 유료 강좌의 교안으로도 활용되는 사이트이기 때문에 타입스크립를 배울때 필요한 거의 모든 개념이 잘 설명되어 있다.
타입스크립트 공식문서 번역 : 여러 컨트리뷰터가 참여한 타입스크립트 공식문서를 번역한 프로젝트로 핸드북보다 더 자세하고 추가적인 내용이 포함되어 있다.
타입스크립트 플레이그라운드 : 타입스크립트 코드를 작성할 수 있는 사이트로 자바스크립트로 컴파일된 코드, 에러 등을 확인할 수 있다.

타입스크립트란?

(이미지 출처 https://serokell.io/blog/why-typescript)

타입스크립트는 자바스크립트의 단점을 보완하기 위해 만들어진 정적 타입 언어(static type language)이다.

자바스크립트가 확장된 언어이기 때문에 기존 자바스크립트의 기능을 모두 사용할 수 있고 브라우저에서 실행하기 위해서 컴파일(complile)이라는 변환 과정을 거쳐야 한다.

그렇다면 왜 타입스크립트를 사용해야 할까?

에러의 사전 방지
코드 가이드 및 자동 완성(개발 생산성 향상)

에러의 사전 방지

// js
function sum(a, b) {
  return a + b;
}

// ts
function sum(a: number, b: number) {
  return a + b;
}

숫자 a, b를 인자로 받아 더한 값을 리턴해주는 sum이라는 함수에 문자열 '10', '20'넣어서 sum('10','20')을 실행한다면 자바스크립트에서는 오류 없이 '1020'이라는 값이 출력될 것이다. 하지만 타입스크립트에서 동일한 함수를 실행한다면

sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

이렇게 number 타입에 문자열을 할당할 수 없다고 에러가 발생하게 되어 의도하지 않은 코드의 동작을 예방할 수 있게 된다. 실제로 프로젝트를 하면서 서버에서 받아온 데이터가 예상과 다른 타입이여서 에러가 난 경우가 있었는데, 타입스크립트를 사용했다면 빠르게 에러를 찾아냈을 것이다.

코드 가이드 및 자동 완성(개발 생산성 향상)

개발을 할 때 가장 많이 사용되는 Visual Studio Code의 툴 내부가 타입스크립트로 작성되어 있어 코드 가이드 및 자동 완성 기능을 활용하여 생산성을 향상 시킬 수 있다.

위 이미지처럼 타입스크립트의 경우 total의 타입이 number로 정해져 있기 때문에 자바스크립트 Number에서 제공하는 API인 toLocaleString을 일일이 작성할 필요없이 자동 완성 기능을 통해 선택할 수 있다.

타입스크립트 기본 타입

타입스크립의 핵심인 타입의 종류는 크게 12가지가 있고 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다.

Boolean

let isLogin : boolean = false;

Number

let num: number = 10;

String

let str: string = 'hi';

Object

타입을 object로 정의하면 모든타입의 값을 할당할 수 있기 때문에 타입 검사에 엄격한 타입스크립트를 사용한 목적이 모호해진다. interface나 type을 사용하여 객체 타입을 정의할 수 있는데 이후에 다시 정리할 예정이다.

let obj: object = {name: 'Name', age: 29}

Array

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

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

타입이 배열인 경우 요소의 타입까지 정의해주어야 하는데 위 두가지 방식으로 타입을 정의할 수 있다.

Tuple

튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.

let arr: [string, number] = ['hi', 10];

arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.

만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 난다.

Enum

enum은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미한다.

좌 : 타입스크립트, 우 : 자바스크립트

인덱스를 지정하지 않을 시, 0부터 차례대로 인덱스가 부여되고 a[0] a,apple처럼 양방향으로 맵핑된다.

인덱스를 원하는 대로 부여할 수 있고, 위 코드처럼 한 요소만 인덱스를 부여하면 다음 요소들도 차례대로 다음 숫자가 인덱스로 부여된다.

인덱스 대신에 문자열을 부여할 수도 있는데 이 경우에는 단방향으로 맵핑된다.

Any

기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입으로 모든 타입을 할당할 수 있다.

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

Void

변수에는 undefined와 null만 할당이 가능하고, 함수로 설정할 경우 리턴 값을 설정할 수 없다.

function sayHi() : void {
    console.log('Hi')
}

let a : void = null;

let b : void = undefined;

Null

let a : null = null

Undefined

let a : undefined = undefined

Never

never는 일반적으로 함수의 리턴 타입으로 사용되는데, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미한다.

// 항상 오류 발생
function invalid(message:string): never {
  throw new Error(message);
}
// 무한 루프
function infiniteAnimate(): never {
  while ( true ) { infiniteAnimate(); }
}

사용자 정의 타입

객체나 함수처럼 복잡한 타입을 매번 설정하는 것은 번거롭기 때문에 사용자가 직접 type 키워드를 사용하여 타입 별칭(Type Alias)을 정의할 수 있다.

type operation = {
  data: number[],
  output:(num:number)=>number[]
};
// 사용자 정의 타입 operation 적용 예시
let sum:operation = {
  data: [10, 30, 60],
  output(num){
    return this.data.map(n=>n+num);
  }
};
let multiply:operation = {
  data: [110, 230, 870, 231],
  output(num){
    return this.data.map(n=>n*num);
  }
};

유니온(Union) 타입

function getAge(age: number | string) : string {
  if (typeof age === 'number') {
    return age.toString();
  }
  else {
    return age;
  }
}

자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입으로 두 가지 이상의 타입을 모두 허용한는 경우에 사용한다.

마치며

enum처럼 javaScript에는 없는 타입들이 있지만 (javaScirpt에 void 연산자가 존재한다는 사실을 새롭게 알게되었다.)다른 부분들은 javaScript와 동일한 부분이 많아서 문법이나 기본 타입들을 이해하는데 어려움이 없었다. 심화적으로 공부하면서 각각의 타입들이 어떻게 활용될 수 있는지 알아볼 예정이고, 타입스크립의 기본 문법을 배운 이후에는 기존에 javaScript로 구현한 React 기반의 프로젝트를 TypeScript로 변경해보는 연습을 진행하는 순서로 공부를 진행하려 한다.

안광의

개발자로 성장하기

다음 포스트

[TypeScript 독학] #1 타입스크립트 개념 및 타입