typescript narrowing
-
Typescript - NarrowingFront-end/Typesrcipt 2023. 4. 18. 01:46
Typescript Narrowing Typescript Narrowing 이란 타입 에러를 피하기 위해 조건에 따라 변수를 더 정확한 타입으로 좁히는 방법이다. Typescript Narrowing 방법중 && 연산자를 사용하여 null 또는 undefined type 을 체크해 줄 수 있다. function narrowFn(a: string | undefined) { // string 타입이 아닌 undefined 타입이 올 경우 if ( a && typeof a === 'string' ) { // if문으로 narrowing 처리를 하여 string 타입만 허용 ... } } typeof 연산자는 number, string, boolean, object 등 타입을 지정하는것이 제한적이다. type키..
-
Typescript - HTML DOM 제어Front-end/Typesrcipt 2023. 4. 13. 17:22
Typescript DOM 제어 javascript 에서 DOM 조작 및 제어를 할땐 타입과 상관없이 조작하지만 typescript 에선 조작 및 제어를 하기위한 HTML 태그의 타입으로 Narrowing 처리를 해야한다. tsconfig.json 파일에서 Null 체크를하기위해 옵션을 추가해야한다. "strictNullChecks": true//엄격한 null타입 체크 HTML 태그 속 글자 변경 예시 타이틀입니다. 위의 html태그의 글자를 변경하기위해 타입스크립트에서 narrowing 처리를 해야한다. let title = document.querySelector('#title'); title.innerHTML = '타이틀 변경'; // narrowing이 필요하다. 에러 // narrowing 처..
-
Typescript - Narrowing & AssertionFront-end/Typesrcipt 2023. 4. 12. 14:41
Tyepscript Narrowing Tyepscript Narrowing이란 타입이 하나로 확정되지 않았을 경우 Type Narrowing을 통해 타입을 조건별로 나누어주는것이다. function myFn(x: number|string): number {// 파라미터 타입이 하나로 정의되어있지 않다. return x + 10; } 위의 함수에러를 수정하기위해 Narrowing을 해줘야한다. Typeof 연산자 typeof 란 대표적으로 사용되는 Narrowing 방법중 하나는 typeof 연산자를 사용하여 처리하는것이다. function myFn(x: number | string) {// 2가지 타입이 들어올 수 있다. if (typeof x === 'string') {// typeof 연산자를 통해 ..