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

7. readonly

type Girlfriend = {
  readonly name: string
}

- readonly 키워드는 속성 왼쪽에 붙일 수 있으며 특정 속성을 변경불가능하게 잠궈줍니다. 

- const 변수는 값이 변하지 않는 변수를 만들고 싶을 때 const 쓰면 됩니다. const랑 비슷한 효과

var 자료 = {
  name: "kim"
} as const
// object value값을 그대로 타입으로 지정해줌
// object의 속성들에 모두 readonly를 붙여줌

- as를 통해 const를 단언하여 readonly 를 붙여주도록 설정 가능

 

8. type & 연산

type PositionX = { x: number, y: number };
type PositionY = { y: number, z: number };

type NewPosition = PositionX & PositionY;

let position: NewPosition = { x: 1, y: 1, z: 1 }

- 두개의 타입을 동시에 만족하는 새로운 타입 생성 가능

- 같은 이름의 변수에 number, string 을 함께 지정하여 동시에 만족이 불가능할 경우 never 타입의 값으로 반영

- type은 재정의가 불가능ㅎ지만 interface 키워드를 통해서 재정의가 &와 유사한 기능으로 동작

  (재정의를 안하는게 typescript 사용목적 처럼 더 안전하게 쓸 수 있을 듯)

 

9. Literal Type

- 자료형 뿐만 아니라 일반 글자와 같은 특정한 형태의 자료형을 지정할 수 있음

let 밸런스: "대머리" | "솔로";
밸런스 = "솔로"

- 다음과 같이 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입을 literal type이라고 부름

 

10. method type지정

type UserInfo = {
  name: string,
  age?: number,
  plusOne(a: number): number,
  changeName: () => void
}

- 다음과 같이 오브젝트 내에 존재하는 method에 함수형식과 화살표함수 형식의 타입지정 가능

let 회원정보: UserInfo = {
  name: "kim",
  age: 30,
  plusOne(a) {
    return a + 1;
  },
  changeName: () => {
    console.log("안녕");
  }
}

- 해당 값을 다음과 같이 지정하여 사용

 

11. 타입스크립트를 이용한 html 조작

11-0. null 체크 셋팅

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "strictNullChecks": true
    }
}

- strictNullChecks 옵션을 이용하여 더욱 엄격하게 검사하도록 지정

 

11-1. 예제 HTML 코드

<h4 id="title">안녕하세요</h4>
<a href="naver.com">링크</a>
<button id="button">버튼</button>

<script src="변환된 자바스크립트파일.js"></script>

11-2. type script 의 html 조작 방법

let 제목 = document.querySelector('#title');
제목.innerHTML = '반갑소'

- 다음과 같이 사용할 경우 "제목" 값은 null을 포함한 union type을 가르킴 [ Element | null ]

 

11-3. 해결방법

#1번

let 제목 = document.querySelector('#title');
if (제목 != null) {
  제목.innerHTML = '반갑소'
}

- null 제외 narrowing 

 

#2번

let 제목 = document.querySelector('#title');
if (제목 instanceof HTMLElement) {
  제목.innerHTML = '반갑소'
}

- instanceof 를 사용하는 narrowing

- 태그별 옵션

* a 태그는 HTMLAnchorElement

* img 태그는 HTMLImageElement

* h4 태그는 HTMLHeadingElement

- 정확한 타입으로  narrowing을 해줘야 html 속성 수정을 제대로 할 수 있음 

 

#3번

let 제목 = document.querySelector('#title') as HTMLElement;
제목.innerHTML = '반갑소'

- as 키워드를 이용한 단언 방식의 narrowing

 

#4번

let 제목 = document.querySelector('#title');
if (제목?.innerHTML != undefined) {
  제목.innerHTML = '반갑소'
}

- optional chaining 연산자를 이용한 narrowing ( optional chaining : ?. ) 

 

#5번

-strict 설정 false 로 지정

- null 체크를 유연하게 동작할 수 있으나, 정확하게 사용하는 것이 더 좋음