TypeScript 이란 무엇일까

lee-goeun·2024년 2월 21일

Java에서 NodeJs로 리팩토링 하게 되면서 Java에서 구현되어 있던 interface를 NodeJs에서 사용하고 싶었는데 JavaScript에서 interface를 검색해보니 interface는 TypeScript에서만 쓸 수 있는 거 같았다. 좀 더 견고한 코딩을 하기 위해서는 TypeScript를 피할 수 없는 거 같아 이번 기회에 Crawling 기능을 NodeJs로 구현하면서 TypeScript 개념을 정리해보기로 했다. 나도 이제 고오급,,은 아니지만 중급(?)개발자까지 될 수 있을 것인가...

개념

타입스크립트(typeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다.

JavaScript vs TypeScript

기본 문법

기본 타입

: Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never

변수 타입 설정

let str:string = 'hi';
let num:numger = 100;

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

let obj:object = {};
let obj2:{name:string, age:number} : {
    name :'hoho',
    age : 22
};

함수 타입 설정

  function add(a:number, b:number):number{
     return a+b;
   }
   //optional parameter
   function log(a:string, b?:string, c?:string){
     console.log(a);
   }

Tuple : 배열의 타입 순서와 배열 길이를 지정할 수 있는 타입
```
 var arr:[string,number] = ['aa', 100];
```
Enum : Number 또는 String 값 집합에 고정된 이름을 부여할 수 있는 타입. 값의 종류가 일정한 범위로 정해져 있는 경우에 유용하다. 기본적으로 0부터 시작하며 값은 1씩 증가한다.
```
enum Shoes{
	Nike = '나이키',
   Adidas = '아디다스'
}
```
Any : 모든 데이터 타입을 허용
Void : 변수에는 undefined와 null만 할당하고 함수에는 리턴 값을 설정할 수 없는 타입.
Never : 특정 값이 절대 발생할 수 없을 때 사용

인터페이스

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

변수와 함수에 활용한 인터페이스

	var person:User ={
    	age:30,
        name:'aa'
    }
    
    function getUser(user:User){
    	console.log(user);
    }

인덱싱

	interface StringArray{
    	[index:number]: string;
    }
    
    var arr2:StringArray = ['a','b','c'];
    arr2[0]=10; //error;

딕셔너리 패턴

	interface StringRegexDictionary{
   	[key:string]: RegExp
   }

   var obj:StringRegexDictionary = {
   	cssFile : /\.css$/,
       jsFile : 'a' // Error
   }

   obj['cssFile'] = /\.css$/',
   obj['jsFile'] = 'a' // Error

인터페이스 확장

	interface Person{
      name : string;
      age : number;
  }
  
  interface User extends Person{
  	language : string;
  }

오퍼레이터

Union 타입 : 자바스크립트의 OR 연산자와 같은 의미의 타입. Union 타입으로 지정하면 각 타입의 공통된(보장된) 속성에만 접근 가능하다.
```
	function askSomeone(someone: Developer2 | Person){
		console.log(someone);
    }
```
Intersaction 타입 : 자바스크립트의 AND 연산자와 같은 의미의 타입. 각각의 모든 타입이 포함된 객체를 넘기지 않으면 에러가 발생.
```
 function askSomenone(someone: Developer & Person){
     console.log(someone);
  }
```

제네릭

한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용. 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.

  function logText<T> (text:T):T{
    return text;
  }
  
  logText<string>("aa");
  logText<number>(100);

타입 추론

: 타입스크립트가 코드를 해석하는 과정.

   var a = true;
   a = 100; //Error

-> 해당 코드가 a 변수를 Boolean 타입으로 추론했기 때문에 Number타입을 할당하면 에러가 발생한다.
-> 가장 적절한 타입(Best Common Type) : 배열에 담긴 값들을 추론하여 Union타입으로 묶어나가는 것을 말한다.

  	var arr = [1, 2, true];

TypeScript는 해당 코드의 타입을 Number | Boolean으로 정의한다.

인터페이스와 제네릭을 이용한 타입 추론 방식

interface Dropdown<T>{
 	value:T,
     text:'String'
 }
     
 var items:Dropdown<boolean>{
 	value:true,
     text:'aa'
 }

🧐❓TypeScript에 type을 지정하지 않으면 어떻게 될까?

NodeJs에서 TypeScript 사용하기

관련 모듈 설치
- @types/node : 모듈은 node에서 사용되는 TypeScript의 타입 정의를 가져오는 것이다.
  => 명령어 : npm(yarn) add @tyeps/node
- typescript : TypeScript 모듈이다.
  => 명령어 : npm(yarn) add typescript
- ts-node : 개발용으로

참고사이트 :
https://offbyone.tistory.com/445
https://www.samsungsds.com/kr/insights/typescript.html