지난 학습에서 class , prototype 에 대해 학습했다. ES6 문법에서는 위처럼 사용할수있는데 복사된 object에다가 기본속성 같은것을 채워넣고 싶으면 ES6에서는 constructor() 이라는 문법이 있는데 그 안에 넣고 싶은 내용을 넣어두면 사람1과 사람2는 name:kim 이라는 값을 가질것이다.
그전에 알아야 할것은 대충 위 그림처럼 변수를 만들어서 넣을수 있는데 이걸 필드값이라고 부른다. class의 필드값은 constructor과 같은 역할을 한다. 위처럼 값을 넣어두면 모든 자식요소는 data라는 속성을 사용할수 있다. 하지만 ts 중요한건 변수의 타입을 지정해야 한다는 것이다. 그러나 ts data라는 속성은 굳이 타입을 지정하지 않아도 알아서 number타입이 되어있을것이다. ts에서 알아서 타입을 넣어주기 때문에!
자 다시 constructor로 와서 this를 사용해서 name값을 넣어줬는데 에러가 발생한다. name 이라는 property가 존재하지 않는다고 하는데.
이러한 constructor 문법에서는 이렇게 name이라는 값을 미리 정의해줘야 사용이 가능하다. TypeScript constructor() 는 필드값에 정의된 값이 미리 있어야 this.정의값 을 사용할수 있는것이다.
이러한 점들이 TS와 JS의 차이점이라고 보면 된다.
당연히 constructor 함수 안에서도 타입지정이 가능하다. 받아올 변수를 설정하고 그 변수의 타입을 지정할수 있다.
그럼 return 타입도 지정하는것이 좋을까?굳이 그럴 필요는 없다. Person으로 부터 생성되는 자료형은 전부 다 object이다.
prototype은 이렇게 사용했었는데 2번째 그림처럼 저 위치에 넣어주면 된다.prototype 에 함수를 넣었을때도 타입은 꼭 필요하다.
숙제1) Car 클래스를 만들고 싶습니다.
-
대충 { model : '소나타', price : 3000 } 이렇게 생긴 object를 복사해주는 class를 만들어보십시오.
-
그리고 복사된 object 자료들은 .tax() 라는 함수를 사용가능한데 현재 object에 저장된 price의 10분의1을 출력해주어야합니다.
-
model과 price 속성의 타입지정도 알아서 잘 해보십시오. tax() 함수의 return 타입도요.
동작 예시)
let car1 = new Car('소나타', 3000)
console.log(car1) //콘솔창 출력결과는 { model : '소나타', price : 3000 }
console.log(car1.tax()) //콘솔창 출력결과는 300나의 풀이
class Car{
modle:string;
price:number;
constructor(mo ,pr) {
this.modle = mo;
this.price = pr;
}
tax():number{
return this.price /10;
}
}
let car1 = new Car('소나타', 3000)
console.log(car1);
console.log(car1.tax()) 센세 풀이
class Car {
model :string;
price :number;
constructor(a :string, b :number){
this.model = a;
this.price = b;
}
tax() :number{
return this.price * 0.1
}
}
let car1 = new Car('소나타', 3000)
console.log(car1) //콘솔창 출력결과는 { model : '소나타', price : 3000 }
console.log(car1.tax()) //콘솔창 출력결과는 300
이렇게 작성했더니 콘솔창에 출력이 잘됩니다.
필드값에도 model :string 타입지정하고
파라미터에도 a :string 타입지정하면 뭔가 쓸데없는 중복같은 느낌이 들지만
필드값은 디폴트값 이런 걸로 생각하셔도 괜찮습니다. 숙제2) class인데 파라미터가 잔뜩 들어가는 class Word를 만들어봅시다.
- object 만들 때 new Word() 소괄호 안에 숫자 혹은 문자를 입력하면
- 숫자는 전부 object 안의 num 속성 안에 array 형태로 저장되고
- 문자는 전부 object 안의 str 속성 안에 array 형태로 저장되는 class를 만들어봅시다.
- class 만들 때 넣을 수 있는 숫자와 문자 갯수는 일단 제한은 없습니다. 그리고 타입 빼먹지 마셈
동작 예시)
let obj = new Word('kim', 3, 5, 'park');
console.log(obj.num) //[3,5]
console.log(obj.str) //['kim', 'park']나의 풀이
class newWord{
num;
str;
constructor(...param:(number|string)[]) {
let numbers :number[]=[];
let strings :string[]=[];
param.forEach((a)=>{
if(typeof a ==='number'){
numbers.push(a);
}else{
strings.push(a);
}
})
this.num = numbers;
this.str = strings;
}
}
let obj = new newWord('kim', 3, 5, 'park');
console.log(obj.num) //[3,5]
console.log(obj.str) //['kim', 'park']센세 풀이
class Word{
num;
str;
constructor(...param : (number | string)[] ){
let 숫자들 :number[] = [];
let 문자들 :string[] = [];
param.forEach((i)=>{
if (typeof i ==='string') {
문자들.push(i)
} else {
숫자들.push(i)
}
})
this.num = 숫자들;
this.str = 문자들;
}
}
let obj = new Word('kim', 3, 5, 'park');
console.log(obj.num) //[3,5]
console.log(obj.str) //['kim', 'park']
지금 100만개 들어온 파라미터가 대체 무슨 타입인지 검사해서
각 속성에 집어넣으면 됩니다.
1. class Word를 만들고 constructor를 만들었는데
2. 그 안에는 rest parameter가 들어올 수 있다고 만들었습니다. 이제 new Word() 할 때 파라미터 개많이 입력가능
3. rest parameter는 array로 들어옵니다. 그걸 반복문 돌려서 하나하나 검사해봅니다.
4. 파라미터 타입이 문자면 문자들 [] 에 추가, 숫자면 숫자들 [] 에 추가합니다.
5. this.num = 숫자들 array, this.str = 문자들 array 이렇게 해줬습니다.
테스트해보니 잘 됩니다.
