[Section 4] TypeScript 기초(2)

정호·2023년 5월 31일
0

코드스테이츠

목록 보기
46/49
post-custom-banner

열거형

특정 값의 집합을 정의할 때 사용

숫자형 열거형(Enum)

자동으로 0부터 할당, 수동 지정 가능

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
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)

문자열 열거형은 값을 전부 특정 문자 또는 다른 열거형 값으로 초기화 해야함

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"

ex) HttpMethod 열거형 정의

enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

function makeRequest(url: string, method: HttpMethod) {
  // ...
}

makeRequest("/api/data", HttpMethod.Post);

인터페이스

인터페이스는 일반적으로 타입 체크를 위해 사용된다. 변수, 함수, 클래스에 사용할 수 잇으며 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지

예약어(reserved word) : 컴퓨터 프로그래밍 언어에서 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어를 의미합니다. 예를 들어 return, import, const, let 등이 있다.

변수와 인터페이스

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 {
	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);
  • Greeting인터페이스는 User타입과 문자열 타입을 매개변수로 받아 문자열 타입을 반환
  • greet함수는 Greeting을 사용해 구현됨
  • user객체와 문자열 hi를 전달인자로 받아 문자열 반환

타입 별칭

타입별칭은 타입의 새로운 이름을 만드는 것
type사용

type MyString = string;

let str1: string = 'hello!';

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

Mystring이라는 타입을 만ㄷ르어 string같이 사용


타입추론

정적타입 시스템을 사용해 코드의 안정성 높임
변수나 함수의 타입을 선언하지 않고 자동으로 유추하는 기능


 클래스

JS와 비슷하지만 몇가지 추가 기능이 있다.

타입 명시

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 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();

Animal클래스를 상속받은 Dog

public, private

클래스 내 선언된 멤버는 외부로 공개되는것이 디폴트
공개된다고 명시적으로 표시하기위해 public사용

class Person {
  public name: string;
  public age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

외부에 드러내지 않으려면 private

class Person {
  public name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

readonly 키워드

readonly 키워드를 사용하여 프로퍼티를 읽기 전용으로 만들 수 있습니다. 읽기 전용 프로퍼티들은 선언 또는 생성자에서 초기화해야 합니다.

class Mydog {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let spooky = new Mydog("스푸키");
spooky.name = "멋진 스푸키"; // 에러

변경 x

profile
열심히 기록할 예정🙃
post-custom-banner

0개의 댓글