class type 지정

! constructor함수는 return type이 항상 object이기 때문에 return type을 지정하면 안된다.

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

Person.prototype.greet = function(a : sring) : void{
	console.log("hello" + a);
}

let Minseo = new Person("Minseo");

console.log(Minseo.name); // result : Minseo
// Person의 자식들은 모두 greet이라는 함수를 사용할 수 있다.

 

728x90

class

class는 객체를 만들어내기위한 틀이다. class는 class 표현식과 class 선언식으로 만들어 낼 수 있다.

또한, 이전 문법으로는 function 과 this를 이용하여도 class를 만들었다.

 

this는 instance로, 새로 생성되는 object들을 가리킨다.

// function & this 를 이용한 class 선언

function Template(name : string, age : number, address : string ){
	this.name : name;
    this.age : age;
    this.address : address;
}

var Yeonji = new Teplate("Yeonji", 22, "Suwon");
class Template{
	constructor(name : string, age : number){
    	this.name = name;
        this.age = age;
    }
}

 

prototype

javascript는 prototype 기반의 언어이다. 상속관점에서 js의 유일한 생성자는 객체뿐이며, 이러한 객체는 prototype이라는 private 속성을 가진다. prototype은 chain의 형태로 존재하여 prototype이 null이 될때까지 prototype을 뒤지는 것을 반복한다. 만약 어떤 ob라는 object에 a라는 속성이 없는데 ob.a를 부른다면, js는 ob의 속성에 a가 있는지 찾고, 없다면 ob.[[Prototype]]의 속성에 a가 있는지 찾고 그래도 없다면 다시 ob.[[Prototype]].[[Prototype]]에서 a를 찾는다 만약 ob.[[Prototype]].[[Prototype]]이 null이라면 찾는 것을 그만두고 ob.a 는 undefined가 반환되는 것이다. 

 

var array = [5,43,6,2,1];
array.sort();
console.log(array);
// 결과 : 1,2,5,6,43

위와 같이 array에서 sort()라는 함수를 사용할 수 있는 이유는 prototype 때문이다. var array = [5,43,6,2,1]; new를 사용하여 선언하면 var array = new Array(5,43,6,2,1); 이 되는데, class의 자식을 선언한는 것과 같다. array변수의 Prototype은 Array로, Array의 Prototype이 가지고 있는 함수를 array 변수는 모두 사용할 수 있다. 그렇기 때문에 array의 Prototype인 Array의 Prototype에 존재하는 sort()라는 함수를 사용할 수 있는 것이다. 

 

내가 만든 함수를 여러 다른 함수가 속성으로 사용하게 하고 싶을 때도 prototype을 응용하면된다.

function ggFunction(){
	console.log("hello");
}

var gg = [1,2,3];
Array.prototype.Func = ggFunction;

gg.Func();

 

 

출처 :

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/class

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85_%EC%B2%B4%EC%9D%B8%EC%9D%84_%EC%9D%B4%EC%9A%A9%ED%95%9C_%EC%83%81%EC%86%8D

728x90

Literal Types

let 이름 : "Lee";
이름 = "kim"; //error, 이름에는 "Lee"이외의 값 들어올 수 없다.

function 함수( a : "hi" ){
	console.log(a);
}

함수("hello"); // error 함수의 parameter로 "hi"만 가능
return type도 똑같이 Literal type으로 지정해 줄 수 있다.

 

as const

아래와 같은 경우 Name.name의 type이나, show function의 parameter type 이 둘 다 "kim"이지만, Name.name 의 type을 찍어보면 string이 나온다. 이 경우 Name의 type을 직접 object라고 지정을 해주거나, Name의 뒤에 as const를 붙여주어 object value 값을 그대로 type으로 지정해주게 한다.

 

as const 장점

1. object value값을 그대로 타입으로 지정해준다.

2. object 속성들에 모두 readonly를 붙여준다.

var Name = {
	name : "kim"
};

function show( x : "kim" ){

}

show(Name.name); // error 발생
var Name = {
	name : "kim"
}as const;

or

var Name : object = {
	name : "kim"
};

function show( x : "kim" ){

}

show(Name.name); // 정상 동작

 

728x90

const

const는 = ( 등호 ) 로 재할당만 막는 역할로 const가 object 유형일 경우 const로 담은 object 수정은 자유롭게 가능하다.

const user = { name : "kite" };
user.name = "joy"; // 가능하다.

user = { name : "joy" }; // 불가능하다.

 

// 충격.. 몰랐다. 

 

but typescript file안에서는 object 수정을 막을 수 있다. 

실제 js file에서는 error가 발생하지 않음.

// typescript

type Person = {
	readonly name : string // readonly : 읽기전용이라는 뜻
}

const Minseo : Person = {
	name : "Minseo"
}

Minseo.name = "민서"; // error

 

728x90

+ Recent posts