[TypeScript] Narrowing 할 수 있는 방법
·
TypeScript/기초
0. 들어가면서 Narrowing을 할 때 typeof 연산자를 많이 사용한다. 하지만 Narrowing을 해야 하는데, typeof 연산자 외에 다른 방법을 사용할 필요가 있을 경우도 있다. 1. in 연산자로 object 자료 Narrowing 파라미터로 Object가 2개 들어올 수 있다고 타입을 지정했을 때 사용할 수 있다. 예를 들어, 하나의 Object는 { a : 'Kim' }, 다른 하나의 Object는 { b : "Seo" } 이렇게 서로 다른 유니크한 속성을 가진다면 " if (이 파라미터가 a라는 속성을 안에 가지고 있냐) " 같은 Narrowing이 가능하다. if( 키값 in object 자료형 ) 방식으로 쓰면 된다. type Fish = { swim : string }; typ..
[TypeScript] HTML 조작 및 주의점
·
TypeScript/기초
strictNullCheck { "compilerOptions": { "target": "ES5", "module": "commonjs", "strictNullChecks": true } } 변수 조작을 하기 전에 null인지 확인하는 작업은 중요하다. 특히 html 조작을 할 때 셀렉터로 찾으면 null인 경우가 꽤 발생하니 많은 도움이 된다. 그러므로 tsconfig.json에 strictNullChecks 옵션을 켠다면 null이 들어왔는지 아닌지 확인할 수 있다. HTML 찾고 변경하기 let title = document.querySelector("#title"); title.innerHtml = "Hello"; // 에러 querySelector로 조회하고 innerHtml로 변경하는 방식은 ..
[TypeScript] 타입 확정하기
·
TypeScript/기초
함수에 Union을 사용하면... function 더하기(x: number | string) { // return x + 1; 에러 발생 } x는 숫자 또는 문자이기 때문에 +1을 해도 분명 코드상 문제가 없지만 에러를 발생시킨다. TypeScript는 number 타입 또는 string 타입만 + 연산이 가능한데, 현재 x는 number | string 타입이기 때문에 + 연산이 불가능하여서 에러가 발생한다. 즉, 아직 파라미터의 타입이 확실하지 않기 때문에 파라미터 조작 시 에러가 발생하는 것이다. function 함수(x? :number) :number { // return x + 1 에러 발생 } 또 이런 코드도 타입스크립트에서는 에러가 발생한다. x의 타입이 number 혹은 undefined ..