TypeScript 열거형(Enum)
열거형은 일반적으로 상수값을 대신하여 사용되고 타입스크립트에서는 열거형이 많이 사용된다.
열거형은 코드를 더욱 가독성 높게 만들어주고, 오타 같은 실수를 방지해 준다.
숫자형 열거형
enum Color {
Red,
Green,
Blue,
}
// 숫자형 열거형
enum Color {
Red = 1,
Green = 2,
Blue = 4,
}
let c: Color = Color.Green;
let greenValue: number = Color.Green;
let blueValue: number = Color.Blue;
console.log(c); // 출력: 2
console.log(greenValue); // 출력: 2
console.log(blueValue); // 출력: 4
문자형 열거형
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"
문자 열거형은 숫자 열거형과 다르게 auto-incrementung 이 없다.
대신 디버깅을 할 때 숫자 열거형의 값은 불명확할때도 있지만 문자형 열거형은 항상 명확한 값이 나와서 읽기 편하다.
TypeScript 변수 인터페이스
타입스크립트에서 인터페이스는 일반적으로 타입체크를 위해 사용된다.
인터페이스는 변수, 함수, 클래스에 사용 가능하며 인터페이스에 선언된 프로퍼티 또는 메서들의 구현을 가제해 일관성을 유지하도록 한다.
interface User {
name: string;
age: number;
}
// 정상적으로 선언됩니다.
const user: User = {
name: "anna",
age: 20
}
// 프로퍼티의 순서를 지키지 않아도 정상적으로 선언됩니다.
const user: User = {
age: 20,
name: "anna"
}
// 정의된 프로퍼티보다 적게 작성했기 때문에 에러가 납니다.
const user: User = {
name: "anna"
}
// 정의된 프로퍼티보다 많이 작성했기 때문에 에러가 납니다.
const user: User = {
name: "anna",
age: 20,
job: "developer"
}위에 보면 interface 예약어를 사용해 User 인터페이스를 만들었는데
이름을 대문자로 작성했다. 그 이유는 네이밍 컨벤션 때문인데
네이밍 컨벤션 : 이름을 짓는 일종의 관례로 타입스크립트를 개발할때 대부분의 개발자는 인터페이스의 이름을 대문자로 시작하도록 작성한다. 인터페이스는 객체의 타입을 정의하고 객체가 대문자로 시작하는 것과 유사하기 때문에 일관성 있는 코드 작성을 위해 위와 같은 관례를 따른다.
interface User {
name: string;
age?: number;
}
// 정상적으로 선언됩니다.
const user: User = {
name: "anna"
}
위에 코드처럼 interface에는 User에는 name과 age 가 정의되어있는데 age?:number를 해주게 되면 age의 값이 있으면 넣어주고 없으면 생략해 라는 것으로 이해하면 된다.
TypeScript 함수와 인터페이스
interface User {
name: string;
age: number;
job: string;
}
interface Greeting {
(user: User, greeting: string): string;
}
const greet: Greeting = (user, greeting) => {
return `${greeting}, ${user.name}! Your job : ${user.job}.`;
}
const user: User = {
name: "anna",
age: 30,
job: "developer"
};
const message = greet(user, "Hi");
console.log(message);User 인터페이스 외에도 Greeting 인터페이스를 추가해 함수타입의 코드이다.
Greeting 인터페이스에서 이미 greet 의 매개변수인 user와 greeting 의 타입과 반환 타입이 작성되어 있기 때문에, greet 함수는 string 타입을 반환한다고 명시하지 않아도 되며, 매개 변수의 타입 또한 작성하지 않아도 된다.
TypeScript 클래스와 인터페이스
클래스에서도 인터페이스를 이용 할 수 있는데 아래 코드와 같이 사용한다.
interface Calculator {
add(x: number, y: number): number;
substract(x: number, y: number): number;
}
class SimpleCalculator implements Calculator {
add(x: number, y:number) {
return x + y;
}
substract(x: number, y: number) {
return x - y;
}
}
const caculator = new SimpleCalculator();
console.log(caculator.add(4, 9)); //13
console.log(caculator.substract(10, 5)); //5TypeScript 인터페이스와 상속
자바스크립트에서는 확장을 할때 extends 라는 키워드를 사용해 기존에 존재했던 클래스를 상속해 새로운 클래스를 정의할 수 있다.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}
}
//Person 클래스를 extends 키워드를 사용해 상속하여 새로운 클래스인 Student를 정의했습니다.
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
study() {
console.log(`${this.name} is studying hard for the grade ${this.grade}.`);
}
}아래와 같이 타입스크립트에서도 extends 라는 키워드를 사용해 기존에 존재했던 인터페이스를 상속해 확장이 가능하다.
interface Person {
name: string;
age: number;
}
interface Developer extends Person {
language: string;
}
const person: Developer = {
language: "TypeScript",
age: 20,
name: "Anna",
}TypeScript Class
타입 스크립트 클래스는 자바스크립트의 클래스와 유사하지만 다른기능들이 존재한다.
자바스크립트
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
greet(): void {
console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
}
}
타입스크립트
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = 예훈;
this.age = 25;
}
greet(): void {
console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
}
}위 코드는 name 속성과 age 속성이 각가 문자열과 숫자 타입으로 정의되어있는데 타입스크립트에서는 클래스를 정의할 때 construcor를 이용해 초기화하는 멤버들은 전부 상단에 정의해줘야한다는것이기 때문에 인자로 받을 때도 정확히 타입을 명시해줘야한다.
클래스와 상속
타입스크립트 클래스에서는 인터페이스와 마찬가지고 기존에 존재했던 클래스를 상속받아 확장해 새로운 클래스를 만들수 있는데 이때도 extends 키워드를 사용해 상속할 수 있다.
class Animal {
move(distanceInMeters: number): void {
console.log(`${distanceInMeters}m 이동했습니다.`);
}
}
class Dog extends Animal {
speak(): void {
console.log("멍멍!");
}
}
const dog = new Dog();
dog.move(10);
dog.speak();
// 출력결과는
// 10m 이동했습니다.
// 멍멍!코드에서 보다시피 Animal이라는 클래스를 Dog라는 클래스가 상속받고 있고 Dog 클래스는 Animal 클래스로부터 프로퍼티와 메서드를 상속받아 Dog 클래스는 파생클래스 또는 하위클래스라고 불린다. 여기서 Animal 클래스는 기초 클래스 또는 상위 클래스라고 불린다.
