프로그래밍/typescsript27 import 에러 : 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307) 리액트로 잘 쓰고있던 경로인데 찾을 수 없다고 뜬다. 이럴때는 타입스크립트가 파일의 추론을 잘 할 수 있게 돕는 d.ts 파일을 작성해줘야한다. https://hancoco.tistory.com/370 타입스크립트의 선언 파일 / d.ts 선언 파일이란? 타입스크립트 선언 파일 d.ts는 타입스크립트 코드의 타입 추론을 돕는 파일이다. 예를 들어 전역변수로 선언한 변수를 특정 파일에서 import 구문 없이 사용하는 경우 변수를 인식 hancoco.tistory.com 사용하고 싶은 확장자명을 작성해주면 에러표시가 사라진다. // custom.d.ts declare module "*.gif"; 2022. 12. 6. 타입스크립트의 Mapped Type(맵드 타입) 타입스크립트에서 map처럼 타입을 각각 변환하는 방법이며 아래와 같은 형태의 문법을 사용해야 한다. { [ P in K ] : T } { [ P in K ] ? : T } { readonly [ P in K ] : T } { readonly [ P in K ] ? : T } 기본 예제 히어로들의 이름에 각각 나이까지 붙인 객체를 만들고 싶다면 아래와 같이 코드를 사용하면 된다. type Heroes = 'Hulk' | 'Thor' | 'Capt'; // for in 문법과 유사한 K in Heroes type HeroProfiles = { [K in Heroes]: number }; const heroInfo: HeroProfiles = { Hulk: 54, Thor: 1000, Capt: 33, } 위.. 2022. 11. 23. 타입스크립트의 유틸리티 타입 유틸리티 타입이란? 이미 정의해 놓은 타입을 변환할때 사용하기 좋은 타입 문법이다. 유틸리티 외의 문법으로도 타입을 변환할 수 있지만, 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다. 자주 사용되는 유틸리티 타입 Partial(파셜) 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다. interface Address { email: string; address: string; } type MayHaveEmail = Partial; const me: MayHaveEmail = {}; // 가능 const you: MayHaveEmail = { email: 'test@abc.com' }; // 가능 const all: MayHaveEmail = { email: 'capt@her.. 2022. 11. 23. 타입스크립트의 인덱싱 인덱싱이란? 여태껏 알아온 인덱싱은 데이터베이스에서 사용하는 개념이라 같은 개념인건가 궁금했다. 데이터베이스에서 원하는 데이터를 빨리 찾기 위해 튜플의 키 값에 대한 물리적 위치를 기록해든 자료구조-라고하는데, 간단하게 말하자면 테이블에 대한 동작 속도를 높여주는 자료구조 라고 생각하면 될듯하다. (색인, 목차를 생성하는 개념) 타입크립트의 인덱싱 타입 그런데 사용하는 모양을 보아하니 배열의 인덱스 각각에게 주는 타입을 인덱싱 타입이라고 하나보다. interface StringArray { [index: number]: string; } const arr: StringArray = ['Thor', 'Hulk']; arr[0]; // 'Thor' 배열의 요소를 변경하지 못하게 제한하려면 readonly를 .. 2022. 11. 23. 타입스크립트의 선언 파일 / d.ts 선언 파일이란? 타입스크립트 선언 파일 d.ts는 타입스크립트 코드의 타입 추론을 돕는 파일이다. declare declare 키워드는 컴파일러에게 해당 변수나 함수가 이미 존재한다는 것을 알리는 역할을 한다. 다른 영역의 코드에서 declare로 선언된 해당 변수나 함수를 참조할 수 있으며 declare로 선언된 부분은 javascript로 컴파일되지 않는다. 사용예시1) 예를 들어 전역변수로 선언한 변수를 특정 파일에서 import 구문 없이 사용하는 경우 변수를 인식하지 못한다. 그럴때 아래와 같이 해당 변수를 선언해서 에러가 나지 않게 할 수 있다. // 전역 변수 declare const global = 'sth'; // 전역 함수 declare namespace myLib{ fuction gr.. 2022. 11. 23. 타입스크립트의 Type Aliases (타입 별칭) Type Aliases(타입 별칭)이란? 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다. string, number와 같은 간단한 타입말고 interface 레벨의 복잡한 타입에도 별칭을 부여할 수 있다. // string 타입을 사용할 때 const name: string = 'capt'; // 타입 별칭을 사용할 때 type MyName = string; const name: MyName = 'capt'; // 타입 별칭을 interface에 사용 type Developer = { name: string; skill: string; } // 타입 별칭을 generic에 사용 type User = { name:T } 타입 별칭의 특징 타입 별칭은 새로운 타입 값을 하나 생.. 2022. 11. 23. 타입스크립트의 Generic(제네릭) Generic(제네릭)이란? C#이나 JAVA 등 언어에서 제네릭은 재사용성이 높은 컴포넌트를 만들때 자주 활용되는 특징이며, 한가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다. 타입스크립트에서 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. // 어떠한 타입이라도 넣을 수 있고, 그와 같은 타입으로 return 값을 지정하는 코드 function getText(text: T): T { return text;} getText('hi'); getText(10); getText(true); 제네릭을 위 코드처럼 사용함으로서 어떤 타입이던지 복잡하게 |을 쓰지않고도 사용할 수 있다. 제네릭 타입 변수 우선 T라는 변수 타입을 받고, 인자값으로는 배열형태의 T를 받는 .. 2022. 11. 23. 타입스크립트의 클래스 readonly 클래스 속성에 readonly 키워드를 사용하면 접근만 가능하다. 또한 constructor()함수에 초기값 설정 로직을 넣어줘야하므로 인자에 readonly 키워드를 추가해서 코드를 줄일 수 있다. class Developer { readonly name: string; static wheels = 4; // 정적 constructor(theName: string) { this.name = theName; } start(){ console.log(Car.wheels); // static으로 선언한 속성은 this가 아니라 클래스명으로 부른다. } } // 줄여쓴 코드 class Developer { readonly name: string; constructor(readonly name:.. 2022. 11. 23. 타입스크립트의 유니온 / 인터섹션 타입 유니온 타입 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다. function logText(text: string | number) {...} 인터섹션 타입 인터섹션 타입(Intersection Type)은 여러 타입을 모두 만족하는 하나의 타입을 말한다. interface Person { name: string; age: number; } interface Developer { name: string; skill: number; } type Capt = Person & Developer; 인터페이스의 타입 정의를 & 연산자를 사용해서 합친 후 Capt이라는 타입에 할당한 코드다. Capt 타입은 아래 코드와 같다. { name: string; age: number; sk.. 2022. 11. 23. 타입스크립트의 Enums (이넘) Enum(이넘)이란? 특정 값들의 집합을 의미하는 자료형이며, 타입스크립트에서는 문자형 이넘과 숫자형 이넘을 지원한다. 숫자형 이넘 숫자형 이넘을 선언할때 초기값을 주면 차례로 1씩 증가한다. 만약 초기값을 주지않으면 초기값이 0으로 자동지정되며 역시 1씩 증가한다. enum Direction { Up = 1, Down, // 2 Left, // 3 Right // 4 } 숫자형 이넘을 사용하는 예 enum Response { No = 0, Yes = 1, } function respond(recipient: string, message: Response): void {...} respond("Captain Pangyo", Response.Yes); 숫자형 이넘에서 주의할 점 다른 이넘 타입의 값을 사용.. 2022. 11. 23. 이전 1 2 3 다음
