Typescript #1 - install, Type

Fstone·2020년 12월 4일
0

Typescript

목록 보기
1/3

Typescript

  • Javascript 위에서 구동되는 Javascript의 상위 version programming language이다.

Javascript는 다른 언어들과 다르게 data의 type을 정의하지 않아도 구현이 가능하지만 function을 만든다고 가정할 때 잘못된 arguments를 받고 잘못된 값을 반환하거나 오류를 마주쳤을 때 어디서 잘못된건지 알기 어렵다.

예를 들면 NaN과 같은 오류.

Typescript는 위와 같은 상황의 오류를 방지하기 위해 사전에 변수나 data의 type을 정의해주어 구현이 가능하게 해준다.

Install

npm install typescript

tsconfig.json

  • TS는 JS의 Superset이지만 TS의 결과물을 확인하기 위해선 JS로 compile하여야 한다.

"CompilerOptions"를 작성하여야 하는데 많은 option이 있다. 프로젝트를 진행하면서 적절한 option을 찾아 tsconfig.json에 설정해 주어야 한다.

tsc-watch

  • tsc는 Typescript를 설치하면 compile을 도와주는 terminal 명령어이다.

  • index.ts

const greeting = "Hello";

console.log(greeting);

아직 TS와 JS의 차이를 보이진 않지만 js를 node에서 확인하려면 terminal에서 node index.js를 실행했던 것 같이 tsc index.ts를 실행하면 tscindex.ts를 JS로 compile하여 위 console을 node에서 확인할 수 있다. tsconfig.json에서 option을 설정해주어야 한다.

  • tsc-watch는 node의 nodemon처럼 code의 변화를 감지하고 바로 전달해주는 역할을 한다.

    npm install tsc-watch --dev

  • 위처럼 tsc로 compile하게 되면 tsc는 compile을 하고 내용을 보여주면서 동시에 JS로 compile이 완료된 js 파일을 생성한다. js 파일 생성 경로는 tsconfig.json에서 설정할 수 있다.

Type

기본 type

  • string
  • number
  • boolean
  • null
  • undefined
  • array
  • tuple
  • object
  • enum
  • any
  • void
  • never

Type 정의

  • variable, 변수
let variable;

JS에선 변수를 선언하면 저 변수안에 어떤 type의 값이든 다 가리킬 수 있다. TS에서도 type을 정의해주지 않으면 물론 실행은 가능하지만 그건 TS를 쓰는 의미가 없다.

let variable: string;

위처럼 변수의 type을 정의해주면 저 변수에는 string type의 값만 전달할 수 있다. 다른 type의 값이 들어가면

Type '전달한 TYPE' is not assignable to type '정의한 TYPE' 이라는 오류를 받게 된다.

  • Array, 배열
let arr: number[] = [];
// 또는 
let arr: Array<string>;

배열은 위처럼 type을 정의할 수 있다. 하지만 위처럼 할 경우 저 배열에는 하나의 type만 들어갈 수 있기 때문에 만약 다른 type의 값이 들어가야 하는 경우

  • Tuple로 정의할 수 있다.
let arr: [string, number];
  • Any
let anyType: any; 

Type을 any라고 정의해 주는 경우 이 변수에는 어떤 유형의 data든 다 받을 수 있다.

  • function parameter, 함수 매개 변수
const func = (num, str) => {
  console.log(num);
  console.log(str);
  console.log(num + str);
};

console.log(func(24, 34)); // 58;

숫자와 문자를 인자로 받고 그 인자와 인자의 합을 console에서 확인하려는 함수이다. JS에서는 문자 인자로 숫자가 들어왔음에도 실행되는걸 확인할 수 있다. 위에서 말한 잘못들어온 data인데도 JS에선 실행이되어 예상과는 다른 결과물을 볼수 있다는 오류로 잘 작성하진 못했지만 극단적인 예시이다.

TS에서는 위와같은 오류를 방지하기 위해 함수의 매개 변수의 type을 미리 정의해주어 해당 type의 인자만 받을 수 있다. 잘못된 type의 data가 들어오면 당연히 위 변수와 같이 type 오류가 발생한다.

const func = (num: number, str: string) => {
  console.log(num);
  console.log(str);
  console.log(num + str);
}

console.log(func(24, 34)); // error!! 

따라서 잘못된 인자를 받았을 경우 잘못된 결과물을 받는 것이 아니라 error를 발생시켜 어디서 잘못됐는지 JS보다 수월하게 확인할 수 있다.

또한 함수의 반환 값도 미리 type을 정의할 수 있다.

const func = (num: number): number => {
  return num;
};

함수 매개 변수 뒤에 : number라고 정의하면 이 함수는 숫자만 반환해야 한다. 위와 같은 경우 그럴일 없겠지만 숫자가 아닌 값을 반환할 경우 당연히 error!!
일반적이진 않지만 반환 값이 없어야 하는 함수의 경우 void라고 type을 정의해주면 된다.

Reference

https://www.typescriptlang.org/docs/handbook/basic-types.html

https://nomadcoders.co/typescript-for-beginners/lectures/1717![](https://velog.velcdn.com/images%2Ffstone%2Fpost%2Fcbdba5dd-13d4-47f7-bb46-d44b666de195%2Ftypescript-logo.png)

0개의 댓글