Typescript from 코딩애플 : Part1-2

10.함수와 method에 type alias

함수에 type alias

기본 형태

function (a:string) :string {
  return a
}

type alias 적용

type FuncType = (a:string) => string
let 함수 : FuncType = Function (a) {
  return a
}

let 함수 : FuncType = (a) => {
  return a
}

메소드에 type alias

객체내에 메소드가 주어질 때

let 회원정보 = {
  name : 'kim',
  age : 30,
  plusOne(a) {
    return a+1
  },
  changeName : ()=>{}
}

객체내의 메소드에 type alias 적용

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

11.타입스크립트로 HTML 조작

index.html

h4태그 타이틀 변경

let title = document.querySelector('#title')
// 1안) Narrowing
if(title !== null) {
  title.innerHTML = '반가워요'
}

// 2안) Narrowing
if(title instanceof Element){
  title.innerHTML = '반가워요'
}

// 3안) Narrowing : 옵셔널 체이닝
if(title?.innerHTML){
  title.innerHTML = '반가워요'
}

a태그 변경

let link = document.querySelector('.link')
// 1안) Narrowing
if(링크 instanceof HTMLAnchorElement){
  링크.href = 'https://kakao.com'
}

버튼 태그 변경

let button = document.querySelector('#button')
// 1안) Narrowing
if(button instanceof HTMLButtonElement){
  button.addEventListener('click', function (){})
}

// 2안) Narrowing
button?.addEventListener('click', function (){})

12.class 만들 때 타입지정 가능

js 에서 class 생성

class Person {
  constructor (a){
    this.name = a;
  }

  함수(a){
    console.log('안녕'+a)
  }
}

ts 에서 class 생성

class Person {
  name :string
  constructor (a){
    this.name = a;
  }
  함수(a:string){
    console.log('안녕'+a)
  }
}

13. interface

interface 문법으로 타입 지정

//type 문법
type Square = {color : string, width : number}
//interface 문법
interface Square {color : string, width : number}

let 네모 = {color:'red', width : 100}

extends 기능

interface Student {
  name :string
}

interface Teacher extends Student {
  age :number
}

let 학생 :Student = {name : 'kim'}
let 선생 :Teacher = {name : 'kim', age : 20}

extends 기능 과 유사한 & 문법

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

types 과 interface 차이점

• interface 속성 : 중복 선언 가능

interface Student {
  name :string
}

interface Student {
  score :number
}

// 결국 Student는 name 과 score 타입을 둘다 가진다.

• type 속성 : 중복 선언 불가능

interface Student {
  name :string
}

interface Student {   // 에러 발생
  score :number
}