type Food = string
type Player = {
nickname: string,
healthBar: number
}
type Team = "read" | "blue" | "yellow"
type Health = 1 | 5 | 21
type Player = {
nickname: string,
team: Team,
healthBar: Health
}
많은 종류의 타입을 설명하거나 지정된 값, 옵션으로 제한할 수 있다. type과 interface는
약간의 차이점은 있지만 거의 비슷하다. type
은 원하는 모든 것을 만들 수 있다.
interface Player {
nickname: string,
healthBar: number
}
interface
는 객체만을 특정할 수 있는 한가지 용도만 가지고 있다.
interface User {
name: string
}
interface Player extends User {
health: number
}
const mayer : Player = {
name: "john"
}
interface
는 class처럼 상속이 가능하다.
type User { name: string } type Player = User & { health: number } const mayer : Player = { name: "john" }
type
으로 상속할때는 다른 방법이다.
interface User {
name: string
}
interface User {
age: number
}
const me: User = {
name: "John",
age: 33
}
abstract class User {
constructor(
private firstName:string,
private lastName:string,
public nickName:string
) {}
getFullName() {
return `${this.firstName} ${this.lastName}`
}
class Player extends User {
}
자바스크립트에 사용되지 않는 User
클래스가 출력이 된다. 그래서 인터페이스를 사용하면 자바스크립트에서는 표기 되지 않고 타입스크립트에서만 명시해줄 수 있다. interface
를 상속할때는 private property를 사용하지 못한다.
interface
오브젝트나 클래스의 모양을 묘사하도록 해준다.
interface User {
firstName:string,
lastName:string,
nickName:string,
getFullName(): string
}
class Player implements User {
constructor(
public firstName: string,
public lastName: string,
public nickName: string
){}
getFullName() {
return `${firstName} ${lastName} and ${nickName}`
}
}
extends
를 쓰면 자바스크립트로 바뀐다. 그래서 자바스크립트가 사용하지 않는 단어인 implements
를 대신 쓴다. 그래서 자바스크립트의 코드가 가벼워질 수 있다.
interface
는 타입스크립트에서만 존재한다. 코드가 가벼워지고 파일 사이즈를 줄일 수 있는 방법이다.
class Player implements User, Human {
constructor(
public firstName: string,
public lastName: string,
public nickName: string,
public Health: string
){}
getFullName() {
return `${firstName} ${lastName} and ${nickName}`
}
}
Human
인터페이스를 추가로 상속할 수 있다.
즉, 타입스크립트에게 객체 모양을 알려주기 위해서는 인터페이스를 쓰고 나머지 상황에서는 타입을 쓴다.