SimCoding

[TS] 타입스크립트 자주 사용되는 utility 정리 @ keyof : 키값을 타입으로 추출합니다. // keyof : 키값을 타입으로 추출합니다. interface User{ id : number; name : string; age : number; gender : "m" | "f"; } type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender' const uk:UserKey = "id"; const uk2:UserKey = "ss"; // 에러 : Type '"ss"' is not assignable to type 'keyof User' @ Partial : 타입을 모두 optional 하게 바꿔줍니다. // Partial : 타입을 option..

[TS] 타입스크립트 Generic 예시코드 타입스크립트에서 Generic은 유연한 Type 설정을 가능하게 해줍니다. 예시 코드와 함께, 어떻게 사용하는지 확인해 봅시다. @ Generic 사용예시 - 1 : 함수 // 아래와 같이 Generic타입을 선언할 수 있습니다. // 이때 T는 다른 알파벳으로 사용해도 되지만 일반적으로 T를 사용합니다. function getSize(arr: T[]) : number{ return arr.length; } // 값을 선언할때는 꺽쇠안에 타입을 지정해 줄 수 잇습니다. const arr1 = [1,2,3]; getSize(arr1); const arr2 = ["a", "b", "c"]; getSize(arr2); // 꺽쇠로 타입을 지정해주지 않으면, 자동으로..

[TS] 타입스크립트 추상클래스 코드 예시 타입스크립트에서 추상클래스를 선언할 수 있다. 추상클래스 사용법을 예시코드를 통해 확인해 보자. // 추상 class abstract class Car { color : string; constructor(color : string){ this.color = color; } start() { console.log("start"); } // 내부의 추상클래스는 형식만 선언해주고, 기능은 상속받아서 구현한다. abstract doSomething() : void; } class Bmw extends Car { constructor(color : string){ super(color); } doSomething(){ alert(3); } } // const myCar..

타입스크립트 접근제한자 : public, private, protected + 정적메소드 static 자바스크립트와 달리, 타입스크립트에서는 접근제한자를 제공합니다. 코드 예시를 통해 접근제한자 대해서 알아보도록 하겠습니다. /* 접근 제한자 - public, private, protected public - 자식 클래스, 클래스 인스턴스 모두 접근 가능 protected = 자식 클래에 접근 가능, 클래스 인스턴스 접근 불가능 private - 해당 클래스 내부에서만 접근 가능 */ // ※ static - this가 아닌, 클래스명으로 접근 ! class Car { public name : string; private color :string; protected wheel : number; stati..

[JS] 자바스크립트 ES6 Class , extends 예시코드 ES6에 도입된 Class에 대해 예시코드를 통해 알아보자. @ Class 예시코드 class User { //constructor : 값을 초기화 해준다. constructor(name, age) { this.name = name; this.age = age; } showName() { console.log(`이름 : ${this.name} 나이 : ${this.age}`); } } const tom = new User("Tom", 19); tom.showName(); // 이름 : Tom 나이 : 19 console.log(tom); /* showName이 Prototype에 할당된다. ▼User {name: 'Tom', age: 19..

타입스크립트의 함수 오버로딩 예시 코드 interface User { name :string; age : number; } // 함수 오버로딩을 통해 매개변수 age의 상태에 따른, return 상태를 정의해줘야 한다. // why ? Ts가 매개변수의 상태에 따른 return 값의 상태를 자동으로 결정하지는 못한다. function join(name : string, age :string) : string; function join(name : string, age : number) : User; function join(name : string, age : number | string) : User | string { if(typeof age === "number"){ return { name, ag..

자바스크립트 call , apply ,bind 예시 코드 javascript 함수호출시 사양되는 call, apply, bind를 코드예시를 통해 알아보겠습니다. @ call 사용예시 const mike = { name: "Mike", }; function showThisName() { console.log(this.name); } function update(birthYear, occupation) { this.birthYear = birthYear; this.occupation = occupation; } showThisName.call(mike); // this에 mike를 할당해준다. update.call(mike,1999,"singer") // 매개변수를 순서대로 받는다. console.log(..

타입스크립트 Interface 코드 사용 예시 interface 키워드를 사용해 값이 특정한 형태(shape)를 갖도록 제약할 수 있다. 인터페이스를 정의하는 기본적인 문법은 객체 타입의 그것과 유사하다. 예제코드를 보면서 Interface의 활용법을 확인해보자. @ 객체형Interface type Score ='A' | 'B' | 'C' | 'F'; interface User{ name : string; age : number; gender? : string; readonly birthYear: number; [grade : number] : Score; // 키값을 배열형태로 받을 수 있다. // grade는 다른값으로 대체될 수 있음. } let user : User = { name : 'xx', ..