열이의 개발블로그

✅ Interface란? 인터페이스는 object(객체) 모양을 특정해주기 위한 것 interface Player { nickname: string, team: Team, health: Health } type Player = { nickname: string, team: Team, health: Health } 타입과 같이 인터페이스는 객체의 형태를 특정해주는 역할을 합니다. ✏️ 타입과의 차이점 type(타입)은 모든 타입의 모양을 설명하는 역할을 할 수 있지만 interface(인터페이스)는 object(객체)의 모양만을 설명하는 역할만 할 수 있습니다. // 에러 interface Hello = string; 위와 같은 코드는 사용할 수 없습니다. ✅ interface 상속 interface Us..

✅ Static 클래스를 통해 인스턴스를 생성할 필요 없이, 클래스의 속성 또는 메소드를 사용하는 방식 class Player { static firstName: string = "GilDong"; static hello() { return "hello" } } Player.firstName; Player.hello(); 위의 예시처럼 속성과 메소드에 static 키워드를 붙이면 클래스의 인스턴스를 생성하지 않고 속성과 메소드를 사용할 수 있습니다.

타입스크립트 타입의 확장된 문법을 확인해봅시다. ✅ Type Aliases(타입 별칭) type Nickname = string; type Health = number; type Friends = Array; type Player = { nickname: Nickname; healthBar: Health; }; const nico: Player = { nickname: "nico", healthBar: 10, }; type Food = string; const kimchi: Food = "delicious"; type alias를 이용하여 타입스크립트에서 만들고 싶은 무수히 많은 종류의 타입을 설명해주면 원하는 타입을 만들 수 있습니다. ✏️ 지정된 옵션 사용 type Team = "red" | "blu..

타입스크립트에서의 클래스를 알아봅시다. ✅ Class(클래스) 타입스크립트도 객체지향 프로그래밍 언어이기 때문에 객체를 생성하는 클래스 기능을 사용할 수 있습니다. Javascript class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } 자바스크립트에서는 contructor 메서드를 만들고 그 안에서 this.height = height this.width= width 와 같은 식으로 작성해야 합니다. Typescript class Player { constructor( private firstName: string, private lastName: string, public nickName:..

타입스크립트의 함수에 대해서 알아봅시다. ✅ Call Signatures 함수 위에 마우스를 올렸을 때 보게 되는 것 type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 함수의 타입을 만들어두고 함수를 구현하기 전에 함수가 어떻게 작동하는지 서술해둘 수 있는 것을 call signatures라고 합니다. ✅ Overloading 함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 발생시킴 type Add = { (a: number, b: number): number (a: number, b: string): number } const add: Add = (a, b) => { if (typeof..

✅ 타입스크립트의 타입 체커(Type Checker)와 소통하는 방법 let a = "hello" let b: boolean = false; let c: number[] = [] a는 string이라고 추론할 수 있도록 하는 방법입니다. b는 boolean이라고 명시적으로 알려주는 방법입니다. c는 숫자만 들어갈 수 있는 array라고 명시적으로 선언하는 방법입니다. const player: object = { name: "nico", }; player.name; 객체의 경우도 object라고 명시적으로 선언할 수 있지만 이 때는 오류가 발생합니다. object라는 타입에 name이라는 속성이 없기 때문입니다. const player: { name: string } = { name: "nico" }; p..