TypeScript 기본 (Type, Interface)

- Type

• number
  ex) let age:number = 31;
  
  
• string
  ex) let name:string = "An";
  
  
• boolean
  ex) let isMan:boolean = true;
  
  
• Array<type> / type[] : type에는 적용할 type 입력
  ex) let score:number[] = [100, 90, 80];
  ex) let score:Array<number> = [100, 90, 80];
  
  
• [type, type] : Tuple로 사용, type에는 적용할 type 입력
  ex)
  let an:[string, number];
  an = ["an", 31];  // 해당 type 순서가 일치해야하며, 해당 type에 있는 메서드만 사용 가능
  
  
• void : 반환하지 않는 함수에 사용
  ex)
  function doWork():void{
      console.log("working");
  }
  
  
• never : Error를 받거나 무한루프에 사용
  ex)
  function showError():never{
      throw new Error();
  }
  
  
• enum : 자바스크립트에는 없지만 타입스크립트에서는 사용 가능하며, 선언도 가능
  ex)
  enum Color {
     Red,
     Blue,
     Black,
  } // 할당하지 않으면 처음(Red) 값은 0이며, 문자도 할당가능
  console.log(Color["Red"])  // 0 출력
  let myColor:Color;
  myColor = Color.Red;  // 특정 값만 입력할 수 있게 강제할 수 있음
  
  
• object : interface를 작성해야 함 (아래에서 다시 다룰 예정)
  ex)
  let user:object;
  user = {
        name : "an",
        age : 31
  }
  
  
• null
  ex) let n:null = null;
  
  
• undefined
  ex) let und:undefined = undefined;

 

- Interface

object 같은 경우에는 안에 type이 지정되지 않아서 Error가 발생한다.

그것을 막기 위해 interface를 통해 미리 type을 지정해준다.

 

- 기본 예시

ex)
type Grade = 'A' | 'B' | 'C';    // type을 통해 제한을 둘 수 있다.

interface User {
         name : string;
         age : number;

         gender? : string;  // 있어도 되고 없어도 될 때는 ?를 통해 optional로 사용 가능

         readonly birthYear : number; // readonly로 사용 가능, 생성할 때만 할당 가능

         [itemIndex:number] : boolean;   // 비슷한 형태의 property 생성 가능 (itemIndex는 의미 없음 그냥 변수 이름)
         [score:number] : Grade;
}

 

let user:User;
user = {
       name : "an",
       age : 31,

       birthYear : 1992, // 수정 불가
       1 : true,
       2 : false,  // [itemIndex:number] : boolean에 의해 이런 식으로 생성 가능
       100 : 'A'  // Grade에 있는 것 외에 것을 입력하면 오류 발생

}

 

- 함수 예시

ex.1)

interface Add {

  (num1:number, num2:number):number;

}

 

// x와 y라고 설정해놔도 num1, num2로 설정 됨

const add : Add = function(x, y){

   return x + y ;

}

 

add(10, 21);  // 31

 

ex.2)

interface IsAdult{

   (age:number):boolean; 

}

 

const an:IsAdult = (age) => {

   return age > 19;

}

 

an(31) // true

 

 

- 클래스 예시

interface Human{

  name: string;

  age: number;

  move() ; void;

}
interface Tool{

  toolName: string;

  count ; number;

}

 

// extends를 통해 확장 (여러 개 가능) 가능하며, class 생성 시 확장 interface의 property도 모두 설정해줘야 함

interface Man extends Humam, Tool{

  strong: number;

  stop(); void;

}

 

// implemetns를 통해 class에 interface 사용

class An implements Human { 

     name;

     constructor(getName:string){    // constructor를 통해 생성자 역할 가능

           this.name = getName;

     }

     age : 31;

     move(){

         console.log("move move");

     }

}

 

const man = new An("AnSolomon");

console.log(man.name); // "AnSolomon"

man.move(); // move move