• 01. 개요
• 동적타입(Dynamic typing)
• 정적타입(Static typing)
• 02. 설치
• 2-1. 컴파일
• 2.2 오류 해결하기
• - ‘중복된 함수 구현입니다’

01. 개요

타입스크립트(TypeScript)는 마이크로소프트에서 개발한 자바스크립트의 상위 집합 언어이다.

타입스크립트는 자바스크립트의 모든 기능에 더해서 정적 타입, 클래스, 인터페이스, 상속 등을 지원한다.

타입스크립트는 자바스크립트 코드로 컴파일되며, 이를 통해 자바스크립트로 작성된 어플리케이션을 쉽게 타입스크립트로 변경할 수 있다.

자바스크립트 문법에 타입을 표기하는 방식이며 자바스크립트의 superset (상위확장) 이라고도 한다.

브라우저에서 실행되지 않으며 자바스크립트 형태로 컴파일 해야한다

컴파일 동안 오류를 미리 발견하여 코드의 생산성이 높고 타입을 엄격히 지정하는 문법으로 유지보수관리가 용이하다

타입스크립트를 사용하면 코드의 안정성을 높일 수 있다.

이는 정적 타입 체크라는 것을 통해 가능하다.

타입스크립트는 컴파일 시점에서 타입 에러를 미리 발견할 수 있기 때문에 런타임 에러를 줄일 수 있다. 또한, 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있다.

동적타입(Dynamic typing)

1. 함수의 선언시 사용할 매개변수의 자료타입을 정의하지 않았다
2. 함수의 호출시 숫자타입을 전달하면 자료의 타입이 숫자형으로 정의되며 숫자타입이 리턴된다

3. 함수의 호출시 문자타입의 자료를 전달해도 함수는 작동한다

4. 이것은 자바스크립트가 동적타이핑(Dynamic typing) 언어 이기 때문에 발생하는 현상이다. 동적타이핑이란 변수,상수의 타입 지정없이 값이 할당되는 과정에서 값의 타입에 의해 자동으로 타입이 결정되는 것을 의미한다.

정적타입(Static typing)

1. 함수의 선언시 함수에 사용할 변수의 타입의 지정한다.

2. 실행하기 전 작성단계에서 부터 에러를 검출할수 있다

02. 설치

1. package.json 생성
Copy

npm init -y

2. 타입스크립트 설치
Copy

//지역설치
npm install typescript --save-dev

//전역설치
npm install -g typescript --save-dev

2-1. 컴파일

타입스크립트는 웹브라우저에서 바로 해석하지 못한다.

자바스크립트로의 컴파일 과정을 거쳐야 한다.

1. 터미널에 아래의 명령어를 입력하자
Copy

npx tsc

Copy

npx tsc -w

2. 그럼 아래와 같은 오류를 볼수있다 타입스크립트의 구성파일에 프로젝트 폴더를 추가하지 않아 발생하는 오류로 어떤 파일을 컴파일 할지 모르겠다는 내용이다.

3. 이런경우 구성파일을 설정하거나 컴파일할 파일의 경로를 직접 지정해 주도록 한다.
Copy

npx tsc 02-install/typescript.ts


4. 컴파일 오류가 발생한것을 확인할수 있다.
5. 해당 폴더로 이동해보면 컴파일은 완료가 되어 index.html 은 실행이 된다. 오류가 있어도 컴파일은 완료가 되며 오류는 알려준다


6. 02-install\typescript.js

파일의 컴파일 결과를 살펴보자

Copy

function add(a, b) {
    return a + b;
}
var res = add(2, 5);
var result2 = add("2", "5");
console.log(res);
console.log(result2);

es5에서도 동작할수 있는 var 변수로 컴파일 되었다.

또한 typescript 에서 작성한 내용과 자료형 선언만 빼고는 거의 동일하다.

7. 02-install\typescript.ts

오류가 난 부분을 수정후 다시 컴파일한다.

Copy

function add(a:number, b:number) {
  return a + b;
}

const res = add(2, 5);
/* const result2 = add("2", "5"); */


console.log(res);
console.log(result2);

2.2 오류 해결하기

- ‘중복된 함수 구현입니다’

JavaScript 파일로 컴파일 한 후에 TypeScript 파일 내에서 함수부분에 오류가 뜰 수도 있다.

💡 해결방안

이럴 때는 터미널에 tsc --init 명령어를 입력하면 해결된다. 일반적인 버그로 초기 설정이 되어 있지 않아서 생긴 오류이다. 간단하게 tsconfig.json의 초기설정을 하여 오류를 없애는 것이다.

tsc --init

명령어 입력 후 tsconfig.json파일이 생긴다. 다시 실행을 해보면 오류가 사라진 것을 확인할 수 있다.