Frontend

기본 정의 interface Person { name: string; age: number; } const person1: Person = { name: 'js', age: 20 }; const person2: Person = { name: 'ljs', age: 'twenty' }; // Error 선택 속성 interface Person { name: string; age?: number; } const person1: Person = { name: 'js' }; Read only 속성 interface로 객체를 생성할때에만 값을 할당할 수 있고, 그 이후에는 변경할 수 없는 속성이다. Q.마치 const같은 것?? ⚠️ReadonlyArray interface Person { readonly name..

유니온(Union) 타입 : (A || B) 자바스크립트의 OR 연산자 || 와 같은 의미이다. const printOut = (input: string | number) => { console.log(input); } printOut('문자열'); printOut(20); printOut(true); | (파이프)연산자를 이용하여 타입을 여러 개 연결하는 방식 유니온 타입의 장점 function getAge(age: any) { age.toFixed(); // Error return age; } getAge('20'); getAge(20); toFixed함수는 number타입만 사용 가능하므로 any타입과 같이 어떤 데이터타입이든 허가해준다면 에러가 발생하게 된다. function getAge(age:..

enum 자바스크립트에는 없고 타입스크립트에만 있는 타입이다. enum은 특정 값들의 집합을 의미하는 자료형 enumeration의 단어 뜻과 같이 그냥 특정값들을 나열하는 타입이다. 숫자형 enum enum Direction { Up, Down, Left, Right, } const up: Direction = Direction.Up; // Direction = Direction.UP | Direction.Down | Direction.Left | Direction.Right const leftOrRight: Direction.Left | Direction.Right = Direction.Left; 위의 예시에서 볼 수 있듯, 숫자형 enum은 마치 배열처럼 순서대로 숫자값을 가지고 있다. enum D..

JS → TS 함수 변환 JS로 작성된 함수 function add(n1, n2) { return n1 + n2; } TS로 변환 function add(n1: number, n2: number): number { return n1 + n2; } // const add = (n1: number, n2: number) => { // return n1 + n2; // }; const a = add(1, 2); const b = add('1', 2); // Error const c = add(10, 20, 30); // Error const d = add(10); // Error function add(n1: number, n2: number) { return n1 + n2 + 'abc'; } 다음과 같이 숫..

기본 타입의 종류 String Number Boolean Object Array Tuple Enum Any Void Null Undefined Never String TypeScript에서는 텍스트 데이터 타입을 string으로 표현합니다. JavaScript처럼 TypeScript도 큰따옴표 (")나 작은따옴표 (')를 문자열 데이터를 감싸는데 사용합니다. let str: string = 'TypeScript'; :

프로젝트 초기설정 npm init -y 다음과 같은 package.json이 생성된다. Wrote to /Users/binary/Code/nbc/ts/2/package.json: { "name": "2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 타입스크립트 설치 npm install typescript

목차 Typescript 간단 소개 Typescript vs Javascript 비교 왜 Typescript을 사용해야하나? TypeScript is JavaScript with syntax for types. JavaScript With Syntax For Types. 어려워 할 필요없다. 편의를 위해 자바스크립트에 타입이 추가되었을 뿐 SuperSet: JS의 모든 기능을 포함하고 있다. Typescript vs Javascript Type Typescript는 정적 타입 Javascript는 동적 타입 타입이란 ? 위에서는 자료형을 의미함! 예시 Javascript : 별다른 문제 없이 값이 할당된다. let num = 3; num = '삼'; 동적 : 움직인다. Javascript는 어떤 변수에 ..

배운것 ☑️Axios ☑️Thunk ☑️성능최적화 ☑️custom hook ☑️React Query ☑️깃강의 배워야 할 것 타입스크립트