TIL_타입스크립트 연습1

1. array return

'가위', '바위', '보' 문자들만 파라미터로 입력할 수 있고
'가위', '바위', '보' 라는 문자들만 담을 수 있는 array 자료만 return 할 수 있습니다. (['가위','바보']이런거 하면 에러 나야함.)

function quiz(a: "가위" | "바위" | "보"): ("가위" | "바위" | "보")[] {
  return ["가위","바위"];
}

return값에 유니온타입 배열 담을 때 괄호 유의❗️

2. 변수 및 함수 타입지정

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

• plusOne이라는 속성은 함수여야하고, 숫자를 넣어서 숫자를 뱉는 함수여야함.
• changeName이라는 속성은 함수여야하고, 아무것도 return하면 안됨.
• type 키워드를 쓰든 말든 알아서 하기.

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

아무것도 리턴하면 안될 때 : void 사용❗️
함수 타입지정할 때 : 🌈 함수 :(x: 타입) => 타입 🌈 (화살표로 사용하여 리턴타입 넣기)

3. 함수 표현식으로 타입 지정

• cutZero()라는 함수를 만듭시다. 이 함수는 문자를 하나 입력하면 맨 앞에 '0' 문자가 있으면 제거하고 문자 type으로 return 해주기.
• removeDash()라는 함수를 만듭시다. 이 함수는 문자를 하나 입력하면 대시기호 '-' 가 있으면 전부 제거해주고 그걸 숫자 type으로 return 해주기.

type CutType = (x :string) => string

let cutZero :CutType = function (x){
    let result = x.replace(/^0+/, "");
    return result
}
function removeDash(x :string) :number{
    let result = x.replace(/-/g, "");
    return parseFloat(result)
}

4. typescript로 HTML 조작

//typescript로 HTML 조작 가능 ->narrowing (id값을 잘못 입력해서 null일 수 있기 때문에)
let 제목 = document.querySelector("#title");
if (제목 != null) {
  제목.innerHTML = "반가워요";
}

//instanceof 연산자 사용 
//제목2가 오른쪽 Element의 자식이냐
let 제목2 = document.querySelector("#title");
if (제목2 instanceof Element) {
  제목2.innerHTML = "반가워요";
}
//거의 사용하면 안됨
let 제목3 = document.querySelector("#title") as Element;
제목3.innerHTML = "반가워요";

//innerHtML 이 있으면 출력해주고 없으면 언디파인드 뱉어라
let 제목4 = document.querySelector("#title");
if (제목4?.innerHTML != undefined) {
  제목4.innerHTML = "반가워요";
}
//HTMLAnchorElement -> 태그마다 Element 정해져 있음.
let 링크 = document.querySelector(".link");
if (링크 instanceof HTMLAnchorElement) {
  링크.href = "https://kakao.com";
}

//버튼에 addEventListener가능하면 해주고 아니면 undefined로 남겨주라
let 버튼 = document.querySelector("#button");
버튼?.addEventListener("click", function () {});

💾 오늘의 정리 💾

literal types: 아래와 같이 하면 person 했을 때 kim 만 들어올 수 있음.

let person: "kim";
아래와 같이 제한 가능

아래와 같이 제한 가능 (0과 1만 들어오게)

function 함수(a: "hello"): 0 | 1 {
  return 0;
}

• as const

var 자료 = {
  name: "kim",
} 

function 내함수(a: "kim") {}
내함수(자료.name); 

이렇게 하면 같은 kim인거 같지만 못들어감
왜냐면 kim인 타입인것이기 때문
이 것을 해결하기 위해 as const를 사용하면 됨.

var 자료 = {
  name: "kim",
} as const;

function 내함수(a: "kim") {}
내함수(자료.name);

• typescript로 HTML조작하기
  ➡️ 태그마다 Element 정해져 있음.