[블로깅]타입스크립트 문법(2):enum, 인터페이스, 타입별칭, 타입추론, 클래스

enum - 열거형

enum Color {
  Red,
  Green,
  Blue,
}

Interface - 객체 구조 정의

interface User {
	name: string;
	age: number;
}

타입 별칭

type MyString = string;

let str1: string = 'hello!';

// string 타입처럼 사용할 수 있습니다.
let str2: MyString = 'hello world!';

클래스 - ts

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}살 입니다.`);
  }
}

---

실습코드

JavaScript를 TypeScript로 포팅 하기 - 인터페이스와 상속

/* 코드를 작성한 뒤 
1. tsc src/index.ts
2. node src/index.js
순으로 터미널에 입력하여 결과를 확인해 주세요.
*/

/* 실습 1 */

interface User {
  name: string;
  age: number;
}

//Student 인터페이스를 작성합니다.
interface Student extends User {
  grade: number;
}

//Student 인터페이스를 받는 kimcoding을 완성합니다.
//kimcoding의 이름은 김코딩이고, 나이는 20세이며, 학년은 1입니다.
const kimcoding: Student = {
  name: 'kimcoding',
  age: 20,
  grade: 1,
};

console.log(kimcoding);

/* 코드를 작성한 뒤 
1. tsc src/index.ts
2. node src/index.js
순으로 터미널에 입력하여 결과를 확인해 주세요.
*/

/* 실습 2 */

interface Color {
  name: string;
  brightness: number;
}

interface ClothesType {
  kind: string;
  length: number;
}

//Closet 인터페이스를 작성합니다.
interface Closet extends Color, ClothesType {
  season: string;
}

//Closet 인터페이스를 받는 skirt를 완성합니다.
//skirt는 노란색이며, 밝기는 0이고, 종류는 치마이며 길이는 5 정도로 중간이며 여름용입니다.
const skirt: Closet = {
  name: 'yellow',
  brightness: 0,
  kind: 'skirt',
  length: 5,
  season: 'summer',
};

console.log(skirt);

JavaScript를 TypeScript로 포팅 하기 - 타입 별칭

/* 코드를 작성한 뒤 
1. tsc src/index.ts
2. node src/index.js
순으로 터미널에 입력하여 결과를 확인해 주세요.
*/

//Todo 타입을 정의합니다.
type Todo = {
  id: number;
  title: string;
  isDone: boolean;
};
//Todo 타입을 사용해 객체를 정의합니다.
const show: Todo = {
  id: 0,
  title: 'what',
  isDone: true,
};

//Todo 타입을 사용한 객체를 출력해봅니다.
function getTodo(todo: Todo): void {
  console.log(todo);
}

getTodo(show);

JavaScript를 TypeScript로 포팅 하기 - 클래스

/* 코드를 작성한 뒤 
1. tsc src/index.ts
2. node src/index.js
순으로 터미널에 입력하여 결과를 확인해 주세요.
*/

class Counter {
  value: number;
  constructor() {
    this.value = 0;
  }
  increase() {
    this.value++;
  }
  decrease() {
    this.value--;
  }
  getValue() {
    return this.value;
  }
}

let counter1 = new Counter();

counter1.increase();
console.log(counter1.getValue());

/* 코드를 작성한 뒤 
1. tsc src/index.ts
2. node src/index.js
순으로 터미널에 입력하여 결과를 확인해 주세요.
*/

class Animal {
  name: string;
  constructor(theName: string) {
    this.name = theName;
  }

  speak(sound = '왕왕!') {
    console.log(`${this.name}(은/는) ${sound}하고 웁니다.`);
  }
}

class Mouse extends Animal {
  constructor(name: string) {
    super(name);
  }

  speak(sound = '찍찍') {
    super.speak(sound);
  }
}

class Cat extends Animal {
  constructor(name: string) {
    super(name);
  }

  speak(sound = '야옹') {
    super.speak(sound);
  }
}

let jerry:Mouse = new Mouse('제리');
let tom:Cat = new Cat('톰');

jerry.speak();
tom.speak('냥냥');