조건문으로 타입 만들기 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..
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..
JSX 타입지정 let 박스 :JSX.Element = let 버튼 :JSX.Element = 리액트는 변수나 자료에 를 담아서 사용할 수 있다. => 는 일반적인 HTML이 아닌 JSX문법이기 때문. 이때 타입지정을 추가로 하고 싶다면 변수명 : JSX.Element 타입을 사용할 것. function 컴포넌트 타입지정 function App(){ return ( ); } function Profile(props:{name:string, age:string}) :JSX.Element{ return( {props.name}입니다. ) } 1. 리액트 키워드인 props에 파라미터 타입지정을 할 수 있고, 2. 리턴 타입의 경우 :JSX.Element를 사용하면 된다. => 생략해도 자동으로 타입지정이 됨..
함수 return값의 타입정하기 function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a+1) //에러 발생 unknown타입으로 설정했기 때문에 계산식에서 에러가 발생하는 모습 1. narrowing 적절히 해서 에러 없애기 2. 가변적 타입 지정하기 => Generic 문법 Generic 적용하기 function 함수(x: T[]):T { return x[0] } let a = 함수([4,2]) let b = 함수(['4','2']) 1. 함수명 오른쪽의 안에 사용자정의 제네릭명을 임의로 입력. 2. 파라미터에 제네릭명 입력 => array의 경우 [ ] 포함 3. return 타입도 제네릭으로 지정가능 4. 함수를 ..
