클래스 선언 class Car { color: string; //타입스크립트에서 클래스를 작성할 때, 멤버변수 미리 선언 해 줘야한다. //멤버변수를 미리 선언하지 않을 때, 접근제한자, readonly 키워드 이용 //constructor(public color: string) { //constructor(readonly color: string) { constructor(color: string) { this.color = color; } start() { console.log("start"); } } const bmw = new Car("Red"); 접근 제한자 public : 자식 클래스 , 클래스 인스턴스 모두 접근 가능 private : private라면 자식 클래스 내부에서 사용할 수 없다...

Literal Types Literal Types : 정해진 값을 가진 것을 문자열 리터럴 타입이라고 한다. const : 변하지 않는 값 선언 시 let : 변할 수 있는 값 선언 시 const userName1 = "Bob"; //변할 수 없으니 Bob외의 값은 가질 수 없음, //userName1이 Literal Types let userName2 = "Tom"; //언제든지 변할 수 있어 string 타입이다. userName2 = 3; //최소 할당된 값이 string이므로 에러 발생 let userName3: string | number = "Tom2"; userName3 = 3; //명시적으로 타입 작성 시 사용 가능 type Job = "police" | "developer" | "teac..

함수 타입 정의 //함수 function add(num1: number, num2: number): void { //return num1+num2 console.log(num1 + num2); } function isAdult(age: number): boolean { return age > 19; } function hello(name?: string) { //name은 있어도 되고 없어도 되는 옵션 파라미터, 선택적 매개변수 이다. //옵션이어도 타입은 지켜줘야한다. return `Hello, ${name || "world"}`; } function hello2(name = "world") { //위 함수와 동일 //default값을 줄 수 있다. return `Hello, ${name}`; } co..

객체 생성 시 오류 에러 발생 let user:object; user = { name:'xx', age:30 } console.log(user.name) 객체는 오브젝트 타입으로 정의 할 수 있다. 이때 console.log(user.name)을 찍으면 에러가 발생한다. 오브젝트에는 특정 속성값에 대한 정보가 없기 때문이다. property를 정의해서 객체를 정의할 때는 인터페이스를 사용한다. property를 정의해서 객체 표현 ⇒ 인터페이스 사용 type Score = 'A' | 'B' | 'C' | 'F'; //타입 지정 interface User { name:string, age:number, gender? : string, //물음표를 붙이면 옵션으로 써도 되고 안써도 된다. readonly b..

string number, boolean, number[], string[] 튜플 (Tuple) void, never enum 컴파일된 결과를 보면 Os객체에 값이 할당되어 있다. 양방향 맵핑이 되어있다. 따라서 Os[10]을 넣으면 "Ios"가 출력이 된다. enum은 숫자가 아닌 문자열도 입력할 수 있는데 , 이때는 단방향 맵핑만 가능하다. null, undefined

TypeScript를 쓰는 이유 우리가 사용하는 브라우저는 TypeScript를 이해하지 못한다. TypeScript은 자바스크립트로 변환 후 로드해야 사용이 가능하다. 이런 단점에도 불구하고 TypeScript를 사용하는 이유는 무엇일까? 이런 코드가 있다고 생각해보자. function add (num1, num2){ console.log(num1 + num2); } add(); 을 실행하면 undefined+undefined이 되지만, 아무런 힌트와 에러없이 실행이 된다. 결과: NaN add(1); 을 실행하면 1+undefined, 아무런 힌트와 에러없이 실행이 된다. 결과: NaN add(1,2); 을 실행하면 1+2가 실행된다.결과 : 3 add(1,2,3); 을 실행하면 세번째 인수가 무시되..

https://www.npmjs.com/package/react-image-gallery react-image-gallery React carousel image gallery component with thumbnail and mobile support. Latest version: 1.2.7, last published: 6 months ago. Start using react-image-gallery in your project by running `npm i react-image-gallery`. There are 152 other projects in the npm r www.npmjs.com 설치 npm install react-image-gallery style import # CSS @im..

Dropzone 라이브러리 https://www.npmjs.com/package/react-dropzone react-dropzone Simple HTML5 drag-drop zone with React.js. Latest version: 12.0.4, last published: 5 days ago. Start using react-dropzone in your project by running `npm i react-dropzone`. There are 2423 other projects in the npm registry using react-dropzone. www.npmjs.com 설치 방법 npm install --save react-dropzone 사용 방법 import React from ..