typescript 기초 - 4

정태호·2023년 7월 15일

타입스크립트

목록 보기
4/13
post-thumbnail

타입스크립트에서 제공하는 키워드

  • 자바스크립트에는 없는 public, private, static, protected 키워드를 사용가능하다.

학교 자바시간에 배운적이 있어서 그런지 어렴풋이 기억이 나는 것 같기도..?

public, private 키워드를 사용한 사용제한

public

  • class 안에서 public 키워드를 사용 가능하다.
  • 원하는 속성 왼쪽에 붙여주면 public age : number 이러한 속성은 어디에서든 수정이 가능하다.
class User {
	public age: number;

	constructor() {
		this.age = 25;
	}
}

const result = new User();
result.age = 26; //26으로 바뀜

기본값이 public 이기 때문에 붙이지 않아도 똑같은 결과가 나타난다. public 키워드는 prototype 함수에도 붙일 수 있다.

private

  • private키워드를 사용하면 수정이 불가능하다.
  • 무조건 class {} 중괄호 안에서만 수정 및 사용이 가능해진다.
  • new 키워드로 생성한 자식에서도 수정 불가
class User {
	person: string;
	private age: number = 25;

	constructor(name) {
		this.person = name + this.age;
	}

	changeAge() {
		this.age = 30;
	}
}

const result = new User("jth");
result.changeAge(); //이 메소드를 호출하여 바꾸는건 가능
result.age = 30 //불가능

속성을 외부에서 숨기고 싶을 때 private키워드를 이용한다. 자바스크립트에서도 #을 속성앞에 붙이면 private 기능을 한다고 한다.

참고

class Person { 
  constructor ( public name :string ){  
  
  } 
}
const Person1 = new Person('jeong')
  • 위 코드처럼 this.name = ... 이런 코드를 줄여서 쓸 수도 있다!

extends 문법

  • 기존 class와 비슷한 class를 만들고 싶다면 extends문법으로 복사 가능하다.
  • 기존 class에 있던 모든 속성이 복사된다.
  • 쉽게 말하면 클래스 복사이다!!!
class User {
	person: string;
	age: number;

	constructor(name) {
		this.person = name + this.age;
	}

	changeAge() {
		this.age = 30;
	}
}

class NewUser extends User {}

console.log(NewUser); // User {age: 30, person: 'jth25'}

protected

  • private의 보안을 살짝 해제한 느낌
  • private와 동일하게 class의 {} 안에서만 수정이 가능하고 추가로 자식들도 수정이 가능해진다.
class Person {
	protected name = "jth";
}

class NewPerson extends Person {
	changeName() {
		this.name = "hong";
	}
}

console.log(NewPerson);

extends 키워드로 복사한 뒤 name을 수정하였지만 아무런 에러가 발생하지 않는다. private는 발생..

class Person {
	protected name = "jth";
}

const newPerson = new Person();

newPerson.name = 'hong';
  • 위의 코드는 당연하게 속성 'name'은(는) 보호되며 클래스 'Person' 및 해당 하위 클래스 내에서만 액세스할 수 있습니다. 에러가 발생했다.

class를 여러 개 만들 때 class 끼리 공유할 수 있는 속성을 만들고 싶으면 protected, class 하나 안에서만 쓸 수 있는 속성을 만들고 싶으면 private를 쓰도록 하자!

static

  • class 안의 속성들은 class로부터 새로 생성되는 instance에 전부 부여된다.
  • 그 class에서만 직접 속성을 부여하고 싶다면 static을 사용하자
class Person{
	weight = 180;
	height = 100;
}

const hong = new Person()

hong.height = 80; // ok
Person.height = 80; // error

weight와 height 속성은 Person으로부터 생성된 자식들은 사용이 가능하지만 외부에서 그 자체를 바꾸는건 불가능하다. 하지만 static 키워드를 붙이게 되면 위 코드의 반대로 hong은 사용이 불가능하고 자신만 사용이 가능하다.

class Person{
	weight = 180;
	static height = 100;
}

const hong = new Person()

hong.height = 80; // error
Person.height = 80;// ok

함수도 static 붙이기 가능
extends 로 class를 복사할 경우 static 붙은 것들도 따라온다.
static은 private, protected, public 키워드와 동시 사용 가능하다.

static을 언제 사용할까?

class 안에서 기본 설정값을 입력하거나 class로부터 생성되는 자식들이 사용할 필요가 없는 변수나 함수들을 만들 때 사용한다.

class User {
	static skill = "javascript";
	intro = User.skill + "공부 중입니다.";
}

const hong = new User();
console.log(hong); // User {intro: 'javascript공부 중입니다.'}

User.skill = "typescript";

const jth = new User();
console.log(jth); // User {intro: 'typescript공부 중입니다.'}
profile
주니어 프론트엔드 개발자가 되고 싶습니다!

0개의 댓글