타입스크립트

자바스크립트 기반의 언어이며, 자바스크립트의 기능을 포함하면서 타입 체크를 지원한다

• 자바스크립트를 보완하고, 지저분한 코드를 깔끔하게 작성할 수 있도록 도와준다
• 브라우저는 자바스크립트 언어만을 이해하는데, 타입스크립트로 작성한 코드를 자바스크립트 언어로 컴파일하는 컴파일러 역할도 한다

타입스크립트의 장점

• 변수의 타입을 초기에 할당된 값을 바탕으로 자동 판단하여 추론할 수 있다
• 타입을 명시함으로써, 코드의 타입을 체크하여 오류를 사전에 발견할 수 있다
• 런타임 버그를 줄이고, 코드의 가독성이 좋아진다

데이터 타입 체크란?

• 자바스크립트 언어는 종이컵과 같아서, 내용물을 담기에는 편하지만 안의 내용물이 무엇인지 알 수 없기 때문에, 매번 확인해야한다
• 타입스크립트 언어는 페터병과 같아서, 안의 내용물이 명확하게 표시되어 이쏙, 불순물이 없음을 보장한다
• 즉, 타입스크립트는 변수의 데이터 타입을 명시함으로써 코드의 안정성을 높여준다

데이터 표기의 장점

• 객체 지향 특성을 지원한다
• 컴파일 타임 시 오류를 체크한다

데이터 타입의 종류

기본 타입은 데이터 타입, 객체 타입, 특수 타입으로 나눌 수 있다

기본 데이터 타입

• number : 숫자 타입, 정수와 실수 포함
• string : 문자열 타입
• boolean : 참, 거짓을 나타내는 불리언 타입
• null : 값이 없음을 나타내는 타입
• undefined : 값이 할당되지 않는 변수의 기본값인 타입

객체 타입

• object : 객체를 나타내는 타입
• array : 동일한 타입의 요소를 가진 배열을 나타내는 타입
• tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입

특수 타입

• any : 어떠한 타입이든 할당될 수 있는 타입
• unknown : 타입을 미리 알 수 없는 경우 사용되는 타입
  

타입 명시

변수의 데이터 타입을 지정

• 변수에 대한 더 정확한 정보를 얻을 수 있다
• let x : string = '문자열';

인터페이스

새로운 기능에 대한 명세이며, 인터페이스를 상속받은 클래스는 인터페이스의 명세를 구현해야한다

• 사용자가 정의한 타입
• string, number 타입과 마찬가지로 데이터 타입으로 사용 가능
• 인터페이스 내에서 메소드 선언 가능
• 인터페이스를 상속받은 클래스는 반드시 메소드를 오버라이딩 해야한다

예시

interface Student {
	stdId: number;
	stdName?: string;
	age?: number;
	gender?: string;
	course?: string;
	completed?: boolean;
	// setName(name: string): void;
	setName: (name: string) => void; // 함수 이름을 변수의 프로퍼티로 사용
}

class MyStudent implements Student {
	stdId = 91011;
	stdName = 'park';
	age = 30;
	gender = 'male';
	course = 'node.js';
	completed = true;

	setName(name: string): void {
		this.stdName = name;
		console.log('이름 설정 :' + this.stdName);
	}
}

const myInstance = new MyStudent();
myInstance.setName('엘리스');

// 이름 설정 : 엘리스

열거형

사용자 정의 타입이며, 사용자가 정의한 특정 값 이외의 값들을 사용하지 못하도록한다

• enum 키워드 사용
• 예상되는 값의 집합을 명시적으로 표현할 때 사용
• 숫자 열거형과 문자열 열거형 존재
• 기본적으로 숫자 열거형 사용

숫자 열거형 예시

// typescript
enum GenderType {
	Male,
	Female,
	GenderNeutral,
}

// javascript
var GenderType;
(function (GenderType) {
	GenderType[GenderType["Male"] = 0] = "Male";
	GenderType[GenderType["Female"] = 1] = "Female";
	GenderType[GenderType["GenderNeutral"] = 2] = "GenderNeutral";
})(GenderType || (GenderType = {}));

문자열 열거형 예시

// typescript
enum GenderType {
	Male = 'male',
	Female = 'female',
	GenderNeutral = 'neutral',
}

// javascript
var GenderType;
(function (GenderType) {
	GenderType["Male"] = "male";
	GenderType["Female"] = "female";
	GenderType["GenderNeutral"] = "neutral";
})(GenderType || (GenderType = {}));

객체 리터럴

특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야한다

문자열 리터럴 타입

let status = 'success' | 'error';
status = 'success'; // 유효
status = 'pending'; // 에러 발생 : 'pending'은 허용되지 않는다

숫자 리터럴 타입

let status = 50 | 100;
status = 100; // 유효
status = 150; // 에러 발생

불리언 리터럴 타입

let status = true;
status = true; // 유효
status = false; // 에러 발생

객체 리터럴 타입

let person = {name: 'John', age: 30};
status = {name: 'John', age: 30}; // 유효
status = {name: 'Alice', age: 25}; // 에러 발생

타입 별칭

type CardinalDirection = 'North' | 'Ease' | 'South' | 'West';
let direction: CardinalDirection;
direction = 'North'; // 유효
direction = 'Northeast'; // 에러 발생 : 'Northeast'는 허용되지 않음

리터럴 타입 사용 시 좋은 점

• 코드의 가독성이 높아진다
• 잘못된 값이 들어오는 것을 방지할 수 있다

any 타입

모든 타입을 허용할 수 있는 타입

• 타입 정보는 개발자의 의도를 명확하게 전달할 수 있기 때문에, 많으면 많을 수록 좋다
• 타입을 지정할 수 없는 제한적인 경우에만 any 타입을 사용한다
• any 타입을 일부러 사용하지 말아야한다

유니온 타입(공용체)

제한된 타입을 동시에 지정하고 싶을 때 사용한다

• | 기호를 사이에 두고 동시에 타입을 지정할 수 있다
• anyVal 변수는 number 나 string 타입 중 아무 타입의 값이 올 수 있다

예시

let anyVal : number | string;

타입 별칭

반복되는 타입들을 재사용하기 위해 타입을 재정의한다

예시

type strOrNum = number | string;
let numStr: strOrNum = '100';

타입 가드

typeof 연산자를 이용하여 타입 검증을 수행

예시

type strOrNum = number | string;
let numStr: strOrNum = '100';
let item: number;

function convertToNumber(val: strOrNum): number {
	// typeof operator
	if (typeof val == 'string') {
		item = 0;
	} else {
		item = val;
	}
	return Number(val);
}

Array와 Tuple의 차이

• Array는 길이가 가변적이며, 동일한 타입의 요소로 구성된다
• Tuple은 길이가 고정적이며, 각 요소의 타입이 정해져 있다

예시

// Array
let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ['apple', 'banana', 'orange'];

// Tuple
//튜플 : 여러 타입을 가진 배열이며, 타입의 순서가 정해져 있다
let greeting: [number, string, boolean] = [1, 'hello', true];

타입스크립트 기반의 OOP

클래스란, 연관된 변수와 메소드(함수)들을 한 덩어리로 묶은 사용자 정의 타입

• 클래스(설계도, 생산틀)는 객체의 뼈대이고, 객체는 클래스의 실체이다
• 예들들어, 클래스는 붕어빵틀과 같고, 객체는 붕어빵틀로 만든 붕어빵과 같다

getter와 setter

prvate 접근 지정자의 프로퍼티에 접근하고 설정하기 위해 사용

• get 과 set 을 이용한 메소드를 통해 프로퍼티에 접근할 수 있도록 함으로써, 객체지향의 캡슐화를 구현할 수 있다

Getter(접근자)과 Setter(설정자) 예시

class Employee {
	constructor(
		private _empName: string, // 암묵적 클래스의 멤버변수로 선언
		private _age: number,
		private _empJob: string
	) {}
	
	get empName() {
		return this._empName;
	}
	
	set empName(val: string) {
		this._empName = val;
	}
	
	printEmp = (): void => {
		console.log(`${this._empName}의 나이는 ${this._age}이고, 직업은 ${this._empJob}입니다.`);
	};
}

let employee1 = new Employee('kim', 20, 'developer');

console.log(employee1.empName);

// 

constructor(생성자) 단축 표현

접근 지정자를 생성자의 매개변수에 작성함으로써, 속성으로 자동 선언하고 초기화할 수 있다

변경 전

class Employee {
	private _empName: string;
	private _age: number;
	private _empJob: string;
	constructor(empName: string, age: number, empJob: string) {
		this._empName = empName;
		this._age = age;
		this._empJob = empJob;
	}
}

변경 후

class Employee {
	constructor(
		private _empName: string, // 암묵적 클래스의 멤버변수로 선언
		private _age: number,
		private _empJob: string
	) {}
}