서론

드디어 타입스크립트를 스팩에 추가할때가 되었다.
인강을 보면서 연습해본결과 첫느낌은 뭐랄까
코드를 퍼즐형식으로 만드는 느낌!

뭐 개인의 취향을 떠나서
회사에서 많이 요구하는 추세이고,
내 코드가 더 멋져진다면 뭐든지 추가할꺼니깐
언제나 말하지만 나는 내아가가 제일 잘났음 좋겠어!

타입스크립트

장점

• 빠른 에러 피드백
  타입이란 제한을 추가하여 타입으로 인한 에러를 빠르게 잡아낼 수 있다.
  
• 넓은 활용성
  Type + Js 이다.
  자바스크립트에 타입이라는 것을 추가하였다는 것이다.
  이를 통하여 Js를 기초로한 Node나 Express, React 등에서 사용할 수 있다는것을 알 수 있다.
• 편한 자동완성 기능
  타입을 지정해주지 않았을때
  코드 에디터에서는 이것의 타입을 모르기때문에 가능한 api를 띄어주지 않는다.
  
  하지만 타입을 정해준다면, 코드 에디터에서는 띄어주기에 빠른 코딩이 가능하다.
  

세팅

package 생성

일단 패키지를 쓰게 되니
npm init --yes로 package.json을 만들어주자

타입스크립트 설치

언제나 그렇지만 공식홈페이지를 방문하는 습관을 들이자
TypeScript 공식홈페이지

해당 공식문서에서는
npm install typescript --save-dev
위와 같은 명령어로 설치하도록 명시되어 있다.

그러나 글로벌로 설치하지 않았을때
터미널에서 명령어를 인식 못하는 경우가 있어서

글로벌로 설치 해주겠다.
npm install typescript --g

tsconfig 생성

tsc -init 명령어를
터미널에 입력하여 tsconfig를 생성해주자

tsconfig.json이 없어도 간단한 타입스크립트를 실행 할 수 있지만,
해당작업을 해줌으로써 더 간편한 명령어로 작업할 수 있다.

사용법

컴파일

파일이름.ts 형식으로 typescript 파일을 만들어준다.
나는 index.ts로 만들었다.

만든 ts파일안에 출력문 하나 적어주자

console.log("We're doing typescript");

이제 ts파일을 js파일로 컴파일 할 것인데,
tsconfig.json파일을 생성한사람은
tsc명령어를 치면 프로젝트 폴더 안의 ts파일 전체가 자동으로 컴파일 될 것이다.

또한, ts파일이 변환될때마다 자동으로 컴파일하게 만들고싶을때는
tsc -w라고 터미널에 입력해주면 된다.

node index.js를 터미널에 입력하여 실행시켜보자

타입지정

타입스크립트의 메인인 타입지정은
:type를 적어주면 된다.

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

위에 코드에서는 a와 b라는 매개변수 자료형을 number로 지정하였고,
함수 sum의 반환값을 number로 지정하였다.

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

sum(1, "3");

이때 설정된 자료형과 다른 자료형을 지정하면

이렇게 친절하게 에러가 뜬다.

선택적 매개변수

인자가 있어도 되고 없어도 될때에는
?를 적어주면 된다.

interface

타입에 대한 설정을 한 오브젝트에 묶은것을 인터페이스라고 한다.
하지만 ts에서만 존재, 작동한다.

interface Order {
  customer: string;
  menu: string;
  count: number;
}

function TakeOrder(person: Order): string {
  return `customer ${person.customer}, u order ${person.menu} x ${person.count}`;
}

class

앞서 말한대로 interface는 ts에서만 작동하기에
다른 js에서 사용하려면 class로 만들어야한다.

// interface Order {
//   customer: string;
//   menu: string;
//   count: number;
// }

class Order {
  customer: string;
  menu: string;
  count: number;

  constructor(customer: string, menu: string, count: number) {
    this.customer = customer;
    this.menu = menu;
    this.count = count;
  }
}

const sudal = new Order("Sudal", "meat", 3);

function TakeOrder(person: Order): string {
  return `customer ${person.customer}, u order ${person.menu} x ${person.count}`;
}

console.log(TakeOrder(sudal));