[Typescript] 수박 겉핥기식 공부시작 및 설치

앞서...

본 공부는 노마드 코더의 Typescript로 블록체인 만들기 강의를 통해 진행했습니다.

 

Typescript 는 javascript의 업그레이드 버전이라고 말 할수 있는데

자바스크립트에는 엄격한 규칙이 없어 유연하게 개발을 할 수 있습니다.

 

다만 큰 프로젝트를 진행하고 팀으로 일을하다보면 엄격한 규칙이 단점이 되게됩니다.

자바스크립트는 2 + "2" = 4 인 number + "string : number" 이 가능하여

버그를 발생할 수 있는 여지가 있습니다.  

 

 

Typescript의 특징

참고 : https://www.samsungsds.com/kr/insights/TypeScript.html

 

 

특징 1. 컴파일 언어, 정적 타입 언어

 

자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다.

인터프리터 언어란 컴파일 없이 소스코드를 바로 실행하는 언어를 말합니다.

런타임은 프로그램이 실행되고 있는 동안의 동작을 말합니다.

 

반면에 타입스크립트는 정적타입의 컴파일 언어로

타입스크립트의 컴파일러 또는 바벨을 통해서 자바스크립트 코드로 변환됩니다.

컴파일 언어의 장점으로는 코드의 실행속도가 빠르다는 장점이 있는데

그에 따라 실행 속도도 빠르고 코드 작성중에 타입을 체크해 오류를

확인할 수 있다는 장점이 있습니다.

 

 

특징 2. 자바스크립트 슈퍼셋( Superset )

 

슈퍼셋이란 상위확장을 말합니다.

타입스크립트는 자바스크립트의 슈퍼셋이라는 말은 자바스크립트 문법에서

타입스크립트 문법을 추가한 언어라는 말입니다.

따라서 타입스크립트는 자바스크립트와 100%호환이 됩니다.

 

기초적인 타입스크립트의 특징을 알아보았으니

이제 강의를 통해 공부를 진행해보도록 하겠습니다.

 

 

 

Typescript 설치 진행

 

1. npm install

npm 패키지를 사용하기 위해 npm을 설치해줍니다.

프로젝트를 진행할 폴더의 터미널에서 다음 명령어를 입력해줍니다.

$ npm install

 

2. npm intall typescript -g

타입스크립트를 global 경로에 설치해줍니다.

 

$ npm intall typescript -g

 

 

3. tsconfig.json 파일 생성 및 기초 세팅과정 , index.ts 파일 생성

해당 최상위 root 경로에 tsconfig.json 파일을 생성해줍니다.

이 파일은 타입스크립트의 설정파일이 됩니다.

 

그리고 다음 코드들을 작성해줍니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2015",
    "sourceMap": true
  },
  "include": ["index.ts"],
  "exclude": ["node_modules"]
}

typescript에게 어떻게 javascript로 변환하는지 알려주고 몇가지 옵션들을 설정했습니다.

우선 강의에서 설명해주는 옵션들로 진행하고 이후 더 세밀한 공부가 필요할듯 싶습니다.

 

compilerOptions

module : node.js 를 평범하게 사용하고 다양한걸 import / export 할 수 있게 만듭니다.

target : 어떤 버전의 javascript로 컴파일 되고 싶은지 적습니다.

sourceMap : sourceMap 처리를 하고싶은지 알려줍니다.

(배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능이라고 합니다.)

 

include : 컴파일 과정에 포함되는 파일을 배열 형태로 넣습니다.

exclude : 컴파일 과정에 제외하는 옵션입니다.

 

 

ts 컴파일하기 및 오류해결

 

index.ts 파일 생성

최상위 루트에 index.ts 라는 타입스크립트 파일을 생성해줍니다.

 

 

 

그 다음 터미널에 tsc 명령어를 입력해줘서 타입스크립트를 컴파일합니다.

$ tsc

 

오류발생....

하지만 다음과 같은 오류가 발생했습니다.

보안오류에 직면했습니다....

하지만 해결방법이 있습니다.

 

1. Visual Studio Code 를 관리자 권한으로 실행해줍니다.

2. 터미널에 다음코드들을 순서대로 입력해줍니다.

$ Get-ExecutionPolicy
// Restricted 출력됨
$ Set-ExecutionPolicy RemoteSigned

 

Restricted : 제한된이란 뜻이며 스크립트 파일을 로드하여 실행할 수 없는 상태를 말합니다.

RemoteSigned : 로컬 컴퓨터에서 본인이 생성한 스크립트만 실행가능하며

다운로드한 스크립트는 신뢰된 배포자에 의해 서명된 것만 실행할 수 있는 상태를 말합니다.

 

... 다시 컴파일

다시 터미널에 tsc 명령어를 입력해줘서 타입스크립트를 컴파일합니다.

$ tsc

 

해당 명령어가 동작을 한다면 index.ts 파일을 컴파일해서

index.js 와 index.js.map 파일이 생성이 됩니다.

 

 

npm start : node index.js

index.js 파일을 실행시키고 싶다면, 

package.json 에 scripts 에 다음과 같이 추가해줍니다.

node js를 통해 index.js를 실행한다는 말입니다.

{
  "name": "typescript-typechain-intro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js", // 해당 부분을 추가해줍니다
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

그리고 터미널에 npm start 명령어를 입력하면

index.ts 에 찍은 console.log가 출력이 됩니다.

$ npm start
// hello 출력

위의 과정이 가능한 이유는 tsc 를 통해서 미리 index.js 와  index.js.map 파일을 컴파일해 생성해줘서 가능합니다.

node js 는 typescript 를 읽지 못한다고 합니다.

 

 

prestart : tsc 로 start 전 컴파일하기

그럼 매번 파일을 생성하고 tsc 명령어를 입력하고 npm start를 해줘서 실행하는 귀찮은 작업을 해야할까요?

prestart라는 scripts 를 작성해주면 됩니다.

// package.json
{
    ....
    scripts": {
        "start": "node index.js",
        "prestart": "tsc", // prestart 추가
    }
	....
}

위와 같이 작성하고 npm start를 터미널에 입력해주면

tsc > node index.js 와 같은 로직으로 실행이 됩니다.

start로 실행시키기 이전에 prev start에 있는 명령어를 실행시킵니다.

 

 

 

이상으로 타입스크립트 설치 및 컴파일링 > 실행 과정에 대해서 공부해보았습니다.