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..
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. 함수를 ..
