개발야옹

Generic

파라미터로 타입을 입력할 수 있는 함수를 생성할 수 있다.

function 함수<Type>( x: Type[] ) : Type{
	return x[0];
}

let a = 함수<number>([4,2]);
let b = 함수<string>(['4','2']);
console.log(a); // 4 ( number )
console.log(b); // '4' ( string )

Generic Type 제한

아래와 같이 함수의 타입이 extends된 속성을 가지고 있는지를 확인

커스텀 타입으로도 타입파라미터 제한이 가능하다.

function 함수<Type extends number>( x: Type[] ) : Type{
	return x[0];
}

let a = 함수<number>([4,2]);

console.log(a); // 4 ( number )

interface LengthCheck {
	length : number
}

function 함수<Type extends LengthCheck>( x: Type[] ) : Type{
	return x.length;
}

let a = 함수<string[]>(['100']);

console.log(a); // 1

Typescript를 사용할 때는 .ts

React Component의 경우 .tsx 

public 

public은 default값이다. 생략이 가능하다.

class User{
	public name : string = "kim";
    // public => 모든 자식들이 name을 이용가능하다.
    // public keyword는 생략 가능 default 값이다.
    // public <-> private
	constructor(a : string){
    	this.name = a; 
    }
    
    public 함수(){
    	console.log(this.name);
    };
}

let user1 = new User("park");
user1.name = "Lee";

public은 축약을 제공하기도 한다. 

class User{
	constructor( public name : string, public age : number){
    }
}

let user1 = new User("Yeonji", 22);
console.log(user1); // { name : "Yeonji", age : 22 }

private

class 내부에서만 사용이 가능하며, class 외부에서는 직접적으로 접근이 불가능하다. 또한, extends로 해당 class를 상속받은 자식 class도 사용이 불가능하다.

class User{
	private name : string = "kim";
    // private => class 내부에서만 사용가능하게 된다. 자식들이 직접 사용 불가능.
	constructor(a : string){
    	this.name = a; 
    }
    
    public ChangeName(a : string) : void{
    	this.name = a;
    };
}

let user1 = new User("park");
user1.name = "Lee"; // error 발생
user1.ChangeName("Lee"); // success

protected

protected는 private keyword와 같이 class{} 내부에서만 사용이 가능하다. 그러나 private과 반대로 extends로 상속받은 class 내부에서도 사용이 가능하다.

class Parent{
	protected x = 10;
    private y = 30;
}

class Baby extends Parent{
	doIt(){
    	this.x = 30; // success
        this.y = 20; // error
    }
}

static

static ketyword를 붙은 것은 자식에게 물려주지않음. 부모 class만 사용이 가능하다.

static은 private, public, protected와 동시에 사용이 가능하다.

class Person{
	static x = 10;
    y = 100;
}

let person1 = new Person();
console.log(person1); // x 는 보이지 않음

rest parameter ( spread operator ... )

function myFunction(...a){

}

myFunction(1,2,3,55,12);
myFunction(5,2,3);

// (...a)가 rest parameter이며, rest parameter는 다른 parameter 귀에 작성해야한다.
// rest parameter는 전부 array로 받아오게된다.

rest parameter type 지정

function 함수( ...a : number[] ){
	console.log(a);
}

함수(1,2,3,5,2,5,6);

spread operator ( ... )

괄호를 벗겨준다.

let array1 = [1,2];
let array2 = [3,4,5];
let array3 = [ ...array1, ...array2 ];
// array3 === [1,2,3,4,5]

destructuring

let [ x, y ] = ["hello", 404]; // destructuring

console.log(x); // "hello"
console.log(y); // 404

let { name, age } = { name : "Yeonji", age : 22 } // destructuring

function 함수( { name, age, address } : { name : string, age : number, address : string } ) //destructuring
	console.log( name, age, address );
}

함수({ name : "Minseo", age : 21, address : "Seoul" });