타입스크립트 개요

wltjd1688·2025년 4월 4일

풀사이클

목록 보기

46/74

타입스크립트란

타입스크립트는 자바스크립트 + 타입체크 라고 생각하면 된다.

타입스크립트 환경에 자바스크립트를 코딩하면 동작한다.
=> 타입스크립트는 런타임에 가기 전에 자바스크립트로 컴파일을 한번 한다.
자바스크립트 환경에서는 타입스크립트를 코딩하면 동작하지 않는다.
=> 이는 타입스크립트가 자바스크립트의 슈퍼셋이면서, 위와 같은 이유로 타입스크립트를 바로 런타임할 수 없기 때문이다.

타입스크립트는 왜 필요한가

자바스크립트 코드가 너무 지저분하다.
코드의 스케일이 커지면서 코드 관리가 되지 않는다.
컴파일 타임시 오류를 체크할 수 있다.

타입 스크립트를 사용하면 좋은점

자바스크립트 기반보다 버그를 줄일 수 있다.
유지보수가 쉽다.
강력하고 높은 퀄리티의 코드를 생성할 수 있다.

장점

자바스크립트 기본이 있으면 배우기 쉽다.
버그 위험을 낮출 수 있다.

선행학습

숫자, 문자열, 배열, 객체, 함수 데이터 타입
변수, 객체지향철학, 동적 메모리의 동작 원리

환경설정

Visual Stuido Code를 사용할 예정
- vscode 설치
- extenstion 추천
  - Prettier - code formatter
    말그대로 코드 작성 규칙
  - EsLint
    품질도구, 코드를 검사하고 잠재적인 문제를 잡아줌
  - Bracket
    중괄호 구분용, 색으로 구분해줌
- node.js 설치, LTS를 설치하는걸 추천
타입스크립트 설치
- 터미널이나 command에서 타입스크립트 설치
  npm i -g typescript
타입스크립트 파일 만들기
- 이제 .js말고 .ts로 파일 확장자를 만들때, 타입스크립트 코드를 작성할 파일을 만들 수 있게된다.
- 이후 tsc [파일이름]을 하면 타입스크립트 파일을 자바스크립트 파일로 컴파일해준다.

첫번째 프로젝트

app.ts만들고 tsc로 실행해보를 할 예정이다.

다음 과 같이 파일을 만들어서 실행해보면, 실행되지 않는 것을 볼 수 있다. 이는 이전에 배운 타입스크립트를 실행하기 전에 자바스크립트로 컴파일을 해야 실행된다는 것을 상기시켜준다.
그래서 tsc 명령어를 통해 app.ts파일을 app.js파일로 컴파일 해줄 수 있다.

컴파일을 하면 다음과 같이 app.js파일이 만들어지고, 안에 타입스크립트를 자바스크립트로 만든 내용이 들어있는 것을 알 수 있다.

Q. ts파일을 수정할 때마다 js파일이 업데이트 되지는 않는데용?

A. tsc -w [타입스크립트 파일명]명령어를 통해 타입스크립트 파일명에 해당하는 파일의 수정을 계속 지켜보게(watch) 만들 수 있다.

또한 tsconfig.json파일을 만들면, 타입스크립트 컴파일 할때, 환경을 설정할 수 있다.
이 tsconfig.json파일은 tsc init명령어로 만들어 줄 수 있다.

기본적으로 es2016문법으로 작성된 타입스크립트 파일을 commonJS로 바꿔주는것 같다.

데이터 타입과 추론

데이터 타입은 왜 중요할까?

자바스크립트의 변수에는 어떤 데이터 타입의 값도 할당될 수 있다.
- let myname="lee";
- 그런데 누군가각 myname을 실수로 이렇게 변경할 수 있다.
- let myname=1;
자바스크립트는 이러한 문제를 사전에 막지 못한다.

타입 추론 기능(Type inference)

타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있다.
타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론한다.
- let age = 30;
타입스크립트는 age 변수의 타입을 자동으로 number로 추론한다.
타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만 타입을 명시적으로 지정하는 것이 더 명확하다.
타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋다.

데이터 타입의 추론

타입스크립트에서는 다양한 데이터 타입을 지원
데이터 타입은 크게 기본 데이터 타입, 객체 타입, 특수 타입으로 나눌 수 있음
기본 데이터 타입
- number
- string
- boolean
- null
- undefined
객체 타입
- object
- array
- tuple
특수 타입
- any
- unknown

타입 명시

변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정하는 것이다.
```
let x: string = "나는 문자열이다.";
```
변수에 데이터 타입을 지정하는 방법
변수 선언 시 데이터 타입을 지정한다.
타입스크립트를 자바스크립트로 컴파일할 때 데이터 타입에 다른 값이 할당되면 오류를 발생시켜 개발자에게 알려준다.
```
let myname:string= 'let';
myname = 1;
// Type 'number' is not assignable to type 'string'.
```