• TypeScript 등장 배경
• Types in TypeScript
  • Primitive Types
  • Object Types
  • TypeScript에서 추가적으로 제공하는 Types
• Type annotation, Type inference
  • type annotation을 꼭 해줘야하는 경우
• Type assertion

TypeScript 등장 배경

Javascript는 원래 클라이언트 측 언어로 도입이 되었으나 서버 측 기술로도 활용되게 되었다. 하지만 코드가 점처 커질수록 소스 코드가 복잡해지고 유지 관리가 어렵고 재사용하기 어려워졌다. 또한 Type 검사와 컴파일 시 오류 검사의 기능이 어려워 서버 측 기술로서 엔터프라이즈급 서비스에서 성공적으로 활용되지 못했고, 이를 보완하고자 TypeScript가 제시되었다.

마이크로소프트에서 개발, 유지하고 있다.

• TypeScript는 자바스크립트에 타입을 부여한 언어로, Javascript의 슈퍼셋(Superset) 프로그래밍 언어이다. 즉 자바스크립트의 확장된 언어라고 볼 수 있다.
• 타입스크립트는 .ts 확장자를 가지는데 이 파일을 브라우저에서 바로 실행할 수 있는 것이 아니라 TypeScript는 TypeScript Compiler로부터 컴파일 되어 Javascript 코드를 출력한다.
• TypeScript에서는 Static Typing을 지원한다. JavaScript는 타입이 없는 덕에 유연한 체계를 갖출 수 있지만 프로그램 규모가 커지고 대규모 협업에서는 자잘한 오타로 인한 에러가 바로 확인되지 않고 런타임에서야 발견할 수 있다는 문제는 생산성 저하 문제로 크게 다가왔다.TypeScript는 정적 타입 언어의 장점인빌드 전에 미리 오류를 검증할 수 있다는 장점을 Javascript와 통합한 것이다.

추가로 읽어볼만한 글 : TypeScript 어떻게 공부해야할까?

TypeScript는 JavaScript에 TypeSystem을 추가한 형태인데, TypeSystem은 다음과 같은 기능을 수행한다.

• 개발 환경에서 Error 잡는 것을 도와준다.
• type annotation을 사용해서 코드를 분석할 수 있다.
• 오직 개발 환경에서만 활성화 된다.

  타입 스크립트와 성능의 향상과는 관계가 없다.

Types in TypeScript

TypeScript는 JavaScript에서 기본으로 제공하는 기본 제공 유형을 상속한다. TypeScript 유형은 다음과 같이 분류된다.

• Primitive Types
• Object Types

Primitive Types

Name	Description
string	문자열을 나타냅니다.
number	숫자 값을 나타냅니다.
boolean	true 와 false 값을 가지고 있습니다.
null	하나의 값을 가집니다.null
undefined	하나의 값을 가집니다. undefined. 초기화되지 않은 변수의 기본값입니다.
symbol	고유한 상수 값을 나타냅니다.

Object Types

Name	Description
functions	함수를 나타냅니다.
arrays	배열을 나타냅니다.
classes	클래스를 나타냅니다.
object	객체를 나타냅니다.

TypeScript에서 추가적으로 제공하는 Types

Name	Description
any	잘 알지 못하는 타입을 표현할 수 있습니다. 타입 검사 통과, 최대한 쓰지 않는 것이 좋다
union	변수 또는 함수 매개변수에 대해 둘 이상의 데이터 유형을 사용할 수 있습니다.
enum	enumerated type(열거형)을 의미한다. 값들의 집합을 명명하고 이를 사용하도록 만듭니다.
void	Java와 같은 언어와 유사하게 데이터가 없는 경우 void가 사용됩니다. 타입이 없는 상태이며, any와 반대의 의미를 가집니다. 주로 함수의 리턴이 없을 때 사용합니다.
never	절대 발생하지 않을 값을 나타냅니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 리턴하거나 리턴 값을 절대로 내보내지 않음을 의미합니다.

enum과 object의 차이 object는 코드 내에서 새로운 속성을 자유롭게 추가할 수 있지만 enum은 선언할 때 이후에 변경이 불가하다. object의 속성값은 JS가 허용하는 모든 타입이 올 수 있지만, enum의 속성값으로는 문자열 혹은 숫자만 가능하다.

Type annotation, Type inference

type annotation : 개발자가 타입을 타입스크립트에게 직접 말해주는 것

var a number = 10; // number 타입 지정

• var : Declare
• a : Variable name
• : : Annotate
• number : Data Type
• 10 : Set Value

type inference : 타입스크립트가 알아서 타입을 추론하는 것

const rate = 5 // 변수 선언과 동시에 초기화할 경우, 타입을 알아서 추론한다.

type annotation을 꼭 해줘야하는 경우

1. any 타입을 리턴하는 경우

   const json = '{"x":4, "y":7}'
   const coordinates = JSON.parse(json)
   console.log(coordinates)
   

   개발자는 JSON.parse로부터 어떤 타입을 반환받을 것을 알고 있지만 TypeScript에서는 알 수 없다.(지원하지 않는다.) 리턴 타입이 일정하지 않다고 판단하고 any를 리턴한다고 추론한다. 그렇기 때문에 이러한 경우에는 type annotation을 해줘야한다.

2. 변수 선언을 먼저하고 나중에 초기화하는 경우 변수 선언과 동시에 초기화를 하면 타입을 추론하지만 선언을 먼저하고 나중에 값을 초기화할 때에는 추론을 하지 못한다.

3. 변수에 대입 될 값이 일정치 못하는 경우 여러 타입이 지정되어야 할 때에는 | (or statement)로 여러 타입을 에노테이션 해준다.

Type assertion

TypeScript의 시스템이 추론한 타입 내용을 개발자가 원하는 대로 얼마든지 바꿀 수가 있다. 이 때 Type Assertion(타입 표명)이라고 불리는 매커니즘이 사용된다.

프로그래머가 컴파일러에게 내가 너보다 타입을 더 잘 알고 있고, 나의 주장을 의심하지 마! 라고 이야기하는 것과 같다고 한다.

var foo = {}
foo.bar = 123; // 오류 발생
foo.bas = 'hello'

위 코드를 실행하면 컴파일러는 foo type이 속성이 없는 {}라고 추론하기 때문에 오류를 발생시킨다. 이 경우에 다음과 같이 type assertion을 사용하여 오류를 피할 수 있다.

interface Foo {
  bar: number;
  bas: string;
}
var foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';