타입스크립트를 배워보자

강의는 코딩애플의 타입스크립트를 수강하였다.

간단한 변수 옆에 타입을 적는건 아주 간단하다

그 이후꺼를 배워보자

지켜야할 Narrowing 문법

function coding(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

Type Assertion

function coding(x :number | string){ 
    return (x as number) + 1 
}

타입 정의가 너무 길면 Type Aliases (별칭)

type Animal = string | number | undefined;
type 사람 = {
  name : string,
  age : number,
}

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

type Girlfriend = {
  readonly name : string,
}

속성 몇개가 선택사항이라면

type Square = {
  color? : string,
  width : number,
}

object에 지정한 타입의 경우 합치기도 가능합니다.

type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY

Type alias & { name : string } 이런 것도 가능합니다.

literal types

특정 글자나 숫자만 가질 수 있게 제한을 두는 타입을 literal type 이라고 부릅니다.

function 함수(a : 'hello') : 1 | 0 | -1 {
  return 1 
}

var 자료 = {
  name : 'kim'
} as const;
function 내함수(a : 'kim') {
}

as const는 효과가 2개인데
1. 타입을 object의 value로 바꿔줍니다. (타입을 'kim'으로 바꿔줍니다)
2. object안에 있는 모든 속성을 readonly로 바꿔줍니다 (변경하면 에러나게)

함수 타입 type alias

type NumOut = (x : number, y : number ) => number ;

type NumOut = (x : number, y : number ) => number 
let ABC :NumOut = function(x,y){
  return x + y
}

method에 타입지정

type Member = {
  name : string,
  age : number,
  plusOne : ( x :number ) => number,
  changeName : () => void
}

HTML 찾고 변경해보기

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

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

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

다른방법

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

instanceof 라는 연산자를 쓰는 것인데 우측에 HTMLElement 입력하면 그 타입인지 체크해줍니다.

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

html 태그 종류별로 정확한 타입명칭이 있습니다.

a 태그는 HTMLAnchorElement

img 태그는 HTMLImageElement

h4 태그는 HTMLHeadingElement

Object에 쓸 수 있는 interface 문법
interface 문법을 쓰시면 object 자료형의 타입을 보다 편리하게 지정가능합니다.

interface Square { 
  color :string, 
  width :number, 
} 

extends 문법은 interface 여기에 복사해달라는 뜻입니다.

interface Student {
  name :string,
}
interface Teacher extends Student {
  age :number
}

type 키워드와의 차이점
type alias와 interface는 거의 똑같은 기능을 제공합니다.
차이점은 extends 문법이 약간 다르다 이런건데

type Animal = { 
 name :string 
} 
type Cat = Animal & { legs: number }

type alias의 경우 extends는 안되고 & 기호를 쓰면 object 두개를 합칠 수 있습니다.
& 기호 쓰는걸 intersection이라고 부르는데 extends 와 유사하게 사용가능합니다.

(주의) extends 쓸 때 타입끼리 중복속성이 발견될 경우 에러로 혼내주는데 & 쓰면 때에 따라 아닐 수도 있습니다.

interface Animal { 
  name :string 
} 
interface Animal { 
  legs :number 
}

interface의 경우 타입이름 중복선언을 허용해주며 중복시 extends 한 것이랑 동일하게 동작합니다.

이러면 Animal 타입은 name, legs 속성을 가질 수 있습니다.

(장점) type 선언을 자주 쓰는 외부 라이브러리 이용시 type 선언을 내가 덮어쓰기, override 하기 편리합니다. type의 경우 중복선언을 허용하지 않습니다. 에러남