[TIL] 기억해두고 싶은 TS 문법들

1. 옵션 파라미터
   

   // 둘은 동일한 표현
   // | undefined 를 ? 로 대체할 수 있다.
   name : string | undefined
   name ? : string

2. 타입 extend
   

   // 타입 변수를 생성할땐 맨앞의 문자를 대문자로 하고,
   // 구분하기 쉽게 뒤에 type을 붙여주면 좋다.
   
   type OrangeType = string;
   type PriceType = number;
   type OrangePriceType = OrangeType | PriceType;​

   // & 연산자로 object를 extend 할 수도 있음.​
   // 하지만 같은 이름의 type 변수를 재정의 할 수는 없음.
   
   type ScrollX = {x : number] ;
   type ScrollY = {y : number] ;
   type ScrollType = ScrollX & ScrollY // { x :number, y:number}가 되는 셈

3. as const
   효과1. object value 값을 그대로 타입으로 지정해줌
   효과2. object 속성들에 모두 readonly를 붙여줌
   
   
4. 함수에 type alias 지정하는 법
   

   // 1. 함수타입은 () => {} 모양으로
   type functionType = (a : string) => number;
   
   // 2. 함수를 다르게 선언
   let exampleFuction = function () {
   }
   
   // 3. 함수타입을 함수에 지정
   let exampleFuction : functionType = function () {
   }​

5. object안에 함수 타입지정 하는 법
   

   // object안에 함수 생성 가능.
   
   type cafeType = {
   	coffee: string;
   	plusOne: (x: number) => number;
   	changeName: () => void;
   };
   
   let cafe = {
     coffee : 'latte',
     plusTopping(a){
     	return a + 1
     },
     
     changeMenu : () => {
       console.log('haha')
     }
   }​
   
   cafe.plusTopping(1);
   cafe.changeMenu();

6. HTML 조작시 narrowing 방법 5개
   

   // HTML
   
   <h4 id="title">안녕하세요</h4>
   
   ---------------------------------------------------------
   // TS
   
   let title = document.querySelector("#title");
   
   // 1. !=
   if (title != null) {
   	title.innerHTML = "환영합니다";
   }
   
   // 2. instanceof 연산자 (가장 많이 사용)
   if (title instanceof Element) {
   	title.innerHTML = "환영합니다";
   }
   
   // 3. as 키워드 (되도록이면 사용 X)
   let title = document.querySelector("#title") as Element;
   title.innerHTML = "환영합니다";
   
   // 4. object에 옵셔널체이닝 추가
   if (title?.innerHTML != undefined) {
   	title.innerHTML = "환영합니다";
   }
   
   // 5. tsconfig.json 에서 코드 수정
   // "strictNullChecks": true를 false로 바꾸거나 삭제​