클래스의 필드값
class Person{
data = 0;
}
Person이라는 클래스에 constructor 없이 변수를 선언.
이런 필드값들은 생성된 모든 자식들에게서 사용이 가능하다.(모든 자식들 위 data 속성 갖다 쓸수 있음)
class 필드값(constructor와 똑같은 역할)
사람1, 사람2는 data를 갖다 쓸수 있다..
let 사람1 = new Person();
let 사람2 = new Person();
console.log(사람1.data); // 0이 나옴
console.log(사람2.data); // 0이 나옴
중요한 건 변수의 타입지정!
class Person{
data :number = 0;
}
: number로 타입지정 가능하지만 생략해도 대부분 상황에서 컴파일러가 타입지정 알아서 해준다.
클래스의 타입지정하기
기본적으로 클래스를 생성할 때, 인스턴스의 속성을 정의하기 위해서 constructor를 사용해야한다.
이렇게 constructor 안에서 값을 생성하면 이 Person이라는 클래스로부터 생성된 모든 인스턴스들은 this.name의 값을 사용할 수 있게 된다. 자바스크립트에서는 여기까지만해도 문제가 되지 않음.
하지만 타입스크립트에서 이렇게 constructor를 생성하면 name부분에서 에러. (name이란 property존재하지 않는다고..)
타입스크립트에서 constructor 값을 사용하기 위해서는 필드값 미리 지정해줘야함. 타입지정도 해주면 좋음.
필드값에 name의 타입을 미리 지정을 해주면
constructor에서 name 값을 사용할 때, 타입스크립트가 문제삼지 않는다.
constructor의 파라미터 타입
class Person{
name :string;
constructor(a: string){
this.name = a;
}
이렇게 파라미터를 넣어두면( constructor안에있는 파라미터 타입지정도 꼭 해주고 )
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 );
}
}
클래스에서 함수라는 이름을 가진 메서드를 생성. 이것으로 프로토타입에 '함수'라는 메서드가 추가되었다.
이 메서드를 만들때 함수를 만드는 것과 동일하게 파라미터와 반환값에 타입을 지정해주면 된다.
이렇게하면 생성된 인스턴스들에서 '함수'라는 메서드를 사용할 수 있음.
실습1) Car 클래스를 만들기
1. 대충 { model : '소나타', price : 3000 } 이렇게 생긴 object를 복사해주는 class를 만들어보십시오.
2. 그리고 복사된 object 자료들은 .tax() 라는 함수를 사용가능한데 현재 object에 저장된 price의 10분의1을 출력해주어야합니다.
3. model과 price 속성의 타입지정도 알아서 잘 해보십시오. tax() 함수의 return 타입도요.
'Web > TypeScript' 카테고리의 다른 글
interface object 타입지정 (0) | 2023.02.20 |
---|---|
타입스크립트로 HTML 변경과 조작할 때 주의점 (0) | 2023.02.17 |
함수와 methods에 type alias 지정하는 법 (0) | 2023.02.12 |
Literal Types (0) | 2023.02.12 |
Type Aliases & readonly (0) | 2023.02.12 |