TypeScript 시작!(내가 TypeScript를 배우는 이유)

오늘부터 리액트 프로젝트에서 타입스크립트 사용하기 velopert 님 블로그를 참고하여 TypeScript에 대해 학습한 내용을 정리해서 올릴 예정이다.

TypeScript는 javascript of superset으로 오픈소스 프로그래밍 언어이다.
javascript가 유명한 이유는 엄격한 규칙이 없기 때문이고, 사용하기 쉽고, 우리가 원하는 방향으로 수정이 편하기 때문이다.
그러나 큰 프로젝트를 하거나, 팀으로 일 한다거나, 버그를 최소화 하고 싶을때는 위 장점이 단점이 될 수 있다.

실제로 나도 스타트업에서 React-Native로 클라이언트 개발을 했을 당시에 state와 props가 정말 원하는 데이터로 들어가는지, 이 배열에는 값이 있다고 보장할 수 있는지 의문이 있던적이 있다. prop-types를 이용하거나 다른 예외처리로 어느정도 해결할 수 있다곤 해도 번거롭고 작성해야 할 것들이 많으며, 또한 에디터 내에서 오류를 확인하기 힘들고 코드가 실행 된 chrome devtool을 통해서 확인할 수 있다.

때문에 javascript를 사용하는 곳이면 충분히 TypeScript도 같이 고려해볼만 하다고 생각하고 특히, 규모가 큰 서비스를 개발하는 팀으로 일하는 실무에서는 어느정도 필수라고 생각한다. 나는 그러한 실무를 대비하기 위해 TypeScript를 알아가보려 한다.

$ npm install -g typescript

를 통해 typescript를 global로 설치하여 첫 공부를 시작해봤다.
지금은 혼자 공부하는 것이기 때문에 global로 설치해도 문제가 없지만 실무에서 팀 환경에서는 local로 설치해서 진행해야 한다고 한다.

tsc --init

을 통해 tsconfig.json 파일을 자동생성 할 수 있다.
tsconfig.json 파일에서는 타입스크립트가 컴파일 될 때 필요한 옵션을 지정한다.

• target: 컴파일된 코드가 어떤 환경에서 실행될 지 정의합니다. 예를들어서 화살표 함수를 사용하고 target 을 es5 로 한다면 일반 function 키워드를 사용하는 함수로 변환을 해줍니다. 하지만 이를 es6 로 설정한다면 화살표 함수를 그대로 유지해줍니다.
• module: 컴파일된 코드가 어떤 모듈 시스템을 사용할지 정의합니다. 예를 들어서 이 값을 common 으로 하면 export default Sample 을 하게 됐을 때 컴파일 된 코드에서는 exports.default = helloWorld 로 변환해주지만 이 값을 es2015 로 하면 export default Sample 을 그대로 유지하게 됩니다.
• strict: 모든 타입 체킹 옵션을 활성화한다는 것을 의미합니다.
• esModuleInterop: commonjs 모듈 형태로 이루어진 파일을 es2015 모듈 형태로 불러올 수 있게 해줍니다.
• outDir: 이를 설정하면 컴파일된 파일들이 저장되는 경로를 지정 할 수 있습니다.

기본사용

기본적으로 타입을 정의하고 그 후 값을 할당한다.
string, number, 배열의 타입까지 정의 가능하다.
'|' 를 사용해 하나의 타입으로 정의도 가능하다.

const message: string = 'hello world'; // 문자열

const numbers: number[] = [1, 2, 3]; // 숫자 배열
const messages: string[] = ['hello', 'world']; // 문자열 배열

messages.push(1); // 숫자 넣으려고 하면.. 안된다!

let mightBeUndefined: string | undefined = undefined; // string 일수도 있고 undefined 일수도 있음
let nullableNumber: number | null = null; // number 일수도 있고 null 일수도 있음

let color: 'red' | 'orange' | 'yellow' = 'red'; // red, orange, yellow 중 하나임
color = 'yellow';
color = 'green'; // 에러 발생!

interface, implements

interface 는 클래스 또는 객체를 위한 타입을 지정 할 때 사용되는 문법이다.
implements 는 해당 클래스가 interface(Shape)를 만족해야 한다는 명시한다.

interface Shape {
  getArea(): number;
}


class Circle implements Shape {
// public, private accessor 정의 가능
  constructor(public radius: number) {
    this.radius = radius;
  };

  getArea() {
    return this.radius * this.radius * Math.PI;
  }
}

class Rectangle implements Shape {
  constructor(public width: number, public height: number) {
    this.width = width;
    this.height = height;
  };

  getArea() {
    return this.height * this.width;
  };
}                        

// 각 class가 Shape으로 만들어졌기 때문에 Shape 배열
const shape: Shape[] = [new Circle(5), new Rectangle(10, 5)];

shape.forEach(shape => {
  console.log(shape.getArea());
});

interface 상속

interface Person {
  name: string;
  age?: number; // 물음표가 들어갔다는 것은, 설정을 해도 되고 안해도 되는 값이라는 것을 의미
}

//interface는 상속도 가능
interface Developer extends Person {
  skills: string[];
}

const person: Person = {
  name: '김사람',
  age: 20
};

const expert: Developer = {
  name: '김개발',
  skills: ['javascript', 'react']
};

const people: Person[] = [person, expert];

type alias

type Person = {
  name: string;
  age?: number;
};

// & 는 Intersection 으로서 두개 이상의 타입들을 합친다.
type Developer = Person & {
  skills: string[];
};

const person: Person = {
  name: '김사람'
};

const expert: Developer = {
  name: '김개발',
  skills: ['javascript', 'react']
};

// 이 부분 이해!
type People = Person[]; // Person[] 를 이제 앞으로 People 이라는 타입으로 사용 할 수 있습니다.
const people: People = [person, expert];

type Color = 'red' | 'orange' | 'yellow'; //세개 허용 가능하다.
const color: Color = 'red';
const colors: Color[] = ['red', 'orange'];

generic

generic을 이용하여 어떠한 타입이 들어와도 그 타입으로 실제 타입정의가 될 수 있다. 또한, 안에 어떤 타입 데이터가 들어가있는지 확인 할 수 있고 타입이 깨지지 않게 된다.
class People {} 와 같이 <>로 사용한다.
generic은 interface, type alias, class 모두에서 사용 가능하다.

class Queue<T> {
  list: T[] = [];
  get length() {
    return this.list.length;
  }
  enqueue(item: T) {
    this.list.push(item);
  }
  dequeue() {
    return this.list.shift();
  }
}

const queue = new Queue<number>();
queue.enqueue(0);
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
queue.enqueue(4);
console.log(queue.dequeue());
console.log(queue.dequeue());
console.log(queue.dequeue());
console.log(queue.dequeue());
console.log(queue.dequeue());

정리

TypeScript를 처음 써 보았는데, 대학생 시절 처음을 c++이나 java언어를 배웠던 느낌이 난다. type을 지정해서 코드를 작성하니 그때 그때 에디터가 에러를 잡아주고 확인할 수 있었다. 상속은 원래 알던 내용이랑 비슷한데 type alias 작성시 & 쓰는것이 상속과 비슷? 한것 같다.
배열 타입, 함수 타입 정의 까지 가능하고 void도 가능하며 그만큼 생각해서 작성해야 할 코드가 많지만 잘 배워두면 우수한 코드의 서비스를 만들 수 있을것만 같다.