분류 전체보기
-
[TypeScript] Error : exports is not defined (import 오류)공부/나를 힘들게하는 오류들 2024. 3. 26. 23:51
원인 코딩애플 강의를 들으면서 import를 시도하는 예제였는데 Live html 화면에서 오류가 발생했다. 찾아보니 브라우저는 commonjs 모듈을 지원하지 않아 발생하는 오류라고 한다. 해결방법 tsconfig.json 파일에 module 옵션을 제거 또는 "ES2015" , "ESNext"로 설정하면 import 및 export문이 원본 파일에 있는 그대로 유지된다고 한다. 추가로 html 파일의 script 태그에 유형 속성을 설정한다. //내 사례에서는 index.js 이렇게 설정했더니 오류가 해결됐다.!! 참고한 글 : TypeScript : Uncaught ReferenceError: exports is not defined 문제 정의 : 코딩애플 Ts 강의 import/export 파트 ..
-
[TypeScript] Rest / Spread / Destructuring 문법공부/TypeScript 2024. 3. 24. 02:54
Rest 파라미터를 배열의 형태로 받아서 사용하는 문법 함수의 파라미터 값을 합쳐서 하나의 배열로 만들어 준다. 함수에 아직 몇개의 파라미터가 들어올지 모를 때 사용하면 유용하다. ...a 처럼 함수의 파라미터에 대입하면된다. function Rest_Array(...a :number[]){ return a; //[1,2,3,4,5]로 반환 } Rest_Array(1,2,3,4,5); Spread operator 특정 배열 혹은 객체 값을 복제하는 문법으로 주로 배열을 풀어서 인자로 전달 또는 배열을 풀어서 이용할 때 사용한다. Rest와 동일하게 ...을 사용하지만 두 문법의 차이점은 Spread는 기존 배열을 해체하고 Rest는 개별요소를 배열 형태로 만들어준다. let arr = [3,4,5]; l..
-
[TypeScript] Interface 란?공부/TypeScript 2024. 3. 22. 14:41
Interface Ineterface는 상호 간에 정의한 약속(규칙)을 의미한다. 즉, 클래스 또는 함수 처럼 '틀'을 정의하여 타입을 강제하도록 사용할 수 있는 것이 Ineterface이다. 타입 스크립트의 Ineterface는 주로 객체 위주로 다룬다. 1. Type Alias 와 Interface 차이 //Type Alias로 지정 type Trim = { option : string } //Type Alias는 & 기호를 사용하여 객체를 합침 type Model = Trim & { name : string, color : string} let Car : Model = {name : 'Cybertruck', color : 'Silver', option : 'RangeExtender'} //inter..
-
[TypeScript] Class 문법 Type지정하기공부/TypeScript 2024. 3. 21. 16:52
Class 문법이란? ES6에서 추가된 문법으로 좀 더 코드를 객체지향적으로 표현하기 위해 추가된 문법이다. TypeScript의 class 문법 type 지정은 다음과 같다. //TypeScript 타입지정 문법 class Product { //constructor을 쓸때는 위에서 변수를 미리 선언하고, type을 지정한다. name : string; price : number; /* 기억할 포인트 1. constructor안에서도 파라미터의 타입 지정이 가능하다. 2. 생성된 데이터는 항상 object 이기 때문에 return 타입을 지정할 필요가 없다. 3. 함수와 관련된 모든 문법이 적용가능하다. */ /* cunstructor (생성함수, 생성자) 객체를 정의하면, 그 객체에 의해 생성될 ins..
-
[Javascript] Class & Prototype 문법공부/JavaScript 2024. 3. 21. 01:27
Prototype 문법이란? 원래 자바스크립트에는 기존의 객체를 복사해서 새로운 객체로 생성하는 프로토 타입 기반 언어로 Class란 개념이 없었다. 그래서 ES6 버전 이전까지는 기존의 객체를 복사, 새로운 객체로 생성하는 prototype 문법을 이용해왔다. 객체를 만들면 객체에는 Prototype이라는 공간이 존재하게 된다. 이 prototype을 "유전자" 라고 생각하면 이해가 간단하다. (자식은 부모의 유전자를 이어받는다.) function Skill(q,w){ //this = class에서 생성되는 object(instance) this.q = q; this.w = w; } //이렇게 자료를 수정하는것도 가능하다. //이렇게 자료를 수정하면 Skill을 사용한 자식 전부 해당 데이터 사용이 가..
-
[TypeScript]Literal Types, Readonly, const 정리공부/TypeScript 2024. 3. 19. 23:56
Literal Types 미리 들어올 자료를 정하는 타입을 Literal Types 이라고 한다. Literal Types을 쓰는 이유는 변수를 더 엄격하게 관리해서 오류를 방지하기 위해서 사용한다. 함수 입력값, 리턴값 등을 제한하는 용도로도 사용가능하다. const 변수와 유사하게 사용가능하다. //literal types 변수 let blog : 'tistory'; //'tistory'타입이기 때문에 tistory만 들어갈 수 있게 된다. blog = 'tistory'; //에러 발생 blog = 123; 함수에 Literal Types 사용 예 //입력값으로는 Tistory, 리턴값으로는 true | false만 가능해진다. function blog(a: 'Tistory') : true | fal..
-
[TypeScript] TypeAlias ?공부/TypeScript 2024. 3. 19. 21:01
Type Alias type 키워드를 사용해 변수에 타입을 넣어서 사용하는 방법 (타입에 이름을 지정) 주로 타입이 길어져서 복잡해지는 경우 사용한다. 같은 이름의 type 변수는 정의할 수 없다. (중복불가) //기본형식 type 변수 = type지정 type A = stirng | number; let B : A = 123; let B : A= 'Hello'; 예시 Object에 Type Alias 사용하기 type Product = { brand : string, serialNumber : number , model : string[] } //다음과 같이 변수 명 뒤에 입력 let tv_data : Product = { brand : 'LG', serialNumber : 1111, model : [..
-
[TypeScript] Narrowing & Assertion 문법 정리공부/TypeScript 2024. 3. 18. 17:00
1. Type Narrowing ? if문 등을 사용하여 타입을 하나로 정하는(좁히는) 문법을 말한다. 사용하는 이유는 Union type을 사용하면 Narrowing(좁히다)문법을 사용해서 타입을 하나로 정해주거나 Assertion(선언) 문법으로 타입을 선언해주는 것이 필요하기 때문이다. 2. Narrowing 문법 예시 /* 1. type of 연산자를 사용해서 정하기 */ function NarrowingTest ( a : number | string ) { if(typeof a === 'string') { return a + '1'; } else { return 'a는 number입니다.' } /* 2 in 연산자를 사용해서 정하기 */ type Cookie = {choco : string } ..