일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 객체
- vuejs
- 휘낭시에
- SQL 전문가
- undefined
- 오븐
- set
- forEach
- TS
- 배열
- 울산맛집
- Javascript
- SQL
- 함수
- sqld
- size
- 홈베이킹
- TypeScript
- 울산 남구 맛집
- Has
- clear
- Vue
- Delete
- slice
- 울산 맛집
- let
- 정보처리기사
- Map
- 자바스크립트
- 화살표 함수
- Today
- Total
Bae
[TypeScript] 객체와 클래스 본문
ㅁ 객체와 클래스
- 클래스 선언문
타입스크립트는 class, private, public, protected, implements, extend와 같은 키워드를 제공함
다음은 클래스 선언문의 기본 형태임
class 클래스 이름 {
[private | protected | public] 속성 이름[?]: 속성타입[...]
}
// Person1.ts
class Person1{
name: string
age?: number
}
다음 코드는 Person1 클래스에 new 연산자를 적용해 jack1이라는 이름의 Person1 타입 변수를 만든다.
jack1은 name과 age 속성을 가지는 타입이므로 6행과 같은 코드를 작성할 수 있음
...생략...
let jack1 : Person1 = new Person1()
jack1.name = 'Jack'; jack1.age = 32
console.log(jack1) // Person1 { name: 'Jack', age: 32 }
- 접근 제한자
클래스의 속성은 public, private, protect와 같은 접근 제한자(access modifier)를 이름 앞에 붙일 수 있음
만약 생략하면 모두 public으로 간주함
- 생성자
타입스크립트 클래스는 constructor라는 이름의 특별한 메소드를 포함하는데, 이를 생성자(constructor)라고 함
2행과 같은 형태로 클래스의 속성(name, age)을 선언할 수 있음
// Person2.ts
class Person2{
constructor(public name: string, public age?: number) {}
}
let jack2 : Person2 = new Person2('Jack', 32)
console.log(jack2) // Person2 { name: 'Jack', age: 32 }
타입스크립트는 생성자의 매개변수에 public과 같은 접근 제한자를 붙이면 해당 매개변수의 이름을 가진 속성이 클래스에 선언된 것처럼 동작함
즉, Person2 클래스는 다음 Person3 클래스처럼 장황하게 구현된 것을 함축해서 구현한 것임
// Person3.ts
class Person3{
name: string
age?: number
constructor(name: string, age?: number){
this.name = name; this.age = age
}
}
let jack3 : Person3 = new Person3('Jack', 32)
console.log(jack3) // Person3 { name: 'Jack', age: 32 }
- 인터페이스 구현
타입스크립트 클래스는 인터페이스를 구현할 수 있음
클래스가 인터페이스를 구현할 때는 다음처럼 implemetns 키워드를 사용함
class 클래스 이름 implements 인터페이스 이름{
...
}
다음 코드는 IPerson4라는 이름의 인터페이스를 구현하는 예시임
기억해 둬야 할 점은 인터페이스는 이러이러한 속성이 있어야 한다는 규약(spec)에 불과할 뿐 물리적으로 해당 속성을 만들지 않는다는 점임
따라서 클래스 몸통에는 반드시 인터페이스가 정의하고 있는 속성을 멤버 속성으로 포함해야 함
interface IPerson4{
name: string
age?: number
}
class Person4 implements IPerson4 {
name: string
age: number
}
다음 코드는 앞서 본 Person2 구현 방식(생성자와 public 키워드 사용)을 인터페이스 구현에 응용한 것임
// Person4.ts
interface IPerson4 {
name: string
age?: number
}
class Person4 implements IPerson4 {
constructor(public name: string, public age?: number) {}
}
let jack4: IPerson4 = new Person4('Jack', 32)
console.log(jack4); // Person4 { name: 'Jack', age: 32 }
- 추상 클래스
타입스크립트는 abstract 키워드를 사용해 추상 클래스를 만들 수 있음
추상 클래스는 다음처럼 abstract 키워드를 class 키워드 앞에 붙여서 만든다.
추상 클래스는 자신의 속성이나 메소드 앞에 abstract를 붙여 나를 상속하는 다른 클래스에서 이 속성이나 메소드를 구현하게 함
abstract class 클래스 이름 {
abstract 속성 이름: 속성 타입
abstract 메소드 이름() {}
}
다음 AbstractPerson5는 name 속성 앞에 abstract가 붙었으므로 new 연산자를 적용해 객체를 만들 수 없음
// Person5.ts
abstract class AbstractPerson5 {
abstract name: string
constructor(public age?: number) {}
}
- 클래스의 상속
객체지향 언어는 부모 클래스를 상속받는 상속 클래스를 만들 수 있는데, 타입스크립트는 다음처럼 extends 키워드를 사용해 상속 클래스를 만든다.
class 상속 클래스 extends 부모 클래스 { ... }
다음 Person5 클래스는 AbstractPerson5 추상 클래스를 상속해 AbstractPerson5가 구현한 age를 얻고, AbstractPerson5를 상속받는 클래스가 구현해야 할 name 속성을 구현함
참고로 타입스크립트에서는 부모 클래스의 생성자를 super 키워드로 호출할 수 있음
// Person5.ts
... 생략 ...
class Person5 extends AbstractPerson5 {
constructor(public name: string, age?: number) {
super(age)
}
}
let jack5: Person5 = new Person5('Jack', 32)
console.log(jack5) // Person5 { name: 'Jack', age: 32 }
- static 속성
타입스크립트 클래스는 정적인 속성을 가질 수 있음
클래스의 정적 속성은 다음과 같은 형태로 선언함
class 클래스 이름{
static 정적 속성 이름: 속성 타입
}
다음 코드의 클래스A는 initValue라는 정적 속성을 가짐
클래스의 정적 속성은 5행처럼 '클래스 이름.정적 속성 이름'형태의 점 표기법(dot notation)을 사용해 값을 얻거나 설정함
// static.ts
class A {
static initValue = 1
}
let initVal = A.initValue // 1
[출처: Do it 타입스크립트 프로그래밍]
'TypeScript' 카테고리의 다른 글
[TypeScript] 객체의 타입 변환 (0) | 2022.03.16 |
---|---|
[TypeScript] 객체의 비구조화 할당문 (0) | 2022.03.15 |
[TypeScript] 객체와 인터페이스 (0) | 2022.03.10 |
[TypeScript] 타입스크립트 변수 선언문 (0) | 2022.03.09 |
[TypeScript] tsconfig.json 파일 살펴보기 (0) | 2022.03.08 |