アップルをコードしたTypescript:Part 1-2から

10.関数と方法のtype alias

関数のtype alias

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

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

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

メソッドのタイプ別名

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

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

11.タイプスクリプトを使用してHTMLを操作する

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 = '반가워요'
}

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の作成時に他の場所を指定できます

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

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

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

13. interface

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

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

interface Student {
  name :string
}

interface Teacher extends Student {
  age :number
}

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

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

interface Student {
  name :string
}

interface Student {
  score :number
}

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

interface Student {
  name :string
}

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