본문 바로가기
반응형

타입스크립트에 대한 간단한 문법을 정리하려고 합니다.

타입과 문자열

선언자

  • var : javascript에서 전통적으로 사용해온 선언자로 모든 타입을 허용
  • let : typescript에서 특화시킨 선언자로 타입을 지정해야 함

배열타입

배열의 타입을 아래와 같이 설정하며 배열에 값을 입력할때는 push()를 사용함

  • let fruits: string[] = ["바나나","사과","오렌지"];
  • let num1:Array = [1,2,3];
  • let num2:Array = new Array();
    • num2.push(1);
    • num2.push(2);
    • num2.push(3);

유니언타입

유니언 타입은 2개이상의 타입을 정의하고 그중에 맞는 것이 자동 설정이 되게 함

  • var unionX: string | number = 1; --> 1는 숫자이므로 number타입으로 자동 설정
  • var unionX: boolean | string = true; --> true는 boolean이므로 boolean타입으로 자동 설정

유니언타입으로 함수 선언
예>

function typeCheck(p: string | number): string } number {
return p;
}

let type = typeCheck(1); // --> number 1
let type = typeCheck("1"); // --> string 1

문자열 표현

  • 줄바꿈 : 개행문자( \n )으로 표시

  • 여러줄 줄바꿈 : 백틱을 이용 ( ` )

    예제>

    let multiLine: string = 
    `
    one = 1
    twe = 2
    `
  • 백틱으로 ${표현식} 사용가능

    예제>

    let w: wtring = "world";
    let one: number = 1;
    function hi() {
    return "hi"
    }
    
    let hellow_msg: string = `
    hello ${w} // --> hello world
    1 + ${one}  // --> 1 + 1
    ${hi()} // --> hi
    `

디스트럭처링 지원

디스트럭처링은 배열이나 객체의 데이터를 각 변수에 할당 할 때 간단하게 처리하는 방법

예제>

var params = ["반갑습니다.", 100];
let [m_name, m_num] = params;
console.log (`
    ${m_name}
    ${m_num}
`);

메서드

배열 메서드

filter() 메서드

배열의 특정 조건에 부합하는 요소만 걸러서 보여줌

  • arr.filter(콜백함수);

예제>

var rtn = [-1, -2, 0, 3, 5, -2].filter( po ); // --> 3,  5

function po(value) {
     return value > 0;
}

forEach() 메서드

배열을 순회하며 전체에 특정명령어를 실행 시킴

  • arr.forEach(콜백함수);

예제>

[1, 2, 3, '사과'].forEach(arry);

function arry(ele, idx, array) {
    console.log ('[' + idx + '] = ' + ele );
}

화살표 함수

화살표 함수는 익명함수와 동일한 역활을 함

익명함수
function() {   ...   }
() => {  ...  }
변수에 할당하는 함수
var p1 = function(x) { return x * x; };
var p1 = (x) => { return x * x; };

Function이 한줄인 경우는 아래처럼도 표현이 가능함

var p1 = x  =>  x * x;

즉시 실행함수는 아래처럼 표현이 가능함

((x) => {
    console.log( x * x ) ;
})(3);

화살표함수에 필터 매서드 적용

var num_list [ 1, 2, 3, 4, 5 ];
num_list = num_list.filter( n => {
    return n % 2 == 0;
});
console.log(num-list);  // ---------> [ 2, 4 ]

객체지향 프로그래밍

클래서 선언과 사용

기본적인 클래스 선언 형태

class MyClass {
     constructor() { // constructor는 생성자로 클래스객체가 생성될때 기본적으로 호출되는 메서드입니다.
     }
}

클래스의 사용

클래스에 new키워드를 사용하여 객체를 생성하여 사용합니다.

var myClass = new MyClass();  // new키워드를 사용하여 객체를 생성하여 사용함

전역변수의 선언과 사용

constructor()public 접근자를 사용하여 전역변수를 선언합니다.

class MyClass {
     constructor( public aa, public bb) { // constructor에 public으로 선언한 변수는 클래스 내에서 전역변수로 사용할 수 있읍니다.
     }

     getMyClass(): string {// 함수를 이용하여 전역변수 aa를 리턴
         return this.aa;
     }
     get alphabet() { // 게터함수를 이용하여 전역변수 bb를 리턴
         return this.bb;
     }
}

클래스 상속

자식 Class에서 부모 Class를 상속함

class Parents{
     constructor() {    }

}

class MyClass extends Parents {
     constructor() {
         super( "인자1", "인자2");  // super메서드는 꼭 나와야 함
     }
}

protected

protected 가 지정되어 있는 메서드나 클래스는 클래스 외부에서 접근이 불가함.
단지 클래스 내부나 상속받은 자식 클래스에서만 접근이 가능함

  • protected getName(): string { }
  • protected constructor() { }

인터페이스

인터페이스에 선언된 변수나 메서드의 사용을 구현 클래스에 강제할 수 있음.

interface ifParents {
     // 메서드나 변수 정의
}

interface ifChild extends ifParents {
     // 메서드나 변수 정의
}

class MyClass implements ifChild  {
     // 인터페이스에 정의된 메서드나 변수를 추가한 후 구현
     // 클래스 고유의 메서드나 변수를 추가한 후 구현
}

클래스 상속

추상클래스는 구현과 강제를 동시에 수행하는 클래스로 abstract 키워드를 사용하여 선언함.
추상 메서드와 구현 메서드를 나누어서 정의 함

abstract class SmallAnimals {
     abstract 추상 메서드(): string;
     구현 메서드(): string {
         // 추상 메서드를 이용하여 구현 메서드의 로직을 추가
     }
}

class Mouse extends SmallAnimals {
     // 추상 클래스에 정의된 추상 메서드를 구현
     // 클래스 고유의 메서드나 변수를 추가
}

UX 공작소

UX와 UI에 관해 내가 알게된 다양한 이야기를 공유해요~