TypeScript

TypeScript는 정적 타입을 지원한다. 

첫 번째 예제처럼 써도 자바스크립트에서 오류가 나지않고 실행되지만

코드상으로 어떤 타입의 인수를 전달하는지, 어떤 타입의 반환값을 리턴하는지 명확하지않다.

따라서 타입스크립트로 작성하면 타입을 명확하게 하여 오류를 포착할 수 있는 장점이 있다.

function sum(a, b) {
  return a + b;
}

sum('x', 'y'); // 'xy'

 

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

sum('x', 'y');
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

 

 

tsc --init

tsc --watch   :   파일 내용이 변경되었을 때 이를 감지하여 자동으로 js 파일로 변경한다.

 

 

타입 종류

Type	JS	TS	Description
boolean	◯	◯	true와 false
null	◯	◯	값이 없다는 것을 명시
undefined	◯	◯	값을 할당하지 않은 변수의 초기값
number	◯	◯	숫자(정수와 실수, Infinity, NaN)
string	◯	◯	문자열
symbol	◯	◯	고유하고 수정 불가능한 데이터 타입이며 주로 객체 프로퍼티들의 식별자로 사용(ES6에서 추가)
object	◯	◯	객체형(참조형)
array		◯	배열
tuple		◯	고정된 요소수 만큼의 타입을 미리 선언후 배열을 표현
enum		◯	열거형. 숫자값 집합에 이름을 지정한 것이다.
any		◯	타입 추론(type inference)할 수 없거나 타입 체크가 필요없는 변수에 사용. var 키워드로 선언한 변수와 같이 어떤 타입의 값이라도 할당 가능.
void		◯	일반적으로 함수에서 반환값이 없을 경우 사용한다.
never		◯	결코 발생하지 않는 값

 

 

// boolean
let isDone: boolean = false;

// null
let n: null = null;

// undefined
let u: undefined = undefined;

// number
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

// string
let color: string = "blue";
color = 'red';
let myName: string = `Lee`; // ES6 템플릿 문자열
let greeting: string = `Hello, my name is ${ myName }.`; // ES6 템플릿 대입문

// object
const obj: object = {};

// array
let list1: any[] = [1, 'two', true];
let list2: number[] = [1, 2, 3];
let list3: Array<number> = [1, 2, 3]; // 제네릭 배열 타입

// tuple : 고정된 요소수 만큼의 타입을 미리 선언후 배열을 표현
let tuple: [string, number];
tuple = ['hello', 10]; // OK
tuple = [10, 'hello']; // Error
tuple = ['hello', 10, 'world', 100]; // Error
tuple.push(true); // Error

// enum : 열거형은 숫자값 집합에 이름을 지정한 것이다.
enum Color1 {Red, Green, Blue};
let c1: Color1 = Color1.Green;

console.log(c1); // 1

enum Color2 {Red = 1, Green, Blue};
let c2: Color2 = Color2.Green;

console.log(c2); // 2

enum Color3 {Red = 1, Green = 2, Blue = 4};
let c3: Color3 = Color3.Blue;

console.log(c3); // 4

/*
any: 타입 추론(type inference)할 수 없거나 타입 체크가 필요 없는 변수에 사용한다.
var 키워드로 선언한 변수와 같이 어떤 타입의 값이라도 할당할 수 있다.
*/
let notSure: any = 4;
notSure = 'maybe a string instead';
notSure = false; // okay, definitely a boolean

// void : 일반적으로 함수에서 반환값이 없을 경우 사용한다.
function warnUser(): void {
  console.log("This is my warning message");
}

// never : 결코 발생하지 않는 값
function infiniteLoop(): never {
  while (true) {}
}

function error(message: string): never {
  throw new Error(message);
}

// Date 타입
const today: Date = new Date();

// HTMLElement 타입
const elem: HTMLElement = document.getElementById('myId');

class Person { }
// Person 타입
const person: Person = new Person();