본문 바로가기

TypeScript7

Typescript Cannot find name 'target' 이벤트 객체 오류 해결 자바스크립트를 하다보면 항상 이벤트를 줄떄가 많다. 이벤트를 사용하면 event 객체를 이용해 조작을 많이하는데 typescript 에서는 이벤트에 타입을 지정해줘야 오류 없이 이용할수 있다. 이벤트에 타입을 지정하는 방법과 내가 사용하면서 헤결한 오류를 확인해보려합니다. 1. 이벤트 객체 document.querySelector(selecter).addEventListener('click', (event) => {}); 위에 코드처럼 이벤트를 주는데 ts에서는 event에 타입을 지정해주면된다. document.querySelector(selecter).addEventListener('click', (event: Event) => {}); 여러가지 이벤트들이있지만 우선 Event로 타입을 지정해주면된다.. 2021. 11. 29.
Typescript 에러 Object is possibly 'null' 타입 스크립트를 배우고나서 적용해보면서 나는 문제들을 하나씩 해결하고 기억하기 위해 블로그를 작성해보려한다. 1. querySelector()에러 document.querySelector(selecter).option 을 사용하는 경우가 많이있다. 그럴떄마다 Object is possibly 'null'. 는 경고가 뜨게 된다. 이 경고가 뜨는 이유는 개발자의 입장에서는 DOM이 당연이 있다고 생각하지만 ts는 있는지 없는지 확실하지가 않다. 그렇게 떄문에 개발자가 확실하게 알려줄 필요가 있다. if문으로 null 걸러냄 const DOM = document.querySelector(selecter) if (!DOM) { return; } DOM.option;​ if문으로 null을 판별해주는 방법입니다.. 2021. 11. 29.
TypeScript 제네릭 타입스크립트 제네릭 클래스나 함수의 목적중 하나는 '재사용성'에 있습니다. 이 제네릭을 이용하게되면 재사용성이 한층 더 증가합니다. 일종의 '틀' 이라고 생각하시면 됩니다. 타입스크립트에서 제네릭을 어떻게 쓰는지에대해 알아보도록 하겠습니다. 클래스에서의 제네릭 class NumberButton {} class TextButton {} class OprButton {} class ButtonContainer { private container: T[]; getButton(index: number) { return this.container[index]; } // ... } const numberContainer = new ButtonContainer(); const textContainer = new Bu.. 2021. 10. 16.
TypeScript 인터페이스 타입스크립트 인터페이스 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약 같은 것입니다. 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않습니다. 1. 인터페이스 사용 타입스크립트에서 인터페이스 사용 예제입니다. let person = { name: 'kikiki', age: 26}; function logAge(obj: { age: number }) { console.log(obj.age); // 26 } logAge(person); // 26 위 logAge() 함수에서 받는 인자의 형태는 age를 .. 2021. 10. 16.
TypeScript 인터페이스 와 type 인터페이스 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 인터페이스 interface User { age: number; name: string; } var person: User = { age: 30, name: "aa", }; function getUser(user: User) { console.log(user); } getUser(person); // age: 30, name: "aa" 옵션 속성 인터페이스를 사용할 때 인터페이스에 정의되어 있는 속성을 모두 다 꼭 사용하지.. 2021. 10. 14.
TypeScript 기본 타입 타입스크립트 기본 타입 ## 타입스크립트 기본 타입 1.기본타입 타입스크립트는 다양한 기본 타입을 제공합니다. Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never • 변수에 타입 설정 let num: number = 0; let str: string = String(num); 2.배열 • Tuple: 배열의 타입 순서와 배열 길이를 지정할 수 있는 타입입니다. let arr1: number[] = [1, 2, 3]; // 보편적으로 사용 let arr2: Array = [1, 2, 3]; let arr3: (string | number | boolean)[] = [true, 2, "3"];``` 배열안.. 2021. 10. 13.

티스토리툴바