typescript 노트

앵귤러를 하면서 조금씩 정리하려 한다.

타입 에일리어스

1. 타입 에일리어스를 이용한 단일 타입 선언.

- 타입 에일리어스를 이용하면 기존 타입에 새로운 이름을 지을 수 있다.

사용 방식 

type <바인딩 식별자> = 타입;

-> type myProfile=string;

2. 타입 에일리어스를 이용한 유니언 타입선언

- 타입 에일리어스는 단일 타입보다는 유니언 타입( let c = a | b )이나 리터럴 타입( let c:{ a:string, b:number }[]  )

과 같은 다소 복잡한 형태의 타입에 적용하면 좋다.

type myId=string;
type myA=string | undefined;
type User={
  id:myId;
  alias?:myA; //? 는 세이프 네이비게이션이라고도 하며 기능은 해당 속성이 불확실한경우, 즉 생략될 수도 있다는 것을 의미.
  city:string;
}
let u1:User={id:'h1', city:'seoul'}
let u2:User={id:'h2', alias:undefined, city:'seoul'}
let u3:User={id:'h3', alias:'happy', city:'seoul'}

3. 타입 에일리어스를 이용한 배열 타입선언 

- 아래와 같이 Array<number | boolean> 과 같이 유니언 타입으로 배열 타입을 선언하면 배열에 숫자나 불리언 값만 입력할 수 있고

숫자난 불리언 값으로 여겨질 수 있는 문자열 "1" 이나 문자열 "true" 가 입력되는 문제를 방지 할 수 있다.

type NumBoolArrayType=Array<number | boolean>;
let myArray: NumBoolArrayType = [1, true];
console.log(typeof myArray[0], typeof myArray[1]) //number, boolean

타입캐스팅

- 명시적으로 선언한 캐스팅 코드에 의한 타입 변경을 의미.

js 인터프리터에 의해 타입이 바뀌는 타입 변환과 구분된다.

null, undefined를 제외한 인수 값은 기본 래퍼 객체( String, Number, Boolean, Symbol )를 이용해 캐스팅 할 수 있다.

기본 래퍼 객체 외에도 +연산자를 이용할 수 있는데 이는 Number함수를 호출하는 방법과 같다.

ex) let num="1000"

      let myNum=+num // 1000

parseInt 를 이용해 숫자가 포함된 문자열을 숫자 타입으로 변경할 수 있다. 

다만 Number 함수와 다른 점이 있다면 parseInt는 파싱기능이 있어서 숫자 이외에 여러 문자가 섞여 있을 때 숫자만을 골라서

숫자 타입으로 변경 할 수 있다.

ex) parseInt( "100px" ) // 50 

      Number("50px" ) // NaN 

타입 어설션( type assertion )

type assertion 을 이용하면 타입스크립트 컴파일러가 type assertion 정보를 이용해 컴파일을 수행.

컴파일 과정까지만 유효하고 컴파일 후에는 사라진다.

선언 방식

- 꺽쇠 괄호 방식 즉, <> ( angle bracket ) 

- as 문법( as syntax )

ex)  

let num:number=<number>myNum; 

- 꺽쇠괄호 방식

let renum:number=myNum as number;

- as 문법 방식

주의: 리엑트에서 사용하는 JSX 문법과 유사해 충돌을 일으킬 수 있다.

         따라서 as 문법방식을 이용하는 편이 좋다.

배열 요소 타입을 객체 리터럴 타입으로 사용하기

let user:{ name:string, job:string }[ ];

위에서 

{ name:string, job:string } 요소타입은 객체 리터럴 타입

그리고 요소타입에 [ ]를 붙여 선언하여 배열 타입임을 명시

만약 요소타입에 맞추어 입력하기 쉽지 않을 때에는 type 에일리어스를 사용.

type literalType:{ name:string, job:string };

let user : literalType[];

매개변수의 다형성( 유니언 타입 이용 )

- 메서드의 매개변수 타입을 유니언 타입을 이용함으로써 객체가 다형성의 성질을 띠도록 만들 수 있다.

class A{
 // ......중략.......
  display( data:string | number ){
    if( typeof data ==="string" ){
      return "string "+data;
    }else{
      return "number "+data;
    }
  }
}
let test=new A();
test.display("hi display");
test.display(200);

위에서 display메서드는 string 또는 number 타입을 받아들이는 오버로딩 메서드이다.

display메서드는 여러 타입을 받아들이므로 typeof로 타입 검사를 수행하는 타입 가드를 추가해야 한다.

( 클래스 타입으로 받는 다면 instanceof 로 타입 가드를  추가 )

declare 키워드

TypeScript 파일에서 생성되지 않은 변수를 선언하는 데 사용.

enum

열거 형을 사용하면 명명 된 상수 세트를 정의 할 수 있음.

열거 형을 사용하면 의도를 문서화하거나 별개의 사례 집합을 만들수 있고

TypeScript는 숫자 및 문자열 기반 열거 형을 모두 제공.

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

enum Response {
  No = 0,
  Yes = 1,
}

function respond(recipient: string, message: Response): void {
  // ...
}

respond("Princess Caroline", Response.Yes)

상세내용은 아래 링크에서 확인 가능하다.

https://www.typescriptlang.org/docs/handbook/enums.html