[TypeScript] ts 기초 알기

React 기반으로 만들고 있는 사이드 프로젝트 장애인을 위한 구인구직 앱 서비스 에서 TypeScript 를 사용하기로 했다.
처음 접해보는 나는 Ts를 공부하기로 하였다.
그래서 공부 시작!

자바스크립트의 문제

프로젝트 규모가 커지면 자바스크립트의 특징인 다이나믹 타이핑이 적이 되어버린다.
자바스크립트의 자유,유연성은 쓰레기가 되어버릴수 있음

다이나믹 타이핑 : 변수를 선언하기 전에 변수 타입을 자동으로 결정 되는것

타입스크립트를 사용하면에러 메세지 퀄리티가 바뀐다
기존 자바스크립트는 에러메세지가 추상적이지만 타입은 엄격하게 체크를 하고 그에따른 오류를 정확하게 볼수있다, 오타교정도 가능하니 개이득

설치법

npm install -g typescript

React 에서 Typescript 사용할 경우

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

그냥새로 파려면
npx create-react-app my-app --template typescript

Vue 에서

vue add typescript

<script lang="ts">
</script>```

ts파일을 js 파일로 자동 컴파일

tsc -w

컴파일 할때 옵션들을 기입하게 되면 자바스크립트 변환에 필요한 옵션들을 설정이 가능하다

tsconfig.json

아주 다양한 type 설정을 할 수 있다

{
  "compilerOptions" :{
    "target" : "es5",
    "module " : "commonjs"
  }
}

변수 만들어보기

array 자료형: 무조건 string 타입 이 들어가 있어야 한다는 조건

let name2: string[] = ["MiMi", "park",];

object 자료형: name 뒤에 물음표를 붙이게 되면 들어가도 되고 안들어가도 되고 된다. (옵션)

let name3: { name?: string } = {
  name: "gabi",
}; 

문자도 되고 숫자도 들어올 수 있는 타입을 지정할 때

 let naem4: string | number = "kim"; 

string 으로 이루어진 array 도 가능

let name5: string[] | number = 123; 

타입변수

타입 지정하는 문법이 길고 여러번 들어가게 되면 변수에 담아서 쓸 수 있다
type 로 시작
보통 타입을 작명할 때 대문자로 시작하긴 함~!

type NameType = string | number;
let name6: NameType = 123;

함수를 만들 때

무조건 number 리턴 해줘야 함!! return 타입이 어떤 타입인지도 미리 체크 가능

function TestName(x: number): number {
  return x * 2;
}

array 자료 만들때 이 자리에는 지정 타입을 들어가게 하고 싶을경우

type Member = [number, boolean];
let john: Member = [123, true];
type Member2 = {
  name: string;
};
let john2: Member2 = { name: "kim" };

온갖 속성들을 다 지정하고 싶을경우

type Member3 = {
  [key: string]: string; //모든 오브젝트 속성을 지정하는것도 가능
};
let john3: Member3 = { name: "kim", age: "123" };

class 문법일 경우

class User {
  name: string; // 변수값을 만들어서 미리 타입지정을 해야함
  constructor(name: string) {
    this.name = name;
  }
}

type alias

함수타입 지정 - 길고 복잡하면 type alias 써서 지정 할 수 있음

type FunctionType2 = (a: string) => number; //string 타입으로 지정 할 수 있고 리턴값은 무조건 number 타입인것

let TypeFunction: FunctionType2 = function (a) {
  return 10;
};

/*  
똑같은 의미
()=>{return 10} 
()=> 10
*/

object 안에 함수타입 지정

let humanInfo = {
  name: "kim",
  plusOne : ( x :number ) => number,
  changeName : () => void
};
humanInfo.plusOne( 10 );
  

콜백함수 활용해보기

함수 타입을 지정하여 함수 만들어보기
fun1을 실행후에 fun2를 실행하고 싶다

type Type1 = (a :string) => string;
type Type2 = (a :string) => number;

function MakeType(a :string, func1 :Type1, func2 :Type2){
  let result = func1(a); //func1을 실행 한 후 
  let result2 = func2(result);//func2 를 실행 
  console.log(result2)
}
MakeType( '글자글자1001', 만든함수1, 만든함수2 ) 

타입스크립트로 html 변경할 때 주의점

id가 title인 애를 조작하고싶은데..

html 공통

  <h4 id="title">안녕</h4>
  <a href="naver.com" class="link">링크</a>
  <img id="image" src="test.png">

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

  <button id="button">버튼</button>
  <script src="index.js"></script>

let title = document.querySelector("#title");
 title.innerHTML = "반갑";

띠요옹 오류가 나온다
할당 식의 왼쪽은 선택적 속성 액세스일 수 없습니다.ts(2779)

만약 아이디를 만약 잘못 기입했을 때? null 이 들어가기 때문인데(Element|null)

타입스크립트가 애매한걸 싫어함.. 타입을 narrowing 해야함

기존 자바스크립트에는 이렇게 null 체크를 했다
타입스크립트는 어떻게 할까?

let title = document.querySelector("#title");
if (title !== null) title.innerHTML = "반갑";

nerrowing

찾은 요소가 어떤 상태인지 확인하는 방식을 nerrowing 이라고 한다.
여러가지이다

instanceof 연산자 (가장많이씀)

let title = document.querySelector("#title");
if (title instanceof Element) title.innerHTML = "반갑";

as 키워드 이용해서 사기 쳐보기

왼쪽에 있는 요소가 element 타입이라고 사기치기.
잘못찾아도 무조건 Element이 되는 식

let title = document.querySelector("#title") as Element;
title.innerHTML = "반갑";

오브젝트에 ?.

신문법 옵션체이닝 이다
왼쪽 title 이 있으면 출력 없으면 undefind 를 남김

let title = document.querySelector("#title");
if (title?.innerHTML != undefined) {
  title.innerHTML = "반갑";
}

무식해결

tsconfig.js 의 "strictNullChecks" 를 false 로

결론은 타입스크립트를 쓰게 되면 narrowing 과정이 필요하다(번거로움)
그런데 생 자바스크립트를 쓸 때에도 이런식으로 안전하게 코드를 짜면 좋은것이다!!

instanceof HTML

문제

'link' 이름을 찾을 수 없습니다.ts(2304)
(findLink instanceof Element) 를 입력하면 에러가 난다 가장 좋은 방식이라고 했는데??
union 타입 => null 값 일수도 있기 때문에

해결

typescript 가 제공해주는 기본 HTML 타입들이 있다

Element
HTMLAnchorElement
HTMLHeadElement
HTMLButtonElement
등등... 겁나많음 (자동완성 됨 눈치껏)
정의가 별로 안 되어있긴하다. 광범위하게 Element 표현하기 위한 타입 이라고 생각하면 될듯

let findLink = document.querySelector(".link");

if (findLink instanceof HTMLAnchorElement) {
  findLink.href = "kakao.com";
}

장점

HTMLAnchorElement 이 타입의 경우
href,style,class 이런 상세한 설정 들을 사용할 수 있다 (object 타입 정리가 잘 되어있다)

eventListener 부착해보기

별 오류가 없으면 ? 써도 되긴 함

let button = document.querySelector("#button");
button?.addEventListener("click", function () {});

버튼 클릭 시 이미지를 바꿔보자

let img = document.querySelector("#image");
let button = document.querySelector("#button");

button?.addEventListener("click", function () {
  if (img instanceof HTMLImageElement) {
    img.src = "123.png";
  }
});

여러개 선택시

let test1 = document.querySelectorAll(".test");

test1.forEach((element) => {
  if (element instanceof HTMLAnchorElement) {
    element.href = "test";
  }
});