# ts

20210216 - TS, index key string 활용법
저번에 Object에다 key를 스트링으로 해서 인덱싱 하려는 시도를 했었는데그 때 났었던 오류랑 다르다. 힌트가 있을거 같아서 캡쳐추후에 해결하는 과정을 기록한 걸로 기억하지만,이 글에서 마무리하는 것이 좋을 것 같아 적습니다.보통 TS의 type 오류는 말그대로 "

[Typescript] #0 타입스크립트를 쓰는 이유
쉽게 설명하자면 Javascript + Type 이라고 생각하면 된다. 자바스크립트의 모든 단점을 보완해 만든 언어이다. (JS의 확장버전) 아래 이미지로 쉽게 설명이 된다.자바스크립트는 동적 타입의 인터프리티 언어이다.이 말은 런타임(실행) 시에 타입을 결정해서 적용
Ts 메모장
Cannot redeclare block-scoped variable 에러: 전역 변수로 선언되어 있는 변수명 사용 불가능==> "compilerOptions": { "lib" : "ES2015" }, 을 추가하면 해결된다고 함, 근데 전역변수로 선
[TS] 11. 타입 앨리어스(type aliases)를 알아보자!
타입 앨리어스(type aliases)를 알아보자!형태가 비슷한 두개의 객체가 있습니다.여기서 객체의 타입을 지정해 주고 싶다면이렇게 해주면 되지만 객체가 추가될 때마다 매번타입을 지정해주기가 번거롭습니다.이럴 땐 type aliases 를 통해 쓸 데 없이 길어진 코
[TS] 10. 유니언 타입과 교차타입
자바스크립트의 OR연사자 (||)타입스크립트의 유니언 타입(|)예시 자바스크립트의 AND 연산자 (&&) ex) x&&y타입스크립트의 교차 타입 (&) ex) AType & BTypeschool을 제외한 모든것이 동일한 타입이다.이럴 때는 &을 통해서 코드를 생략할
[TS] 9. 나머지 매개변수
매개변수의 개수가 가변적일 때 배열 형태로 받아올 수 있다. 매개 변수 앞에 ...을 붙여 사용할 수 있다.주의😯: RestParameter는 파라미터중에 맨뒤에 있어야 함.숫자를 받고 console.log 하는 함수를 만들어보자RestParameter가 파라미터중에
[TS] 8. 선택적 매개변수와 기본 매개변수
이름과 직업을 인자로 받는 함수가 있다고 가정해보자. 이름은 필수적으로 받아야하고 직업은 없어도 되는 인자이다.이렇게 job?:string과 같이 있어도 되고 없어도 되는 매개변수를 선택적 매개변수라고 한다.잡 인자에 기본 값으로 "학생"을 주면이렇게 수정해주자!이렇게
[TS] 7. 함수 타입 작성하기
함수의 타입을 작성 해줄때는 화살표 함수와 유사하게 작성하고 리턴값의 타입을 끝에 적어주면 된다.함수에 타입을 적용하고 싶을때는 함수 이름 옆에다 적어주면 됨.다른 예제이걸 응용해서 함수에서 함수를 받을 때 타입 작성법을 알아보자.예를 들어 첫번째 인자로 string을
[TS] 6. 타입 추론
개발자가 수동으로 명시해야 하는 타입 구문의 수를 줄일 수 있다.코드의 전체적인 안정성이 향상된다어떤 변수에 타입이 다른 값을 재할당하기 보다는새로운 함수를 사용하는 것이 바람직하다.기본 값 주기리턴 값 타입 추론
[TS] 5. TypeScript 배열에 별칭(alias)을 줘보자
TypeScript 배열에 별칭(alias)을 줘보자!라는 배열이 2개 있다고 치자.두 배열을 Tuple 타입으로 타입을 지정해주면이 된다. 두 배열 모두 :string, number, number 과 동일하게 사용되는데 이렇게 동일한 유형은alias을 통해 코드가 쓸
[TS]4. Symbol,unknown 타입
ES6에 새롭게 추가된, number나 string과 같은 기본 데이터 타입(원시 타입)변경 불가능한 유일한 값obj의 key값으로도 symbol을 줄 수 있음 단어 그대로, 타입이 뭔지 알 수 없는 타입어떤값이든 들어올 수 있으니 엄격하게 검사해서 사용any 타입과

[React] Redux - 비동기 처리 (saga, thunk)
말머리 Notification(알림) 기능을 만들면서 접하게된 이슈와 해결 한 방법을 정리한다. 비동기 처리 상황은 아래와 같다. > 게시글에 댓글 달림 게시글의 작성자에게 알림 보냄 (이건 실시간이 필요 없다 생각해서 DB Table로 만듬) 알림 확인 및 알림 제
TS Redux thunk 사용
npm i redux-thunknpm i axiosstore 생성 및 redux middleware를 설치한다.❗ 설치한 store는 Provider의 매개변수로 지정한다.composeWithDevTools 사용devtools 사용을 위해 composeWithDevTo
[TS] 2. TypeScript 배열 표현
string\[] 이나 array 으로 표현 할 수 있다.그 외 배열들도 비슷한 방식으로 표현 가능하다주의! 😯헷갈려서 string\[]을 string 같이 표현하면 length가 1이고 string으로된 배열이란 표현이다!(number,boolean의 경우도 비슷)
[TS] 1.TypeScript로 타입을 지정해보자
const num:number = 2const str:string = "3"const bool:boolean = true함수에서 괄호 밖에 타입을 작성해주면 return 값의 타입을 지정한 것이다.const sum = (a:number, b:number):string

Difference between type, interface
둘 다 타입에 이름을 부여해주는 것이지만 type은 모든(any) 타입에 이름을 달아줄 수 있지만, interface는 오직 객체 타입에만 가능하다interface의 대부분의 기능들은 type에서도 가능하다주요 차이점은 type은 새로운 프로퍼티에 열려있지 않다는 것이

[TS]타입스크립트에서 DOM 사용하기
TypeScript에서는 as 키워드를 사용하여 타입 단언을 할 수 있다. 예를 들어, 다음과 같이 HTMLElement 타입으로 DOM 객체를 단언할 수 있음.위 예제에서 isHTMLElement 함수는 Element 타입의 인자를 받아 HTMLElement 타입인지

TypeScript의 Generics<T>
제네릭이란 다양한 타입에서도 동작하는 컴포넌트를 의미한다. any 대신에 Type을 사용하면 타입 추론이 가능하고 확장이 가능한 구조로 만들 수 있다. any와 Type의 비교 타입 추론 제네릭 타입 제네릭 인터페이스 제네릭 클래스
[React] Redux - 구조
서론 없이 우선 구조를 살펴보자.리덕스는 도로규정으로 비유하자면 일방통행길 이다. (Flux 구조)무조건 한 방향으로 이동하게 되어있다.또한, 한 방향으로 이동하지 때문에, 불변성을 유지한다.타 포스트 글에 자세히 나와있지만, 내가 느끼는 Redux의 동작순서는 아래와