공부 기록일지📚

타입스크립트 4.8 업데이트에 추가된 타입 {} Object (대문자로 시작) -> 이 두가지 타입은 모든 타입을 가리키며 모든 값을 받을 수 있다. (null과 undefined는 제외) unknown도 any와 마찬가지로 모든 값을 받을 수 있는데 unknown이 4.8버전부터 {} | null | undefined 와 같이 성립되기 때문에 조건문에 들어갔을 때 아래와 같이 된다. const z: unknown = "hi"; //모든 타입이 들어가기 때문에 hi도 들어갈 수 있다. if (z) { z; //z의 타입이 {}이다. 파라미터로 들어온 z 는 unknown인데 true일때는 {}인 것 } else { z; //unknown } 실제로 객체 타입은 object가 있는데 string의 원시값을..

//타입 좁히기(타입 가드) { function numOnStr(a: number | string) { // if (typeof a === "string") { // a.split(","); // } else { // a.toFixed(1); // } a.toFixed(1); // number면 쓸 수 있지만 string일수도 있기 때문에 Error } numOnStr("123"); numOnStr(1); } -> 매개변수 타입이 number라면 toFixed 메서드를 사용할 수 있지만 string일수도 있기 때문에 내부에서 바로 쓰게되면 빨간 줄로 에러가 뜬다. TS에러 메세지가 여러 줄이 뜰 때에는 결국에는 마지막 줄을 보면 된다. 마지막 줄에 원인이나 해결방법이 나와있다. 위에 a.toFixed를 ..

우선 기존에 create-react-app 으로 만든 폴더를 TS를 적용하여 마이그레이션한다고 했을 때, 노드 패키지 매니저(npm or yarn)으로 typescript를 설치해줍니다. typescript만 추가하는게 아니라 아래와 같이 여러 개의 패키지를 추가로 설치해줍니다. npm i typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom js확장자를 ts로 변경하고 jsx 를 tsx로 변경해줍니다. 👾컴포넌트를 .ts 확장자로 변환하면 jsx를 제대로 인식하지 못하고 에러를 토해내는 에러를 만났습니다. jsx를 반환하고 있는 컴포넌트는 tsx로 변환해주면 되고 jsx를 반환하지 않는 js파일은 ..

화살표 함수 ES6부터 식(expression)에 한해 화살표 함수식을 활용할 수 있다. 더 나아가 매개변수, 리턴타입을 명시적으로 선언해 컴파일 과정에서 타입 검사를 수행해 사전에 문제를 방지할 수 있다. 아래는 매개변수 url의 타입을 string으로 지정하여 명시적으로 표현하였다. //TS let corsURL = (url:string): string => `https://crossorigin.me/${url}`; corsURL('http://yamoo9.herokuapp.com/rest/ediya-menu'); Default Parameters ES6 부터 함수 매개 변수의 기본값을 설정할 수 있다. TS는 매개 변수 타입 설정 후, = 뒤에 기본값을 할당하면 된다. 컴파일된 코드를 보면 기본 값..

Basic Rules 최대한 타입은 좁은 범위로 작성 타입 추론을 적극 활용할 것 타입스크립트에서 타입을 빼면 올바른 자바스크립트 코드여야 한다. 타입 명시 자리를 잘 알고 있어야 한다. 원시타입 명시할 때, 대문자가 아니라 소문자로 써야한다. string과 String은 다르다. 💛콜론 뒤에 타입, 타입 별칭(에일리어스), body가 없는 function, 제네릭, 인터페이스, as, enum, declare, readonly 등은 TS코드에서 JS코드로 변환 시 사라진다. Implicit Types vs Explicit Types (암시 타입 vs 명시 타입) 암시 타입(Implicit Types)은 타입스크립트에게 해당 데이터의 타입을 추론할 수 있도록 타입을 명시하지 않는 방법을 말한다. (TS가..

들어가기 전에... 🤸‍♀️자바스크립트의 특성 -C나 Java와 같은 C-family 언어(클래스 기반 객체 지향 언어)와는 구별되는 특성 Prototype-based Object Oriented Language Scope와 this 동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosey typed)언어 동적인 언어 JS 예시 [1,2,3,4] + false // '1,2,3,4false' //출처: 노마드코더 결과가 미쳤다. 우선 두 타입이 전혀 다른 형태인데 연산은 왜 된것이며 연산이 됐다쳐도 배열은 어디가고 false는 string형태로 배열의 마지막 요소에 붙어있다. (차라리 에러를 던져주세요..) 런타임에러가 왜 최악의 에러일까? 런타임 에러란 콘솔 안에서 일어나는 에러이다. ..