TypeScript

1. 타입 스크립트란?

- js의 모든 단점을 보완해 만든 언어

- 동적인 Js에 타입을 미리 부여하여 컴파일시 에러를 잡을 수 있다. 

 

타입스크립트는 자바스크립트에 타입이 추가된, 자바스크립트의 업그레이드 버젼

예를 들어 보자면  js에서는 다음과 같은 코드에 대해 NaN 값을  출력할 것이다 .

function add(n1,n2) {
  console.log(n1+n2);
}

add();
add(1);

add() 의 경우 undefined와 undefined를 더했으므로 undefined가, add(1)의 경우 1 + undefined를 더했으므로 undefined가 출력

js는 위 함수에서 원하는 인자를 넣지 않았음에도 불구하고 에러를 발생시키지 않고, 실수가 분명한 코드임에도  문제없이 실행되었다. 

 

만약 js가 에러를 발생시킨다고 하더라도 런타임 과정에서 오류가 발견될 것이다.

 

이러한 사소한 실수 하나가 실무에 적용된다고 하면 문제를 해결하는데 엄청난 시간을 소요하게 될것.

 

JavaScript는 동적 언어로써 런타임 과정에서 타입을 결정하고, 오류를 발견하는 반면

Java와 TypeScript와 같은 정적 언어는 컴파일 타임 과정에서 타입을 결정하고, 오류를 발견한다.

 

• 런타임 : 응용프로그램이 동작되어 지는 때를 의미.
• 컴파일 타임 : 소스코드를 작성하고 컴파일이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되는 과정

 

위 예시 코드를 ts에서 실행시켜 보면 

이렇게 빨간줄이 뜨게 된다. 

n1,n2의 빨간줄은 타입 지정을 하지 않았음을 의미하고,

add()와 add(1)의 빨간줄은 인수가 충분하지 않음을 의미한다. 

 

ts는 이렇게 파라미터에 타입을 지정해 줄 수 있는데, 

타입 표기는 식별자 또는 값 뒤에 콜론(:)을 붙여 value: type 의 형태로 표기한다.

 

2. 타입스크립트-기본 타입 

JavaScript에서 아주 흔하게 사용되는 세 가지의 원시 타입인 string, number 그리고 boolean에 대해 먼저 알아보자면

 

1) 문자열(string )

- 기본적으로 js에서 사용하는 것과 마찬가지로 작은 따옴표, 큰 따옴표 그리고 백 틱도 사용 가능하다. 

- 문자열이 들어 있는 배열을 선언할 경우 다음과 같이 타입을 지정하면 된다.

 

2) 숫자(Number)

- Js와 마찬가지로 모든 숫자는 부동 소수 값이다. 

- 숫자가 들어 있는 배열을 선언할 경우 다음과 같이 타입을 지정하면 된다.

3) 참/거짓(Boolean)

4) 튜플 (Tuple)

- Js에서는 존재하지 않는 타입. 

- 길이와 타입이 고정된 배열을 의미한다. 

- 하나의 배열에 여러가지 타입의 데이터를 선언하고 싶을때 사용.

5) Void

-  보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 사용된다.

-  물론 일반 타입 변수로 선언할 수 있으나, 해당 변수에는 undefined만 할당할 수 있기 때문에 사용을 하지 않는다. 

6) Never

- never 타입은 절대 발생할 수 없는 타입을 나타낸다.

- 항상 에러를 반환하는 함수, 혹은  영원이 끝나지 않는 함수의 타입으로 사용할 수 있다.

7) enum

 

- 이넘 또한 Js에는 없는 타입. 

- enum은 열거형 데이터 타입을 지원합니다. 멤버라 불리는 명명된 값의 집합을 이루는 자료형으로 기억하기 어려운 숫자 대신 친숙한 이름으로 접근/사용하기 위해 활용할 수 있다.

 

- 열거된 각 멤버는 별도의 값이 설정되지 않은 경우 기본적으로 0부터 시작한다.

- enum에 설정된 아이템에 값을 할당할 수도 있습니다. 값이 할당되지 않은 아이템은 이전 아이템의 값에 +1된 값이 설정된다.

- enum은 숫자 값이나, 멤버 이름을 통해 멤버 이름과, 숫자값을 각각 얻을 수 있다. 

3.  타입 스크립트 - 인터페이스

- 다음과 같이 object 타입

을 선언한 user에서 Name속성에 접근하려고 할때 에러가 발생한다.

- object는 특정 속성값에 대한 정보가 없기 때문이다. 

- 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.

- 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다.

• property는 해당 object의 특징을 의미한다.

- Todo 인터페이스를 선언할때 옵션으로 선언해도되고 안해도 되게 하려면 다음과 같이 하면 된다 .

- 속성에 readonly를 부여하면 이 속성은 수정이 불가능하며 읽기만 가능한 속성이 된다.