1. What is TypeScript?

1.1 What is TypeScript?

설명

• TS는 안전하고 예측 가능한 코드 구현에 초점을 맞춘 JS의 상위 집합(Superset) 언어이다.
• TS의 가장 큰 특징은 기존 JS에 Type System을 적용한 것이다.
• TS로 작성된 코드는 TS 컴파일러(tsc)를 통해 JS로 변환되고 이후 실행된다. (트랜스컴파일)
• Type System 이외에도 TS는 Decorators와 같은 다양한 기능을 제공한다.

특징

• JS는 타입에 대한 제약이 느슨한 언어이다.

TypeScript = JavaScript + Type System

// JS
function add( num1, num2 ) {
	return num1 + num2;
}
console.log(add('1', '2')); // 12

// TS
function add( num1: number, num2: number ): number {
	return num1 + num2;
}
console.log(add('1', '2')); // compile error
*Argument of type '"1"' is not assignable to parameter of type 'number'

1.2 Type System(1/2)

• TS의 가장 큰 특징은 JS의 타입 체계에 정적 타입(static typed)을 적용할 수 있도록 한 것이다.
• JS는 동적 타입 체계(dynamic typed)의 언어로 변수에 타입을 지정하지 않는다.
• 동적 타입 체계는 프로그램에 유연성을 제공하지만 변수에 할당된 값을 읽어 사용하는 단계에서 문제가 발생할 수 있다.
• TS는 변수, 파라미터에 타입을 지정할 수 있으며 선언된 타입의 값이 아닌 경우 에러를 발생한다.

JavaScript built-in types

• Types
  • Primitive Type (원시 타입)
    • number : ES5
    • string : ES5
    • boolean : ES5
    • undefined : ES5
    • null : ES5
    • symbol : ES6
    • viod : TS에서 지정하고 있는 타입 → any type과 반대되는 개념의 타입 → undefined, null 만 assign할 수 있다. → 많이 사용되는 데이터 타입은 아니다.
      
  • Object Type (객체 타입)
    • functions
    • arrays
    • classes

// Dynamic types
let myVar = ?
					= 10
					= true
					= 'TS'
					...
// 일반적인 JS 변수는 다양한 즉, 모든 타입의 데이터가 담길 수 있다.
// 이는 JS가 Interpreter를 이용한 라인단위의 번역을 실행하기 때문이다.

일반적으로 JS 변수는 다양한 즉, 모든 타입의 데이터가 담길 수 있다.

이는 JS가 Interpreter를 이용한 라인 단위의 번역을 실행하기 때문에 가능하다.

이런 형태 때문에 보통 JS에 대한 데이터 타입은 Dynamic Typed라고 이야기 한다.

→ TS는 Dynamic 데이터 타입을 기본으로 하고 있는 JS에 정적 타입을 적용할 수 있다.

1.2 Type System(2/2)

• TS는 정적 타입을 지원한다. 변수의 정의와 함께 대입할 값의 타입을 함께 지정한다.
• 변수를 정의하면서 타입을 함께 지정하면 해당 타입의 데이터만 대입 가능하며 다른 타입의 값을 대입하면 컴파일 시점에 에러가 발생한다.
• 변수의 선언과 마찬가지로 함수의 매개변수, 반환 값의 정의에도 동일한 시스템을 적용할 수 있다.
• 매개변수에 타입을 지정하면 해당 타입의 데이터를 전달 인자로 하며 반환 값도 동일하다.

let year: number = 2020;
// number : Type Annotation

function sumNumbers( firstNumber: **number**, secondNumber: **number** ): **number** {
	return firstNumber + secondNumber;
}
// **number : Parameter Annotation
// number : Result Type Annotation**

1.3 Type Inference

• 정적으로 타입을 명시하지 않고 대입(assign)하는 값을 통해 타입을 유추해 결정하는 것이 타입 추론이다.
• 기본적으로 변수의 선언과 함께 값을 대입하는 경우 해당 변수는 타입 추론으로 인해 대입되는 값의 타입을 같는다.
• 변수를 선언하고 같은 코드 라인에서 특정 값을 대입하면 TS는 대입값의 타입을 유추해 변수의 타입을 확정한다.
• 변수의 선언과 값의 대입을 다른 코드 라인에서 진행하면 해당 변수는 any 타입의 변수가 된다.

let name = 'Kim'; // let name: string
let age = 20; // let age: number

let name;
name = 'Kim'; // let name: any
*Variable 'name' implicitly has an 'any' type, but a better type may be inferred from usage. ts(7043)
let age;
age = 20; // let age: any

→ any type으로 지정된 변수는 TS 컴파일 시점에 해당 변수에 대한 타입 검사를 수행하지 않는다.