1. Typescript를 사용하는 이유
자바스크립트는 자유도가 높은 대신, 형식이 정해져 있지 않기 때문에 버그가 발생한다거나 팀원간에 코드를 통한 의사소통에 어려움이 생긴다는 단점이 있다. 타입스크립트는 변수와 데이터의 종류를 명확히 지정해주기 때문에 이런 단점들이 보완될 수 있다. 타입스크립트를 통해 작성된 코드는 자바스크립트 코드로 컴파일링 되고, 해당 자바스크립트 코드가 브라우저나 node.js 등의 런타임에서 구동되게 된다. 따라서 타입스크립트는 프로그래밍 언어이자 컴파일러 역할도 한다고 할 수 있다. : Node.js가 Typescript를 이해하지 못하기 때문에 일반적인 Javascript 코드로 컴파일 하는 작업을 해준다.
2. 초기 세팅
설치
타입스크립트를 글로벌로 설치한다.
npm install typescript -g
ts-node 설치를 해서, 타입스크립트 파일을 자바스크립트 파일로 컴파일할 수 있도록 해준다.(꼭 안해도 되는듯?)
npm i -g ts-node
types/node를 설치하여, Node.js의 Type들을 쓸 수 있도록 해준다.(www.npmjs.com/package/@types/node)
npm i @types/node typescript ts-node -D
tsconfig.json
tsconfig.json을 생성하고 아래와 같이 작성한다. 또는 터미널에 tsc --init 명령어를 통해 쉽게 생성할 수 있다.
compilerOptions
vscode 에서 com 만 쳐도 일부는 자동완성이 된다.
-module : commonjs / import, export 할 수 있게 만들어준다.
-target : ES2015 / 어떤 버전의 javascript로 컴파일 되고 싶은지 적는다.
-sourceMap : true / 디버깅이 가능해도록 해주는 sourcemap 파일을 생성할 것인지를 결정한다.
-include 컴파일 과정에서 포함할 파일의 배열을 적으면 된다.
index.ts 파일 생성 후 추가한다.
-include : ["index.ts"], / 컴파일을 하고자하는 typescript 파일을 기입한다.
-exclude: ["node_modules"] / 빌드 제외 항목을 기입한다.
3. Typescript 파일 만들어보기
ts 파일 만들어보기
변수를 선언하면 밑줄이 그어지면서 뭔가 잘못 입력한 것처럼 알려주는데, 아래쪽에 export {}를 입력하면 밑줄이 사라진다. 버그인 것 같다고 한다.
간단한 함수 만들기
기본적으로 모든 타입은 any로 지정되어 있다. 파라미터 지정시에, "파라미터:type" 양식으로 각 파라미터의 type을 지정해줄 수 있다. 함수 호출 시에 지정된 형식이 아닌 인자를 입력하면 ts 파일에서 에러가 나오게 된다.
타입추론(Type inference)
만약 타입스크립트 파일에서 어떤 변수를 선언하는데 타입을 지정하지 않는다면, 타입스크립트가 타입 추론을 하여 해당 변수의 타입을 지정하게 된다. 예를 들어 let a = 5; 라고 하고 a = "hi" 라고 재지정하는 구문을 타입스크립트 파일에 작성한다면, 타입스크립트는 a의 타입을 number로 추론하였기 때문에 string으로 재지정할 수 없도록 에러를 띄운다. 또한 타입추론을 이용하면 굳이 속성의 타입값을 지정하고 기본값을 지정하지 않고 기본값만 지정할 수 있게 된다. 예를 들어 "age:number=24"로 지정할 필요없이 "age=24" 라고만 지정해도 타입추론에 의해 자동으로 타입이 설정되게 된다.
선택적 매개변수(Optional parameter)
arguments 개수가 부족하면 함수에 마우스를 올렸을 때 함수 호출부에서 경고문을 띄워주고, 실제로 compile을 할려고해도 에러가 나게 된다. parameter 부분에 물음표(?)를 붙여주면 해당 파라미터는 선택적인 것으로 설정하여 compile이 되게 할 수도 있다. 그러나 지정이 안되어 있으므로 undefined로 출력된다. 만약 하나의 함수에 여러 개의 선택적 매개변수를 지정하고 싶다면, 선택적 매개변수는 반드시 기본 매개변수들의 뒤쪽에 위치해야만 한다.
함수 반환값 타입지정
아무것도 return 하지 않는 함수라면 파라미터 선언부 괄호 끝에 콜론(:)을 붙인 후 void라고 입력해주는 것이 더 정확하다. 만약 문자열을 return 하는 함수로 바꾼다면, void도 string으로 바꿔줘야 한다. 괄호 부분 뒤에 콜론 및 타입을 입력함으로써 출력값의 타입을 정의해줄 수 있다.
컴파일 및 실행 설정
index.ts에 console.log("Helllo")를 적고 터미널에 tsc 라고 치면 index.ts를 컴파일해서 index.js와 index.js.map을 만들어준다.
npm start 명령을 하면 자동으로 컴파일 및 실행이 되도록 package.json 파일을 변경해준다.
scripts : { "start" : "node index.js", "prestart" : "tsc" }
tsc-watch로 간편하게 컴파일 및 실행하기
npm install tsc-watch --save-dev
로 패키지를 설치한다.
tsc-watch는 아래와 같이 설정을 잘해놓으면 src 폴더의 파일이 바뀔때마다(저장 시마다) dist 폴더의 파일로 계속 바꿔주는 역할을 한다. 그야말로 watch 하고 있는 것이다.
1. dist 폴더와 src 폴더를 만든다.
2. package.json의 script:start 부분을 "tsc-watch --onSuccess \" node dist/index.js" "로 변경해준다.
3. tsconfig.json 에서는 include 부분을 src/**/*로 변경해서 src 폴더 내의 모든 ts 파일이 컴파일 되도록 한다.
4. 그리고 compilerOptions 에 outDir 속성을 추가한 후, "dist"로 설정하여 compiler 된 파일들이 dist 폴더에 들어가도록 한다.
>>에러
$ tsc-watch -onSuccess " node dist/index.js"
Cannot find module 'typescript/bin/tsc'
>>> 글 위쪽 설치: $ npm i -D @types/node typescript ts-node 로 해결
4. 함수호출 인자 받아오기 : interface와 Class
interface로 Object를 인자로 받기
함수 호출 시, 하나의 Object를 인자로 받을 수는 없을까? 위의 예에서 굳이 name, age, gender를 각각 받는게 아니라, 3가지 파라미터가 모두 포함된 하나의 Object를 만들고 그것을 함수호출에서 불러오는 방식으로 작성하도록 한다.
한 개의 Object로 나타내고 싶다면 interface를 정의하고 사용해야 한다. 이렇게 하면 함수의 정의 부분에서도 각 변수를 object 형태로 나타내주어야 한다(person.name, person.age, person.gender). interface의 이름은 대문자로 시작해야한다.
호출할 객체를 person으로 정의하고, 그 person의 속성들의 타입을 interface Person으로 정의하였다. 그리고 함수 정의 시에 person : Person으로 인자를 호출하였다. 즉 interface를 작성하고 그것을 마치 원래 있던 type 처럼 사용하는 것이다.
모든 속성값이 필수로 리턴되어야 한다.
만약 함수의 리턴값을 Person 형태로 한다면, 리턴값에 name, age, gender가 모두 포함되어야만 한다. 하나라도 빼고 싶다면, 각 속성값 뒤에 물음표(?)를 붙여주어 선택적인 값으로 처리해줘야 한다.
인터페이스 내 메서드 정의
아래와 같이 인터페이스 내에 메소드를 정의할 수도 있다. getAge 메서드를 정의하는 방법은 2가지로, :의 위치나 화살표 사용여부에 따라 다르게 사용이 가능하다. 메서드 이름 뒤에 물음표를 붙임으로써 선택적으로 사용할 수 있도록 만들어준다.
속성에 readonly 적용하기
name에 readonly 속성을 적용하고, 아래 함수에서 person.name을 변경할려고 하면 타입스크립트가 금지하는 것을 볼 수 있다.
enum으로 속성값 제한하기
인터페이스의 속성의 값을 특정값들로 제한하고 싶을 때 enum을 사용할 수 있다. 위와 같이 GenderType을 enum으로 Male, Female 값으로 제한할 수 있게 된다.
Enum은 컴파일 이후 자바스크립트에도 남아있다. 각 값이 인덱스 0부터 시작해서 차례대로 숫자값으로 지정된다. 만약 숫자가 아닌 특정 문자로 지정하고 싶다면 아래와 같이 string enum을 이용하면 된다. enum의 각 속성에 '=' 으로 값들을 지정해주는 방식이다. 숫자방식처럼 인덱스가 차례대로 쌓이진 않지만, 가독성에는 유리하다는 장점이 있다.
리터럴 타입
enum과 같이 따로 속성값을 지정하는 것이 아니라 interface 내에서 바로 속성값을 지정하여 입력을 제한하는 방식이다. 아래와 같이 파이프라인('|') 기호를 통해 지정해주면 되서 편리하다. 지정된 이후에는 호출 시에 타입스크립트가 자동완성 기능으로 알려주게 된다.
Class 사용하기 : interface의 개선된 방법
컴파일된 interface는 자바스크립트 파일에 포함되지 않으며, 자바스크립트에서는 사용할 수 없다. 인터페이스는 작성 중인 코드에 대한 정보를 타입스크립트에 제공하기 위한 목적으로 존재할 뿐이다. 자바스크립트에 interface와 같은 포함시키기 위해서는 Class를 쓴다.
원래 자바스크립트의 Class는 Class가 어떤 속성을 갖고 있는지 신경쓰지 않지만, ts에서는 속성과 속성들이 지닌 권한을 다 지정해주어야 한다. 속성의 권한은 public, private으로 구분하는데, 자바스크립트에서는 전혀 신경쓰지 않던 것이다. 각 속성의 앞에 public 또는 private을 지정해주도록 한다. 실제 컴파일 후에 자바스크립트 코드(index.js)를 보면 public이나 private은 보이지 않는다.
그리고 constructor를 만들어서, this.name = name식으로 작성해준다. 좌변의 name은 속성을 지정한 것이고, 우변의 name은 생성자의 name을 지정한 것이다. 12번 줄에서 Person 객체를 생성할 때, arguments가 3개가 주어지는 것을 볼 수 있다. class 내부의 constructor에서 Parameter로 정의된 값들이 객체 생성 시에 반드시 arguments로 전달되어야 한다.
※참고 : public, protected, private
public은 Class의 외부에서도 접근 가능한 방식이다. 위의 예제에서 16번 줄에서 person의 속성들을 불러올 수 있는 것은 public으로 각 속성을 정의했기 때문이다. 이외에도 private, protected 선언자가 있는데, private은 Class 내부에서만 해당 속성을 불러올 수 있고, protected는 Class 내부 및 해당 Class를 상속받은 인스턴스에서만 사용할 수 있도록 선언하는 것이다.
>> 위 코드에서 age를 private으로 선언했는데도 외부(14번줄 함수)에서 불러와져서, 나중에 더 공부해보고 파악해볼 필요가 있을 것 같다.
참조
1) Nomad coders - Typescript로 블록체인 만들기
nomadcoders.co/typescript-for-beginners/
2) 유튜브 : 땅콩코딩 - 타입스크립트 강좌
www.youtube.com/playlist?list=PLJf6aFJoJtbUXW6T4lPUk7C66yEneX7MN
'Programming-[Frontend] > Typescript' 카테고리의 다른 글
| Typescript / 기초 / (0) | 2021.01.22 |
|---|