타입스크립트 study (1)

타입스크립트 학습

개요

• 오픈소스 프로그래밍 언어
• 자바스크립트의 상위 집합으로 ECMA 스크립트의 최신 표준을 지원
• 정적인 언어로 컴파일 시간에 타입을 검사
• 장점
  • 강력한 타입으로 대규모 애플리케이션 개발에 용이
  • 유명한 자바스크립트 라이브러리와의 편리한 사용
  • 개발 도구에서의 강력한 지원

Basic Types

• Boolean
• Number
• String
• Array
• Tuple
• Enum
• Any
• Void
• Null, Undefined
• Never
• Type Assertion

Boolean

let isExist: boolean = false;

Number, 숫자

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

String, 문자열

let name: string = "dongwon";
let greeting: string = `Hi, I'm ${name}`

Array, 배열

let arr: number[] = [1,2,3];
let arr: Array<number> = [1, 2, 3];

기존에 배열 리럴을 사용하여 배열을 정의하면서 정의하는 배열에 어떠한 데이터 타입의 원소가 들어갈 것인지를 Type을 통해 제공할 수 있습니다.

Tuple, 튜플

let tuple: [string, number];
tuple = ["age", 25];
// error case
tuple = ["name", "dong"];
> message: 'Type '[string, string]' is not assignable to type '[string, number]'.
  Type 'string' is not assignable to type 'number'.' at: '5,1'

key-value의 형태를 저장할 때는, 위와 같이 타입을 지정해줄 수 있습니다. TSLint가 잘못된 타입의 값이 들어왔다는 것을 error message로 알려줍니다.

Enum

enum Color {Red, Green, Blue};
let c: Color = Color.Green;

Java의 enum과 같은 구조를 갖습니다. 시작하는 멤버에 0부터 번호를 매기고, 만약 1부터 시작해야 한다며 임의적으로 시작하는 숫자를 지정할 수 있습니다. 또한 각각에게 번호를 지정할 수 있습니다.

enum subject {Math = 1, Science = 3, History = 7}
console.log(subject[3]);

위의 typescript 코드를 javascript로 변환하면 아래와 같습니다.

var subject;
(function (subject) {
    subject[subject["Math"] = 1] = "Math";
    subject[subject["Science"] = 3] = "Science";
    subject[subject["History"] = 7] = "History";
})(subject || (subject = {}));
console.log(subject[3]);

Any

코드를 작성하면서 사용되는 변수에 알맞는 데이터 타입을 설정하는 것은 중요하지만 데이터 타입이 동적으로 결정되는 변수도 존재하게 됩니다. 이럴 때 사용할 수 있는 타입이 any입니다.

let notSureVar: any;
notSureVar = 3;
notSureVar = `hi`;
notSureVar = [1,2,3];

Void

값을 반환하지 않는 함수의 return type을 지정할 때 사용할 수 있습니다.

function greeting(): void{
    console.log(`hi`);
}

Never

결코 발생하지 않는 값

function infiniteLoop(): never{
    while(true){}
}

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