Typescript 개념

ansunny1170·2022년 5월 26일
nodejstypescript
0

Typescript 자습

목록 보기
1/3

# Typescript란?

MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어다.

자바스크립트 기반으로 변수 데이터 타입을 지정하여 예측 가능한 코딩이 가능하게 만든다.

TS 파일(.ts)는 브라우저에서 동작하지 않으므로 TS 컴파일러(tsc)를 이용해 자바스크립트 파일로 변환해야 한다.

참조: 타입스크립트란?

JS와 다른 C계열 과의 차이 크게 2개로 분류: 비동기, 타입.
이중 타입은 JS만의 특징은 아니다. PY과 같이 런타임에 정해지는 스크립트 언어도 존재한다. 여튼 그런 이유로 컴파일 언어와는 다르게 정적 타입으로 사전에 체크할 수가 없었고, 이를 해결하고 실행 전 단계에서 에러를 최대한 거르고자 여러가지 방법이 나왔다.
그 중 하나가 바로 TS다.

TS = JS의 상위호환(SuperSet), 타입을 가진JS
여기에 class, interface등을 추가해서 JAVA나 C#과 같은 OOP 프로그래밍을 할 수 있다.

인터프리터 언어인 JS와는 다르게 컴파일 언어인데, 전통적인 C계열의 컴파일 언어와는 차이가 있어트랜스파일 언어라고도 부른다.

동작 방식 TS -> (컴파일(트랜스파일)) -> JS -> (실행)과 같이 이루어지는데, TS가 JS로 변환될 때 helper 코드가 위아래로 추가되기 때문에, 절대적인 코드의 양 자체는 TS가 더 많다.
물론 개발자는 TS만 작성하고, 변환은 알아서 해주믈 크게 문제되는 부분은 아니다.

tsconifg.json을 통해 JS파일 변환 시의 설정(경로, 버전 등)을 할 수 있다.

참조: 자세한 설정 방법

## 에러 컴파일 예제

function add(a: number, b: number) {
  return a + b;
}
const sum: number = add(1, 2);
console.log(sum);

설명
JS였다면 add에 어떤 타입이 들어가도 error검출을 하지 못 했겠지만, TS에서는 add('a', 'b')와 같은 식으로 작성(호출)하면 타입이 맞지 않아서 컴파일을 할 수 없다.(C계열과 동일하게 IDE에서 빨간 줄이 나온다.)

## TS의 타입

타입에 대해 살펴보자면, JS의 기본 자료형을 모두 포함하고, Any, Void, Never, Enum 등의 타입이 더 제공된다.

  • Primitive type: 실제 값을 저장하는 자료형. JS와 같고, 내장 함수도 사용할 수 있다. (name.toString())
  • literal: 변하지 않는 값. const와는 약간 다르고, 35와 같은 숫자 자체를 가리킨다.(상수인가? 문자인가?)
  • null & undefined: 아무 타입에나 들어갈 수 있고, 체크를 strict하게 설정하면 void나 본인들에게만 할당하게 설정할 수도 있다. 둘의 차이는 null은 사용할 준비는 되었으나 값이 할당되지 않음(객체 생성됨), undefined는 객체 자체가 존재하지 않는다. 없는 멤버에 접근할 때 undefined가 나오는 것을 볼 수 있다.
  • Any: 말 그대로 어떤 타입이어도 상관없는 타입인데, TS를 쓰는 의마가 퇴색된다. 예로 function add( a:Any, b:Any ){ ...와 같다면 아무거나 들어가도 되는데, 이러면 JS를 쓰는 것과 차이가 없다.
  • Symbol: 고유하고 수정불가능한 값으로, 접근 제어에 주로 사용한다.

## 변수 선언하기

참조: [JS]var, let, const

### JS 변수 선언

순수 JS는 컴파일 타임에 타입을 알 수 없기 때문에, 타입 추론을 통해 런타임에 타입을 정하게 된다.

var: ES5 이전까지 쓰이던 변수 키워드. 함수 스코프에서 유효하다. 재선언이 가능하고, 호이스팅도 가능하다.
let, const: ES6부터 쓰이는 변수 키워드. 블록({}) 스코프에서 유효하다. 재선언 및 호이스팅이 불가능하다.

스코프나 재선언은 감이오지만 호이스팅 개념은 애매하다.

  • 호이스팅: 일단 사용하고, 아래에서 정리하는 것.

C계열 언어를 써온 개발자라면, 잘 이해되지 않는 개념이다.

console.log(sayHi); // 정상출력
var sayHi = "호이스팅이 가능합니다."
console.log(sayHello); // 에러발생
let sayHello = "호이스팅이 불가능합니다."

결론 let, const를 사용하자.

### TS 변수 선언

JS 변수 선언 개념에서 추가적인 내용만 적어본다.

let의 타입추론은 일반적 타입이 된다. 즉,

let b = 'hi' // string

이렇게 추론되는 반면, const는 literal로 타입추론이 된다.

const d = 'hi' // type: 'hi'

## 그 외 타입에 관한 정보

  • Type Assertion(타입추론): 컴파일러에게 타입을 알려주는 것으로, 다른 컴파일 언어에서 사용하는 캐스팅과는 다르다. 캐스팅은 실제 데이터 구조를 바꾸는 것이고, Type Assertion은 단순히 컴파일러에게 알려주는 용도이다. 아래 두 가지 방법이 있다.
  1. 변수 as 강제타입
  2. <강제타입> 변수

  • Type Alias: 타입의 별칭으로, type의 reference이다. C++에서의 변수 alias와 유사하다.

  • Union Type: 여러 타입을 허용하는 것으로, Any의 하위호환으로 볼 수 있다. 단순한 개념이다.
    ex) let b: string | number; // string 및 number 타입 허용

Type Alias와 Union Type을 함께 사용하면, 다음과 같이도 사용할 수 있다.

type StringOrNumber = string | number; // Type Alias
let b: StringOrNumber; // Union Type by Type Alias

# 실습

참조: TypeScript와 함께 Node.js + Express 환경 세팅(feat. npm, yarn)

참조: B급코딩 - Typescript로 Node+Express API 서버 개발환경 세팅

www.typescriptlang.org

JS에서 prototype으로 흉내내던 객체지향 프로그래밍이 TS에서 더 견고해졌다.

  1. 실제 고객들에게 서비스하는 환경에 맞게 개발 가능
  2. 백엔드 서버 구성을 큰 규모로, 더 효율적으로 할 수 있다

## Node JS + Express (with) TS 기본 구성

### 시작 init

npm init
(nodejs의 설치는 기본이다.)

init 명령어 입력 후 여러 옵션입력이 요구되며, 미입력시 default값으로 세팅된다.

package name: (nodeExpressTypeGood) // 프로젝트 이름
version: (1.0.0)                    // 프로젝트 버전
description:                        // 프로젝트 설명
entry point: (index.js)             // 프로젝트 시작 파일(자바의 main메소드)
test command:                       // 테스트를 위한 명령어
git repository:                     // 연결된 git repo 주소
keywords:                           // 프로젝트 관련 해시태그?
author:                             // 제작자
license: (ISC)                      // 라이센스 종류

마지막으로 yes 입력하면 된다.

내 과정
nodejs 사이트에서 최신버전 lts를 설치하였고, cmd 관리자 권한으로 실행해서 npm i -g npm으로 최신버전 업데이트 진행했다.
※버전 확인시 Powershell은 안되고 cmd는 가능했다.
시스템 속성 변경의 환경변수 path에 C:\Users\kyc\AppData\Roaming\npm를 추가했다.

c:\Workcpace\typescript_study 폴더에 npm init을 했다.

packge name: 에 대문자는 안되는듯 하다. 소문자로 nodeexpresstypegood을 넣었다.

### 필수 모듈 설치

npm i express typescript @types/express
npm i -D nodemon ts-node

실제 서버 구동시 필요한 모듈 3가지

  • express: NodeJS를 사용하여 서버를 개발할 때 서버를 쉽게 구성할 수 있게 만든 프레임워크
  • @types/express: express는 원래 자바스크립트로 만들어졌다. 이를 TS 환경에서 쓰기위해 express 내부의 변수들, 함수들의 타입을 정의한 ~d.ts 파일이 포함된 형태
  • typescript: 타입스크립트 사용을 위해 설치

개발 시 필요한 모듈들(-D 옵션을 붙여서 설치)

  • nodemon: 노드 서버를 실행하고 소스코드를 수정하면 다시 재시작해야 하는 번거로움을 자동으로 해주는 모듈
  • ts-node: Node.js용 TS 실행 엔진 및REPL(Node.js 상에서 TypeScript Compiler를 통하지 않고도, 직접 TypeScript를 실행시키는 역할을 한다.)

TS 시작 init

tsc --init
TS가 정상 설치 되었다면, 명령어 실행이 가능하다.

내 과정
tsc --init 하면 tsc 명령어 인식을 하지 못한다.
npx tsc --init을 사용하여 초기화 시켰다.

tsconfig.ts 파일 설정
아래와 같이 설정하였다.

{
"target" : "es6", // 어떤 버전으로 컴파일할지 작성
"module" : "commonjs", //어떤 모듈 방식으로 컴파일할지 설정
"outDir" : "./dist"  // 타입스크립트가 자바스크립트로 빌드된 파일들 모아두는 폴더명
....
}

그외 설정은 주석으로 설명되어있다.
이제 코딩을 해서 API 서버를 만들어 본다.

참조: tsconfig.json 옵션 정리

## 타입스크립트 코드 작성

간단하게 HTTP의 GET메소드 API 하나에 TS스러운 객체 하나를 리턴해 보는 코드를 작성해 본다.
프로젝트 경로에 app.ts 파일을 만든다.

app.ts

import express, { Request, Response } from 'express';

const app = express();

type Data = {
    name: string;
    age: number;
    url: string;
};

const sendData: Data = {
    name: 'name',
    age: 3,
    url: 'tistory.com',
};

app.get('/get', (req: Request, res: Response) => {
    res.send(sendData);
});

app.listen(8080)

서버 실행

서버 실행하기 위해서 package.json의 script부분을 수정해야 한다.
설치해둔 ts-node가 활약할 시간.

// 기존
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
// 변경
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app",
    "dev": "nodemon --watch \"*.ts\" --exec \"ts-node\" app.ts"
  },

결과

profile
ansunny1170
공정 설비 개발/연구원에서 웹 서비스 개발자로 경력 이전하였습니다. Node.js 백엔드 기반 풀스택 개발자를 목표로 하고 있습니다.
다음 포스트

Typescript 실습(간단히 서버 띄우기)

0개의 댓글