본문 바로가기

Javascript/TypeScript

[타입스크립트] 클래스의 타입을 지정하기

클래스의 필드값 : 

클래스에 타입을 지정하는 것을 설명하기에 앞서서 클래스의 필드값에 대해서 설명해보겠다. 

class Person{
data = 0 
}

이렇게 Person이라는 클래스에 constructor가 없이 변수를 선언해두면, 이런 값을두고 우리는 클래스의 필드값이라고 부른다. 

이런 필드값들은 생성된 모든 자식들에게서 사용이 가능하다. 

let 사람1 = new Person()
console.log(사람1.data) // 0

이렇게 출력해보면 0이라는 값이 나오게 될 것이다. 


클래스의 타입지정하기 : 

이제 본격적으로 클래스의 타입 지정에 대해서 알아보자. 기본적으로 클래스를 생성할 때, 인스턴스의 속성을 정의하기 위해서 constructor를 사용해야한다. 

class Person {
  constructor(){
  	this.name = 'kim'
  }
}

이렇게 constructor 안에서 값을 생성하면 이 Person이라는 클래스로부터 생성된 모든 인스턴스들은 this.name의 값을 사용할 수 있게 된다. 자바스크립트에서는 여기까지만해도 문제가 되지 않는다. 

하지만 타입스크립트에서 이렇게 constructor를 생성하면 name부분에서 에러가 난다. 

타입스크립트에서 constructor 값을 사용하기 위해서는 필드에 값을 미리 생성해주어야 한다.타입값도 같이!

class Person {
	name:string;
	constructor() {
		this.name = 'kim'
	}
}

이렇게 필드값에 name의 타입을 미리 지정을 해주고나면 constructor에서 name 값을 사용할 때, 타입스크립트가 문제삼지 않는다. 


constructor의 파라미터 타입 : 

또한 constructor의  파라미터 타입도 지정할 수 있다. 

constructor(a: string){
	this.name = a;
}

이렇게 파라미터를 넣어두면

let 사람1 = new Person('kim')
let 사람2 = new Person('park')

이런식으로 인스턴스를 생성하려고 할 때, 속성값을 다르게 넣어줄 수 있다. 

 

 

프로토타입의 타입 지정하기 : 

class Person {
	name : string ;
	constructor(a : string ) {
	this.name = a
	}

	함수(a : string){ //여기에 함수를 만들어줄 수도 있다. 여기에 이렇게 집어넣으면 그것자체로 prototype의 속성값을 생성한 것이다. 
	console.log('안녕' + a );
	} 
}

클래스에서 함수라는 이름을 가진 메서드를 생성했다. 이것으로 프로토타입에 '함수'라는 메서드가 추가되었다. 이 메서드를 만들때 함수를 만드는 것과 동일하게 파라미터와 반환값에 타입을 지정해주면 된다. 특별할 것은 없다. 

이렇게하면 생성된 인스턴스들에서 '함수'라는 메서드를 사용할 수 있게된다.