Typescript (17) 썸네일형 리스트형 [Typescript] 공식문서 공부중4 만약 매개변수보다 더 많은 인수가 들어가 있는 함수를 호출한다면 추가 인수는 무시된다.Construct Signaturesnew를 이용해여 함수의 타입을 만들 수 있다.Generic Functions입력과 출력의 유형이 관련되어 있다면 사용할 수 있다. 부분이 generic이다. extends로 항목을 추가할 수 있다.콜백함수를 인자로 넣어서 사용할 수 있다. or을 넣어 두가지 경우의 타입만 가능하게 할 수 있다.objectstring, number, bigint, boolean, symbol, null, undefined가 아닌 값에 해당한다.즉 함수를 나타낼 수 있는 타입이다.objsect는 여러 properties를 가지고 있으며 object.keys와 같이 사용할 수 있다.빈 배열이나 글로벌 타.. [Typescript] 공식문서 공부중3 Narrowing타입은 여러 종류를 함께 선언할 수 있다.이것을 if문 등으로 타입별로 분기처리를 한다면 타입가드(type guard)라는 특수한 형식의 코드로 인식된다. 배열은 객체(object) 타입이다. 그러나 null 또한 객체(object) 타입이므로 오류가 발생할 수 있음에 주의해야 한다.이 경우 값이 존재하는지를 &&를 추가하여 확인하면 의도대로 사용할 수 있다.animals 내에 어떤 항목이 있는지 확인하기 위해 in을 사용할 수 있다. instanceof로 타입 좁히기도 가능하다. 내부에 있는 인스턴스 종류에 따라 나뉜다.조건에 따라 서로 다른 값을 참조해야 할 때 ?로 optional하게 값을 만들고, !로 값이 존재한다는 조건을 달게 되면 올바르게 사용된 것이라고 볼 수 없다. !는 .. [Typescript] 공식문서 공부중2 Typescript는 구조와 타입의 가능성에 대한 것만 고려하기 때문에 구조적인 타입의 타입 시스템(structurally typed type system)이라고 한다. Everyday TypesUnion Types는 여러 종류의 타입을 사용할 수 있다.여러 종류의 타입을 사용할 경우에는 해당하는 모든 타입이 가능한 메서드만 적용이 가능하다.그중 일부에만 적용하기를 원한다면 if문 등으로 경우의 수를 나눠주어야 한다.Type Assertions타입을 할당한 것과 같이 컴파일러에 의해 제거되며 런타임에 영향을 주지 않는다.만약 그런 식으로 사용하는 것이 너무 제한적이라면 두가지를 동시에 사용할 수도 있다. 고유한 값을 설정하고 싶다면 Symbol을 사용할 수 있다.함수 등 겹치는 이름이 덮어쓰이는 상황을 .. [Typescript] 공식문서 공부중1 TypeScript for JavaScript Programmers타입을 선언할 때는 type보다 interface를 선호한다. Unions는 할당할 수 있는 값을 제한하여 선언할 수 있다. The Basics코드를 실행할 때 자바스크립트 런타임은 값의 유형, 즉 어떤 종류의 동작과 기능을 가지고 있는지 파악하여 수행할 작업을 선택해야 한다.기본값 문자열이나 숫자와 같은 일부 값의 경우 런타임에 typeof 연산자를 사용하여 유형을 식별할 수 있다. 그러나 함수와 같은 다른 값의 경우 해당 유형을 식별할 수 있는 런타임 메커니즘이 없다. 자바스크립트는 함수를 실행할 수 있는 경우인지 확인할 수 없다. 가능한지 확인하는 경우는 함수를 호출하여 발생하는 일을 확인하는 것 뿐이다. 이러한 동작 방식은 코드가 .. [Typescript] 무한스크롤(Infinity scroll) 사용한 기술: Supabase, Tanstack-Query, Typescript, Next.js 무한 스크롤은 사용자가 웹 페이지를 아래로 스크롤할 때 자동으로 새 콘텐츠를 로드하고 표시하는 웹 디자인 기법이다. 이를 통해 페이지 매김이 필요 없는 무한 스크롤 환경을 만들고 끊김 없이 매끄러운 탐색 환경을 제공한다. 본래 Tanstack-Query의 Infinite Queries를 사용하려 했으나supabase에서 제공하는 데이터를 불러오는 API는 적용하기에는 부적합했다.따라서 데이터를 fetch하는 것은 API를 사용하고, Tanstack-Query는 상태 관리만 사용하였다. 아래는 무한스크롤을 구현한 로직이다.1. 초기 데이터를 fetching한다. 이 데이터는 useSuspenseQuery를 사용.. [Typescript] 설치한 모듈의 타입 적용 설치된 모듈의 타입을 타입스크립트가 읽을 수 없다면 설치해줘야 한다. npm i -D @types/모듈 이름 Deinitely typed 프로젝트로 생성된 데이터 타입을 적용할 수 있다. GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.The repository for high quality TypeScript type definitions. - DefinitelyTyped/DefinitelyTypedgithub.com [Typescript] interface와 type 차이점 type는 같은 이름으로 생성되면 중복되지 않아야 한다고 경고한다. interface는 같은 이름으로 생성되면 객체에 추가된다. Users에서 age가 없으면 오류가 발생한다. interface로 선언하는 방법과, class로 추상화하는 방법이 있다.interface는 빌드하는 과정에서 사라지므로 더 작은 파일을 만든다.그러나 constructor를 생성하는 부분을 상속받는 class에 써줘야 하는 번거로움이 있다.또한 interface를 사용하면 public만 사용 가능하고 private, protected는 사용될 수 없다. +) 복수의 interface를 상속하고 싶다면 User, Human 처럼 사용하면 된다. [Typescript] class와 객체지향 추상화 class(abstract class)1. 다른 클래스에서 상속받을 수 있는 class다.2. new로 객체를 생성할 수 없다.3. 추상화 함수를 생성할 수 있다.(getNickName) 상속받은 class(extends)1. new로 객체를 생성할 수 있다.2. 추상화 함수는 반드시 포함하고 있으며, 함수의 형태를 정의해야 한다. 아래에서 private와 protected가 작동하는 범위를 알 수 있다. 1. 객체의 경우 대괄호[]로 타입을 한정할 수 있다.2. class로 정의한 Word도 타입으로 사용할 수 있다.3. words가 constructor의 바깥에 선언되고 안쪽에서 초기값인 this.words를 선언한 형태로 사용할 수 있다.4. 만약 접근할 수 있.. [Typescipt] polymorphism(generic) generic- call signature을 작성할 때 들어올 수 있는 확실한 타입을 모를 때 사용된다.- 또는 여러개의 서로 다른 타입을 사용하는데 모두 동일하게 작동하게 하고 싶을 때 사용할 수 있다.- 보통 T, V 등으로 사용한다.- 아래에서 사용된 TypePlaceholder가 generic이며 typescript가 자동으로 타입을 추론하여 적용된다.- 여러 타입이 혼합되어도 잘 작동하는 것을 확인할 수 있다. 내부의 인자 중 일부만 generic을 받는 경우 다음과 같이 사용할 수 있다. [Typescript] Overloading 함수가 여러개의 서로 다른 call signatures가 있을 때 생긴다.특히 라이브러리처럼 경우에 따라 다른 데이터 형식을 보내줄 때 사용될 수 있다. 만약 인자의 개수가 다르다면 optional한 값의 타입을 지정해야 한다.아래의 경우 c의 타입을 따로 지정해야 함을 알 수 있다. 이전 1 2 다음
