조건문으로 타입 만들기 type Age = T extends string ? string : unknown; let age : Age //age는 string 타입 let age2 : Age //age는 unknown 타입 타입 조건식은 주로 extends 키워드랑 삼항연산자를 사용 extends : 왼쪽이 오른쪽의 성질을 가지고 있는지 체크 => 삼항연산자를 통해 string이면 age는 string 타입이 되고, string이 아니라면 unknown타입으로 설정해라 라는 의미. infer 키워드 type Person = T extends infer R ? R : unknown; type newType = Person // string 타입 infer : 입력한 타입을 변수로 만들어주는 키워드 1. 조..
keyof 연산자 interface Person { age: number; name: string; } type PersonKeys = keyof Person; //"age" | "name" 타입 let a :PersonKeys = 'age'; //가능 let b :PersonKeys = 'ageeee'; //불가능 keyof 연산자를 object 타입에 사용하면 모든 key값을 union타입으로 합친다. => "age" | "name" 타입 interface Person { [key :number]: number; } type PersonKeys = keyof Person; //number 타입 let a :PersonKeys = 10; //가능 let b :PersonKeys = 20; //가능 in..
index signatures interface StringOnly{ [key: string]: string, } let user : StringOnly = { name:'hong', age: '20', location : 'seoul' } 1. object 자료에 어떤 속성들이 들어올지 모르는 경우 2. 타입지정할 속성이 너무 많은 경우 => [ key: 타입 ] : 타입 형태로 작성하면 모든 속성은 해당 타입을 가져야 한다라는 의미. array 형태 interface StringOnly { [key: number]: string, } let obj :StringOnly = { 0 : 'kim' 1 : '20', 2 : 'seoul' } 단순히 key값을 number로 변경하면 obj [0]과 같이 a..
interface 용도 1. 타입 지정 2. class 타입 확인 class Car { model : string; price : number = 1000; constructor(a :string){ this.model = a } } let 붕붕이 = new Car('morning'); 위 class가 model, price 속성을 가지는지 타입으로 확인하고 싶다면 => interface + implements 키워드를 사용 interface CarType { model : string, price : number } class Car implements CarType { model : string; price : number = 1000; constructor(a :string){ this.model ..
타입 저장 export type Age = number; export type multiply = (x :number ,y :number) => number export interface Person { name : string } 1. d.ts를 확장자로 하여 파일을 생성한다 2. type 키워드나 interface를 정리해 두는 곳이다. 3. export를 사용해야 전역모듈로 사용할 수 있다. 타입 저장 (tsconfig.json) { "compilerOptions": { "declaration": true, } } 1. config파일에 declaration을 true로 설정 => ts파일마다 d.ts파일이 자동생성되며 타입이 정리되어 있음. (index.ts) let 이름 :string = 'ho..
TS 특징 : Ambient Module (data.ts) type Age = number; let 나이 :Age = 20; (index.ts) console.log(나이 + 1) //가능 let 철수 :Age = 30; //가능 타입스크립트 파일끼리는 import export를 따로 하지 않아도 변수나 타입을 가져다 사용할 수 있다. => 기본값이 전역변수로 생성됨 => 전역파일로 ambient module이라고 칭함. - 하지만, 같은 이름의 변수를 생성하고 싶을 때는 방법이 있다. export {}; import 또는 export 키워드를 작성하면 그 파일은 => 로컬 모듈로 바뀐다. declare global (data.ts) declare global { type Dog = string; } e..
Tuple 타입 let 멍멍: (string | boolean)[] = ["dog", true]; //union타입 let 야옹: [string, boolean] = ["cat", true]; //tuple타입 let 야옹2: [boolean, string] = ["cat", true]; //tuple타입 에러발생 [ ] 괄호 안에 타입을 적으면 tuple 타입이 된다. 첫 자료는 string, 둘째 자료는 boolean 타입처럼 위치까지 구체적으로 지정하려면 tuple을 사용하면 된다. => 예시를 보면 야옹 2는 자료위치와 타입선언이 맞지 않아 에러가 발생한 것. Tuple + rest parameter 문법 function 함수(...x: [number, string]) { console.log(x..
Redux를 사용하는 이유 1. state를 한 저장소에서 관리하기 위해 => props 필요 없이 state를 사용가능 2. 수정방법을 reducer 함수로 정의함으로써 => state 수정 시 발생하는 버그를 줄일 수 있다. npm install redux react-redux 1. 우선 redux를 설치하기 위해 명령어를 터미널에 입력한다. npm install @reduxjs/toolkit 2. 신규방식의 Redux 공식 toolkit 라이브러리를 사용하려면 명령어 하나를 더 입력해야 한다. => 전통방식을 사용한다면 굳이 설치할 필요 없다. Redux - state 생성하는 법 import React from 'react'; import ReactDOM from 'react-dom'; impor..
