Bin's Blog

📚 타입스크립트로 HTML 변경과 조작할 때 주의점 👉 h4 안의 글자를 바꿔보자 안녕하세요 👉 selector로 html을 찾으면 타입이 Element | null이기 때문에 html을 찾지 못하면 null이 되기 때문에 이 부분을 해결해줘야한다. 1️⃣ 해결책 (Type Narrowing) let 제목 = document.querySelector("#title"); if (제목 !== null) { 제목.innerHTML = "반가워요" } 2️⃣ 해결책 (instanceof) if (제목 instanceof Element) { 제목.innerHTML = "반가워요" } 3️⃣ 해결책 (as) // 이 요소는 element라고 사기쳐주세요 // null이 들어와도 element type가능 // 비상..

1️⃣ 함수에 type alias 지정하는 법 👉 arrow function 활용 👉 예시(함수 파라미터에는 string만 들어오고 return은 number 형태만 올 수 있다. ) type 함수타입 = (a :string) => number; let 함수 :함수타입 = function () { } 2️⃣ method에 type alias 지정하는 법 👉 예시 type 회원 = { name : string, age : number, plusOne : (x :number) => number, changeName : () => void, } let 회원정보 :회원 = { name : 'kim', age : 30, plusOne (x){ return x + 1 }, changeName : () => { co..

❗️❗️ 오늘은 React에서 TypeScript를 쓰는 법에 대해서 알아보겠다. 👉 기본설치 npx create react-app 프로젝트명 --template typescript 👉 기존 프로젝트에 typeScript를 더하고 싶을 때 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 👉 일반변수, 함수 만들 때 타입 지정을 잘하자 👉 JSX를 표현하는 타입(JSX.Element) let 박스 :JSX.Element = ; 👉 component 만들 때 타입지정은 파라미터 & return 값 function Profile() :JSX.Element{ return ( 프로필입니다. ) } 👉 compon..

🤔 Literal Types 👉 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입을 literal type 이라고 부른다. 👉 예시 let 이름 : "kim" 👉 이렇게 하면 이름이라는 변수에는 무조건 kim이라는 글자만 들어올 수 있다. 👉 type이 자동으로 완성된다. 👉 literal type은 const 변수의 업그레이드 버젼이라고 보면 되는데 const 변수는 값을 바꿀 수 없는 변수다. 👉 그래서 변하는 중요한 정보를 저장하고 싶을 땐 const가 무쓸모다. 예를 들어, 변수가 "kim" 또는 "park"만 가질 수 있는 이런 식의 엄격한 변수는 못 만든다. 👉 그럴 때 아래처럼 literal type 쓰면 된다.(이런 식의 문법은 자바스크립트에 없다) const 이름 = "kim" | "p..

type Alias //영어 대문자 국룰 type AnimalType = {name : string, age: number} let 동물 : AnimalType = { name : "kim", age : 20} // const 변수는 등호로 재할당만 막는 역할이다 // const로 담은 Object 수정은 자유롭게 가능 const 출생지역 = { region : "seoul" }; 출생지역.region = "busan" //readonly 쓰면 object 자료 수정도 막을 수 있다. // 수정하면 에러가 뜬다. // object 속성 안에도 ? 사용가능 type Girlfriend = { readonly name: string age? : number } // 타입스크립트 에러는 에디터 & 터미널에서만..

Narrowing Type이 아직 하나로 확정되지 않았을 경우 Type Narrowing 써야한다. 타입을 정한다. typeof 연산자 활용 어떤 변수가 타입이 아직 불확실하면 if 문 등으로 Narrowing 해줘야 조작가능 (주의) if문 썼으면 끝까지 써야 안전 else, else if 안쓰면 에러로 잡아줄 수도 있다. Narrowing으로 판정해주는 문법들(현재 변수의 타입이 뭔지 특정지을 수 있기만 하면 다 인정해준다.) typeof 변수 속성명 In 오브젝트자료 인스턴스 instanceof 부모 function 함수(a : string | number) { if (typeof a === 'string'){ return a + "1" } else { return + 1 } 함수(123); Ass..

함수란 길고 복잡한 코드 한 단어로 축약 가능 숫자 집어넣으면 다른 숫자 나오는 블랙박스 역할 파라미터 (숫자 input역할) return할 값(output되는 값 = 뱉어주세요) 파라미터 만드는게 변수 작명이랑 똑같음 변수만 만들면 :any 자동할당된다. 함수는 파라미터, return 값 타입지정가능 // 파라미터로 들어올 수 있는 수는 숫자 // return 되어야하는 값도 숫자 function 함수(x : number) :number { return x * 2 } 함수(4) void 타입 void 타입(텅 비었다는 뜻)을 쓰면 실수로 뭔가 return하는 것을 사전에 막을 수 있다. function 함수(x : number) :void { return x * 2 } 옵션파라미터 타입스크립트가 기존 ..

타입을 미리 정하기 애매할 때 Union Type(타입 2개 이상 합친 새로운 타입 만들기) // Union Type(타입 2개 이상 합친 새로운 타입 만들기) let 회원 :(number | string | boolean) = 123; 회원 = 123; // 숫자 or 문자가 가능한 array 타입지정 let 회원들 : (number | string)[] = [1, "2", 3]; // 숫자 or 문자가 가능한 object 타입지정 let 오브젝트: {data : string | number} = { data : '123' }; // 왜 타입맞는데 +1이 안 되니? // 타입은 엄격한 거 좋아한다고 했다. // union type은 허용하지 않는다. (새로운 타입을 만드는 거니까) // string ..

1. 타입스크립트란? 기존 자바스크립트는 Dynamic Typing이 가능해서 5 - "3"을 하면 문자가 숫자로 바뀌어서 5-3= 2가 된다. 프로젝트가 크면 단점이다. 코드 길게 짤 땐 자유도 & 유연성은 떨어진다. TypeScript는 타입 엄격히 검사해준다. TypeScript는 에러메시지 퀄리티가 오진다. 그냥 코드 에디터 부가기능 역할로 봐도 된다. 2. 기본타입 // 문자 let 이름 :string = "kim"; // 숫자 let 나이 :number = 30; // 불린 let 밥은먹었니 :boolean = true; // 값이 없어 let 낼밥은 :undefined = undefined; // 값이 비어있어 let 용돈은 :null = null; // 배열 사용시 왼쪽에 배열에 들어갈 타..