내가 보려고 쓰는 기록

타입스크립트가 세팅된 리액트 프로젝트 만드는 명령어 npx create-react-app 프로젝트명 --template typescript App.tsx 파일을 열어보면 App 함수(컴포넌트)의 return 값이 JSX이다. 해당 컴포넌트의 타입에는 ' React.FC ' 타입을 주면 된다. (react function component 타입) const App: React.FC = () => { return ( ); }; App : React.FC import React from "react"; import logo from "./logo.svg"; import "./App.css"; import Store from "./Store"; let data = { name: "누나네 식당", category..

rest 파라미터 rest 파라미터에도 타입지정이 가능하다. * rest 파라미터란? 함수를 만들었는데 함수 안에 들어올 인자의 갯수가 정해지지 않았을 때 들어온 인자들을 배열로 모아서 처리하는 방법으로 여러 인자들을 배열로 묶어서 사용할 수 있다. ' ... ' 연산자를 사용한다. function 함수(...a) { console.log(a); } 함수(1, 2, 3, 4); 출력해보면 배열에 담겨있다. 그럼 rest 파라미터 타입지정은 어떻게? 항상 배열 [ ] 안에 담겨서 저장되므로 array로 타입지정! function 함수(...a : Number[]) { console.log(a); } 함수(1, 2, 3, 4); * 여기서 헷갈리는 ' ... ' 의 용도.... 1. 함수 안에 쓰면 → re..

Spread Operator 괄호를 제거해주는 연산자로 ' ... ' 점 3개만 붙이면 spread operator 문법이다 var arr = ["hello", "world"]; console.log(...arr); // hello world 대괄호가 제거되고 hello world 만 출력된다. var word = "가나다라"; console.log(...word); // 가 나 다 라 문자가 한글자씩 출력된다. spread operator 문법은 array, object 합칠 때, 복사할 때 매우 자주 사용된다. array 합치기 var a = [1, 2, 3]; var b = [1, 4]; var c = [...a, ...b]; console.log(c); // [ 1, 2, 3, 1, 4 ] 두 배..

interface 키워드 타입을 변수에 담아서 쓰고 싶을 때 type 키워드를 사용한다. type 타입변수명 = string; object인 경우는 type 키워드 써도되고 interface 라는 키워드를 써도된다. type Square = {color : string, width : number} let 네모 : Square = {color : 'red', width:100} interface Square { color: string; width: number; } let 네모: Square = { color: "red", width: 100 }; interface 키워드 쓰는 경우 등호 ' = ' 는 필요 없다. class 만드는 문법이랑 비슷하..

class에 대한 기억을 더듬어 보면 object 복사 기계라고 할 수 있다. constructor 함수를 사용해서! class Car { model: string; price: number; constructor(이름: string, 가격: number) { this.model = 이름; this.price = 가격; } tax(): number { return this.price / 10; } } let 카푸어 = new Car("소나타", 3000); class에서는 type을 constructor 보다 위에서 지정해줘야 this.model에서 가져다 쓸 수 있다. constructor의 파라미터 type도 지정가능하다. constructor의 return 값은 type 지정할필요 없음 ( Car로..

narrowing narrowing이란 애매한 변수의 타입의 범위를 좁혀나가는 것을 의미한다. 안녕하세요 링크 버튼 기존 js에서 id가 title인 태그 안의 글자를 바꾸고싶으면? let 제목 = document.querySelector("#title"); 제목.innerHTML = "반가움"; querySelector로 요소 찾고 innerHTML으로 바꿔주면 된다. 근데 에러남잼 querySelector로 찾은 요소는 ' Element | null ' 타입이기 때문에 querySelector를 사용해서 찾은 요소를 사용할 때는 ' null ' 체크를 해서 해당 요소가 찾아진 경우에만 사용하는 것이 안전하다. 이때 ' null ' 인지 아닌지 if문으로 타입을 확인해서 사용하는걸 narrowing 한..

함수에 type alias 지정하기 function 함수(a : string) : number{ } 함수에 타입 지정하는 방법은 코드가 너무 길어진다. 너무 길고 복잡할 땐 함수타입도 type alias로 저장해서 쓸 수 있음 파라미터는 문자로 받고 숫자를 return 하는 타입을 만들고 싶으면 type 함수타입 = ( a : string ) => number 화살표 함수에 넣으면 된다. 만든 타입을 함수에서 사용하려면? 함수를 만들 때 함수 표현식으로 만들어서 함수명 옆에 타입을 넣어줘야 한다. *함수 표현식 : 변수에 함수를 할당하는 방식으로 함수 정의 let 함수명 = function( ){ } let 함수 : 함수타입 = function (){ } * 함수 만드는 법 //함수 표현식 let 함수 ..

Literal types 변수에 뭐가 들어올지 더 엄격하게 관리 가능 자동완성 힌트 있음 let 이름 : string; 위의 타입보다 더 엄격하게 타입 지정이 가능하다. ex) kim이라는 문자만 들어올 수 있다~라고 지정 가능 let 이름 : "kim"; 타입 넣을 자리에 원하는 문자 or 숫자 등을 넣으면 된다. 이름이라는 변수엔 kim 이라는 문자만 들어올 수 있음 function 함수( a : 'hello') : (1 | 0) { return 1; } 위의 함수 실행시키려면 파라미터 값에 무조건 hello만 들어와야하고 return되는 값은 1 or 0 이다 Lieral type의 문제점 var 자료 = { name : 'kim' } function 내함수(a:"kim"){ } 내함수(자료.nam..