[ Typescript ] 타입스크립트

Typescript

Javascript를 기반으로 하는 오픈소스이며 Type을 추가하여 올바른 입출력값의 Type을

미리 가이드할 수 있고 해당 Type이 아닌경우 ide가 에러를 일으키기 때문에

문제를 원천적으로 방지할 수 있다.

 

 

Typescript에 대한 견해

분명 대부분의 개발자들이 코딩을 입문한지 얼마 안됐을때 나와 비슷한 생각을 했을 것이다. "그냥 코드간결하고 실행 잘되고, 가독성 좋으면 그만이지 코드 난잡해지게 굳이...?"하지만 이 생각은 단 하나의 Toy프로젝트를 만들고 달라지게 되었다.

 

가장큰 이유는 뜻밖의 에러, 의도치 않은 결과가 실행되는 경우가 적지 않기 때문이었다.

이러한 경우 나는 코드의 Type 문제가 90%였고 내가 혼자서 만드는 Toy프로젝트만 해도 이런데

만약 현업을 하게된다면...? 이건 엄청난 기여를 하겠구나 하고 생각하게 되었다.

특히나 코드의 양이 방대해진다면 나라면 고민할 것도 없이 채택해야겠다! 라고 생각했다.

 

타입스크립트를 사용하지 않는 가정하에 현업을 하여 방대한 코드를 여럿이서 공유하며

개발을 한다고 가정해보면 내가 직접 의도하여 만든 함수나 변수가 아니기 때문에

하나하나 추론을 해 나아가며 return되는 값의 Type이나 함수에 매개변수로는

어떤 Type이 들어가야하는지 등을 알아내기 위한 시간비용은 무시할 수 없다.

 

이런 문제는 Typescript의 사용만으로 크게 개선될 수 있고 엄청난 시간을 절약할 수 있게 된다.

나에게 이것 만으로도 Typescript를 사용해야하는 이유로 충분해졌다.

 

 

 

Typescript Install

 

1. npm install

npm install -g typescript

기본적인 타입스크립트의 인스톨 방식

 

 

2. tsconfig.json

//tsconfig.json 파일을 만들고 아래 코드입력

{
  "compilerOptions" : {
    "target": "es5",
    "module": "commonjs", 
  }
}

Typescript를 사용하기 위해서는 반드시 tsconfig.json파일이 존재해야한다.

 

 

3. ts -> js 변환

//터미널에 입력 (basic javascript의 경우만)
tsc -w

 

 

4. React Typescript 생성

//react와 마찬가지로 node 버전이 14, 혹은 그 이상인 경우만 가능.
npx create-react-app@latest my-app --template typescript

 

 

5. Next Typescript 생성

npx create-next-app --ts
//이 후 "What is your project named?" 메시지가 뜨면 프로젝트 이름을 입력하면 된다.

 

 

 

사용예시

let name :string = "문자만"
//string, boolean, number, null, undefined, bigint, [], {} 등 있다

let name :string[] = ["kim", "park"]
//name변수엔 array에 string인 값만 할당 할 수 있다.

let NAME :{ name : string } = { name : 'kim' }
//NAME변수에 할당된 key(name)속성에 값은 string만 올 수 있다.

let 이름 :{ name? : string } = { name : 'kim' }
//이름변수에 name이란 속성이 올지말지 확실하지 않을땐 물음표를 사용해서
//있을수도 있고 없을 수도 있는 옵션인 타입으로 지정해줄 수 있다.

let name :string | number = 'kim';
let name :string[] | number = [ 'kim', 123 ]

//이런식으로 or기호를 넣어주면 타입 중 하나만 들어가도
//에러가 뜨지 않는다.
//Union type 이라고도 한다.


type myType = string | number;
let name :myType = 123;
//이렇게 타입변수를 만들어줘서 사용도 가능하다.


function FUC (x :number) :number {
    return  x * 2
}
FUC( "123" );
//이런 경우 매개변수타입은 number이고 리턴값도 number여야 하기때문에
//에러가 뜬다. 반드시 number Type으로 적어줘야 제대로 작동한다.

type Member = [number, boolean];
let john:Member = [ 123, false ];
//array타입을 만들때 예시이다.
//tuple타입이라고 한다.


type Member = { name : string };
let john :Member = { name : 'kim' };
//이렇게 name이라는 key엔 스트링이 들어가야한다.

//만약 name속성 외에도 age, address 등등 여러 속성이 필요할 경우
//아래와 같이 대표적으로 지정이 가능하다.
type Member = { [key :string] : string };
let john :Member = { name : 'kim', age : '123', address };


class User {
    name :string;
    constructor(name :string){
        this.name = name;
    }
}
class 타입지정도 할수 있다.

 

 

마치며...

사용예시의 경우 간단하고 대표적인 예만 명시해 두었지만 실제로 프로젝트를 진행하면서 더욱 다양하고 많은 Typescript를 사용하고 있다. 다행이 document에서 서술이 잘 되어있고 여러 사람들이 사용하는 만큼 타 기술블로그에서도 이해하기 쉽게 서술하고 있어 러닝커브가 크지 않았던 것 같다. 앞으로도 잊지말고 typescript 해야겠다.