Typescript 기본 및 실행하기

 

Typescript 이란?

 

 

타입스크립트는 동적 타입인 자바스크립트와 달리 동적 타입이며 타입 오류가 컴파일시 발생하도록 하여 코드의 생산성을 높여주는 장점을 가지고 있다. 하지만 그만큼 진입 장벽이 타입 오류를 발생하지 않아 곧바로 컴파일 할 수 있는 자바스크립트에 비해 높은 것이 단점이기도 하다.

 

 

 

 

타입스크립트 시작하기 위한 설치

 

 

1. 타입스크립트를 이용하기 위해서는 기본적으로 Node.js 프로그램이 깔려있어야 한다.

 

2. 작업하고 싶은 폴더를 만들고 그 폴터 디렉토리로 터미널에서 지정한 후 'npm init -y'을 입력하여 package.json을 생성하여 npm 작업을 할 수 있도록 한다.

 

3. 'npm install typescript' 을 입력하여 타입스크립트 모듈을 다운받는다.

 

4. 타입스크립트 설정 파일을 만들기 위해 'npx tsc --init' 을 입력해준다. 그러면 tsconfig.js라는 파일이 생성된다.

 

5. 그리고 파일 확장자가 .ts로 끝나는 파일을 새로 만들어 아래의 코드를 입력한 후 'npx tsc'라고 입력하면 tsconfig.js에서 설정한 자바스크립트 언어 버전으로 컴파일 된다.

 

tsconfig.js에서 컴파일 버젼 언어 설정 가능하다.

const v1 = 123;
const v2 = () => console.log('123');

↓

npx tsc 컴파일 후

"use strict";
var v1 = 123;
var v2 = function () { return console.log('123'); };

tsconfig.js에서 테스트로 컴파일 문법을 es5로 해놓아서 자바스크립트가 es5 문법을 따른 결과이다. 그래서 const가 var 바뀌어 컴파일 된 것을 확인할 수 있다. 화살표 함수도 일반 함수로 변화된 것을 볼 수 있다.

 

 

 

6.

외부 프로그램을 사용할 수 있게하는 테스트로 일단 'npm install lodash'을 다운받는다. 그리고 이때 중요한 것은 타입스크립트에도 외부 프로그램을 적용하기 위해서는 'npm install @types/lodash'을 따로 또 설치해주어여 한다. 유명 프로그램은 대부분 @types가 붙게하여 다운하며 대부분 타입스크립트에 적용되도록 하고 있다.

(여기서 lodash는 자바스크립트 유틸리티 라이브러리이고 데이터를 쉽게 다룰 수 있는 함수들을 사용할 수 있게하는 라이브러리라고 보면 된다. array, collection, date, number, object... 등등이 있다.)

 

lodash가 적용되자 isEqual이라는 함수를 ts 파일 내에서도 자동으로 임포트 해주게 되었으며

 

 

type 정보도 자동으로 등장하는 것을 확인 할 수 있다.

 

 

 

 

7. 이제 node에서 실행하기 위해서는 node (실행시킬 파일의 디렉토리 경로)을 해주면 터미널에서 결과 값이 실행된다.

 

 

 

 

8.

• 더 간편하게 실행하는 방법은 vscode의 익스텐션을 이용하는 방법인데 일단 익스텐션에서 'code runner' 라는 프로그램을 다운 받은 후 'npm install ts-node' 다운받는다.
• 그리고 ctrl+ , 을 누른 후 설정 검색창이 등장하면 'executor Map'을 입력하여 검색 후 등장하는 제일 위에 있는 setting.json을 클릭하여 들어가 "typescript": "node_modules/.bin/ts-node"으로 설정해주면 된다.
• 마지막으로 원하는 코드를 드래그 한 후 ctrl+alt+n을 해주면 바로 결과가 나온다.

 

code runner라는 익스텐션 프로그램

 

위와 같이 setting.json에 들어가 설정해주면 된다.

 

 

 

타입스크립트의 기본 기능

 

 

1.

const mike = { friends: ['jin', 'seok']};
const total = mike.friendList.lenngth //오류 코드

위와 같이 분명이 mike 객체의 키 값이 틀렸음에도 기본 자바스크립트에서는 컴파일시 오류를 인식하지 못하고 표시하지 못하지만 타입스크립트에서는 곧바로 오류를 인식하여 우리에게 알려우저 생산성을 높일 수 있다.

 

 

 

2.

interface Product {...}

let product: Product = {} as Product;

const total = product.parts.length;

• 원래 자바스크립트였으며 product의 타입을 모르기 때문에 'product.'을 입력하면 아무것도 앞으로 무얼 코드를 적을 수 있는지 등장하지 않지만 타입스크립트를 적용하면 타입을 알기 때문에 product 무슨 타입인지 인지하고 앞으로 어떤 코드를 적을 수 있는지 product의 속성 정보를 등장시켜 알려준다. 
• 위의 코드는 'product.'을 입력한 후 등장한 자동 입력 정보 parts을 자동으로 입력하게 되었다.

 

 

3.

const person1 = {
    name: 'jin soek',
    age: 25,
}
const person2 = {
    name: 'jin soek',
    age: 25,
}
const product = {
    name: 'c',
}

위와 같은 객체들이 있는 코드 중에서 person들의 name 키 값의 이름을 수정하기 위하여 동적 언어인 자바스크립트에서는 찾아바꾸기로 한꺼번에 이름을 바꿀 수 있지만 원하지 않는 product의 객체의 name 키 값 까지 바꿔버리는 실수를 범할 수 있다.

↓

타입스크립트 적용 후

interface Person {
    firstName: String;
    age: Number;
}

const person1: Person  = {
    name: 'jin soek',
    age: 25,
}
const person2: Person = {
    name: 'jin soek',
    age: 25,
}
const product = {
    name: 'c',
}

하지만 타입스크립트에서는 정적 타입을 이용하기에 위와 같이 타입을 지정해주면 Person의 타입을 지정한 객체만을 지정하여 name 키 값을 바꿀 수 있게 되는 기능을 발휘할 수 있다.