타입스크립트 Class

세나정·2023년 3월 6일
0

TypeScript

목록 보기
1/6
post-thumbnail
내가 까먹을까봐 쓰는 타입스크립트..

기본적인 class 구조

타입스크립트 constructor()는 필드값에 어쩌구가 있어야 this.어쩌구 가능

class Person {
	name :string; // 이렇게 미리 지정을 해주어야함 자바스크립트는 없어도 가능
	constructor() {
    	this.name = 'kim'        
    }
}       

const 사람1 = new Person();
const 사람2 = new Person();
이런 점 때문에 JS꼰대가 TS를 싫어함

class에 필드값을 지정도 가능 (타입도)
근데 굳이 안 해도 당연히 알아서 추정해주긴 함

class Person {
	data = 0;
    // data :number = 0;
}       

const 사람1 = new Person();
const 사람2 = new Person();

console.log(사람2.data); // 결과 0

constructor에 당연히 파라미터 삽입 및 타입 지정도 가능

class Person {
	name :string; 
	constructor(a :string) {
    // 당연히 rest 파라미터, default 파라미터 등도 사용 가능 
    	this.name = 'a'        
    }
}       

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

console.log(사람2)

단, 여기서 return 타입을 지정할 이유는 없음
"복제되는 게 항상 object기 때문"

prototype 함수 만드는 방법

class Person {
	name :string; 
	constructor(a :string) {
    // 당연히 rest 파라미터, default 파라미터 등도 사용 가능 
    	this.name = 'a'        
    }
    
    프로토타입함수(b :string) { 
    	// return 타입을 지정해줘도 좋음 
    	console.log("저는 함수입니다." + b)
        } 
}       

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

사람1.함수("안녕")

[디폴트 파라미터] 
// 얘를 활용하면 굳이 타입지정 안 해도 string만 들어감 

class Person {
  name;
  age;
  constructor ( a = 'kim' ){
    this.name = a;
    this.age = 20;
  }
}

만약 디폴트가 아니라 그냥 파라미터시엔 
class Person {
  name;
  age;
  constructor ( a :string ){
    this.name = a;
    this.age = 20;
  }
}

a에 타입 지정하여 name에 타입지정

p.s. 필드값이랑 constructor와 같은 역할임


예제 1

  1. Car 클래스 만들기 { model : '소나타', price : 3000 }
    이렇게 생긴 object를 복사해주는 class 생성
  2. 복사된 오브젝트 자료들은 .tax()란 함수를 사용하여 object에 저장된 price의 10분의 1을 출력 해주어야함
  3. model과 price 속성 타입지정 해보기 (tax() 함수의 return) 타입도
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

예제 2

class인데 파라미터가 잔뜩 들어가는 class Word를 만들어봅시다.

  1. object 만들 때 new Word() 소괄호 안에 숫자 혹은 문자를 입력하면

  2. 숫자는 전부 object 안의 num 속성 안에 array 형태로 저장되고

  3. 문자는 전부 object 안의 str 속성 안에 array 형태로 저장되는 class를 만들어봅시다.

  4. class 만들 때 넣을 수 있는 숫자와 문자 갯수는 일단 제한은 없습니다. 그리고 타입 빼먹지 마셈

[내답]
class Word(){
	num :number;
    str :string;
	construct(...a){
    	if typeof(a) === number {
        	num.push(...a)
        } 
        if typeof(a) === string {
        	str.push(...a)
        }
    }
}


[정답]
class Word(){
	num;
    str;
    constructor(...param) {
		let 숫자들 :number[] = [];
        let 문자들 :string[] = [];
        
        params.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']
profile
압도적인 인풋을 넣는다면 불가능한 것은 없다. 🔥

0개의 댓글