타입스크립트 머리박기 2일차 복기

TypeScript

타입스크립트 머리박기 2일차 복기

잼굴 2023. 1. 16. 22:32

1. HTML 변경, 조작하기

기본 틀

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h4 id="title">안녕하쇼</h4>
    <a href="naver.com">링크</a>
    <button id="button">버른</button>
  </body>
  <script src="./index.js"></script>
</html>

1) <h4>제목을 변경해보자.

기존 자바스크립트에서는

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

이렇게하면 변경 됐지만, 타입스크립트는 에러가 난다.

"제목"이라는 변수가 null일수 있다

--> 셀렉터로 html을 찾으면 타입이 Element | null 이라서 그럼 // html 못찾으면 null처리 됨

타입스크립트로 하는방법

총 5개 있다.

① narrowing

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

② instanceof (★)

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

③ assertion (비추)

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

④ optional chaining

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

JS신문법 , 왼쪽에 있는 object 자료안에 .innerHTML 있으면 그거 써주고, 없으면 undefined 해줘

⑤ 그냥 strict 설정 끄기 ;

예제) a태그의 href 속성 바꾸기

풀이방법

1. 셀렉터로 찾기

2. href 바꾸기

let 링크 = document.querySelector('#link');
if (링크 instanceof HTMLAnchorElement) {
  링크.href = 'https://daum.net' 
}

html 태그 종류별로 정확한 타입명칭이 있다. 외울필요는 X ㅋ

a 태그는 HTMLAnchorElement

img 태그는 HTMLImageElement

h4 태그는 HTMLHeadingElement

예제 2) 이미지 바꾸기

<img id="image" src="test.jpg">

let 이미지 = document.querySelector('#image');
if (이미지 instanceof HTMLImageElement){
  이미지.src = 'change.jpg';
}

예제 3) 한번에 여러개 바꾸기

<a class="naver" href="naver.com">링크</a>
<a class="naver" href="naver.com">링크</a>
<a class="naver" href="naver.com">링크</a>

for반복문 ㄱㄱ

let 링크 = document.querySelectorAll('.naver');

for (let i = 0; i < 3; i++){
  let a = 링크[i];
  if (a instanceof HTMLAnchorElement){
    a.href = 'https://kakao.com'
  }
}

2. Class 만들기

기본형

class Person {
	data :number= 0;
}
    
let park = new Person();
let kim = new Person();

원래는 그냥 자동으로 숫자인식해서 number타입 붙여주는데, 이렇게 써주면 됨

constructor 타입지정

기존 자바스크립트

class Person {
  constructor (){
    this.name = 'kim';
    this.age = 20;
  }
}

Error : Property 'name' does not exist on type 'Person' 에러 뜸

타입스크립트 기본형: 파라미터에 타입지정 해줘야함

class Person {
  name;
  age;
  constructor (a:string){
    this.name = a;
    this.age = 20;
  }
}

class 예제

1. { job: "전사", level : 50 } 이런 object를 복사하는 class를 만드시오

2. 그리고 복사된 object 자료들은 .str() 이라는 함수를 사용해 level의 *5배를 출력해야함

3. job과 level, str() 함수의 return타입을 지정하시오.

let game = new Game("전사", 50)

class Game {
job :string;
level :number;
constructor(a :string, b :number){
this.job = a;
this.level = b;
}

str() :number{
return this.price * 5
}}

3. interface 문법

기본형

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

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

1. 대문자로 작명

2. { } 안에 타입 명시하기

interface 장점

1. extends 가능

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

이러면 Teacher는 name :string, age :number 가짐

2. 중복선언 가능

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

이러면 2개다 적용됨

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

type은 안됨 ;

extend 할 때 object 안의 속성이 중복 된다면?

interface Animal { 
  name :string 
} 
interface Dog extends Animal { 
  name :number 
}

-> 에러

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

let 변수 :Dog & Animal = { name : '멍멍' }

-> & 연산자로 합쳐도 name속성이 중복됨 , 에러

type도 마찬가지

interface 예제

let 상품 = { brand : 'Samsung', serialNumber : 1360, model : ['TV', 'phone'] }

interface prodcut {
brand :string,
serialNumber :number,
model :string[]
}

let 상품 :product = { brand : "Samsung", serialNumber : 1360, model : ["TV", "phone"]}

let 장바구니 = [ { product : '청소기', price : 7000 }, { product : '삼다수', price : 800 } ]

interface Cart {
product :string,
price :number
}

let 장바구니 :Cart[] = [{product : "청소기", price : 7000}, {product : "삼다수", price : 800}];

2-2) extends 해보기

interface Cart {
product : string,
price : number
}

interface NewCart extends Cart {
card : boolean
}

2-3) object 안에 함수 2개 만들기

interface MathObj {
  plus : (a:number, b:number) => number,
  minus : (a:number, b:number) => number
}

let 오브젝트 :MathObj = {
  plus(a,b){
    return a + b
  },
  minus(a,b){
    return a - b
  }
}

'TypeScript' 카테고리의 다른 글

Todo List에 타입스크립트 적용해보기 (0)	2023.04.06
타입스크립트 머리박기 1일차 복기 (0)	2023.01.13

현재글타입스크립트 머리박기 2일차 복기

잼굴 코딩공장