타입스크립트(TS, TypeScript) 공부 4

15. 요소 narrowing

type Fish = {swim:string};
type Bird = {fly:string};

function 함수9(animal : Fish | Bird){
  if("swim" in animal){
    // 요소 in 오브젝트
    return animal.swim
  }else{
    return animal.fly
  }
}

- 다음과 같이 요소를 생성하여, 해당 속성을 가지고 있는지 여부를 체크하여 narrowing

 

16. instanceof를 이용한 narrowing

let 날짜 = new Date();
if (날짜 instanceof Date){
  console.log('참이에요')
}

- instanceof 는 부모클래스가 누군지 검사하는 기능

- Date() 같은 날짜를 통해서도 date object를 식별하여 narrowing 할 수 있음

 

17. literal type을 이용한 narrowing

type Car = {
  wheel : "4개",
  color : string
}
type Bike = {
  wheel : "2개",
  color : string
}

function 함수(x:Car2|Bike){
  if(x.wheel === "4개"){

  }else{
    
  }
}

- 다음과 같이 공통 속성의 값을 비교하여 narrowing하는 방법

 

18. never type

function 함수(param:string){
  if(typeof param == "string"){
    console.log(param);
  }else{
    console.log(param);
    //타입이 never임
  }
}

- 실제로 사용할 일은 거의 없지만 never (결코 나올 수 없는 자료형의 경우 나옴)

- retrun을 하지 않으며, 함수 실행이 끝나지 않는 (endpoint가 없는) 경우에 붙을 수 있는 타입

- 코드를 이상하게 짜다보면 자동으로 등장 할 수 있기 때문에 인지 필요

- strict 옵션을 킨상태로 any타입을 지정해주지 않는 경우에도 발생 가능

 

#예제1

function 함수() :never{
  while ( true ) {
    console.log()
  }
}

- 다음과 같이 반복문을 무한 순회하는 함수 

 

#예제2

function 함수() :never{
  throw new Error('에러메세지')
}

- throw new Error()문법은 강제로 에럴ㄹ 내는 문법

- error가 발생하면 강제로 코드 실행이 중단되므로 never 조건에 부합

 

19. public, private, protected, static

- public : 외부 접근 허용

- private : 외부 접근 불가

- protected : 외부 접근 불가, 상속 받은 대상에서 접근 가능

- static : 부모에서만 쓰고 싶을 때 사용 ( public, private, protected 와 같이 사용 가능 )

class User {
  private static x = 10; // 외부에서 접근하지못하고 수정도 불가, User자체에서만 사용가능
  public static y = 20; // 외부에서 접근 가능하며, User자체에서만 사용
  protected z = 30; //외부에서 접근이 제한되나 확장된 개념이라 상속된 클래스에서도 사용가능
}

- 1. 필드값은 원래 모든 User의 자식들에게 물려주는 속성이지만 x, y는 static 키워드가 붙었기 때문에 User.x 이런 식 접근

- 2. private static x는 class 내부에서만 수정이 가능

- 3. public static y는 class 내 외부 상관 없이 수정 가능 public 지워도 동일

- 4. protectd z 는 private 키워드와 유사하게 calss 내부와 확장되어 extends로 복사된 class에서 사용할 수 있음

 

20. 타입스크립트 class 를 이용한 랜덤위치 사각형 찍기

class Square{
  public w1:number;
  public h1:number;
  public c1:string;
  constructor(width:number, height:number, color:string){
    this.w1 = width;
    this.h1 = height;
    this.c1 = color;
  }
  public draw():void{
    let id = document.getElementById("drawPlace");
    console.log(id);
    if(id instanceof HTMLDivElement){
      id.innerHTML+=`<div style="width:${this.w1}px; height:${this.h1}px; background:${this.c1};top:${Math.random()*10000%400}px; left:${Math.random()*10000%400}px;position:absolute;"></div>`
    }
  }
}

let 네모 = new Square(30, 30, 'red');
네모.draw()
네모.draw()
네모.draw()
네모.draw()
네모.draw()
네모.draw()
네모.draw()
네모.draw()

- constructor를 이용한 위치 및 색상 지정

- 그리기 함수를 이용하여 해당 id에 도형 생성

- HTML요소는 다음과 같이 narrowing

- innerHTML 요소를 통해 랜덤위치에 사격형 생성

 

21.  namespace 문법

- 자바스크립트 import, export 문법이 적을 때, 파일 첨부 방식 사용시 중복 네이밍을 피하기 위해 사용

(a.ts)

namespace MyNamespace {
  export interface PersonInterface { age : number };
  export type NameType = number | string;
}

(b.ts)

/// <reference path="./a.ts" />

let 이름 :MyNamespace.NameType = '민수';
let 나이 :MyNamespace.PersonInterface = { age : 10 };

type NameType = boolean; //사용 가능
interface PersonInterface {} //사용 가능

- 동일한 이름의 변수명을 사용할 때 namespace로 작성하여 별도의 변수로 인식

 

22. import, export

(a.ts)

export var 이름 = 'kim';
export var 나이 = 30;

(b.ts)

import {이름, 나이} from './a'
console.log(이름)

- 외부 ts파일에서 값을 받아서 해당 값을 사용

(a.ts)

export type Name = string | boolean;
export type Age = (a :number) => number;

(b.ts)

import {Name, Age} from './a'
let 이름 :Name = 'kim';
let 함수 :Age = (a) => { return a + 10 }

- 타입선언도 동일하게 사용 가능