봉보로봉봉

keyof keyof를 사용하면 인터페이스의 key들을 가져올수있다. interface User { name : string; age : number; hobby : string; gender : 'm' | 'f' | 'etc'; } type Userkeys = keyof User; // name, age, hobby, gender 그리고 이렇게 사용할 수 있다. interface User { name : string; age : number; hobby : string; gender : 'm' | 'f' | 'etc'; } type Userkeys = keyof User; // Userkeys에 없기때문에 에러 const uk1 : Userkeys = ''; // Userkeys에 있기때문에 가능 co..

이렇게 함수가 인자로 받는 타입이 적으면 하나하나 적어 줄 수 있겠지만, function getSize(arr : number[] | string[]) : number { return arr.length } const arr1 = [1,2,3] const arr2 = ['1','2','3'] getSize(arr1) getSize(arr2) 여러개라면 하나하나 적어주기도 힘들고 코드가 길어져 가독성이 떨어질 것이다. function getSize(arr : number[] | string[] | boolean[] | object[]) : number { return arr.length } const arr1 = [1,2,3] const arr2 = ['1','2','3'] const arr3 = [tru..

클래스를 이렇게 선언해주면 될 것 같지만 this.color가 없다고 에러가 난다. class Car { constructor(color : string){ // 에러 this.color = color; } start() { console.log('start') } } 그럴 때는 멤버변수를 선언해주면 된다. class Car { color : string; constructor(color : string){ this.color = color; } start() { console.log('start') } } 접근 제한자나 readonly 키워드를 사용해 멤버 변수를 선언하지 않는 다른 방법도 있다. // public class Car { constructor(public color : string){ t..

이렇게 선언했을 때 user1은 타입이 Mike가 되고 user2는 string이 된다. const user1 = 'Mike'; let user2 = 'Tom'; 그래서 user2에 숫자를 할당하려고 하면 에러를 띄운다. 타입스크립트가 user2는 string이라고 추론했기 때문이다. const user1 = 'Mike'; let user2 = 'Tom'; // 에러 user2 = 1; 여러 개를 쓰고 싶을 때는 명시적으로 타입을 정해주면 된다. const user1 = 'Mike'; let user2 : string | number = 'Tom'; // 가능 user2 = 1; 리터럴 타입 리터럴 타입을 사용하면 원하는 값만 들어가게 할 수 있다. type을 선언하고 이용하면 된다. 그럼 해당 타입에서..

함수 인자의 타입 함수의 인자도 타입을 정해줄 수 있으며 ?를 사용해 옵션을 넣어줄 수 도 있다. 이렇게 적으면 return 값을 적지않아도 타입스크립트가 알아서 string으로 추론해준다. function sayHello(name? : string) { return `Hello ${name || 'world'}` } 위 함수는 이렇게 쓸 수도 있다. function sayHello(name = 'world') { return `Hello ${name}` } 인자를 여러개 받을 때도 옵션으로 넣어 줄 수 있다. function sayHello(name : string, age? : number) { if (age !== undefined) { return `Hello ${name}. you are ${a..

프로퍼티에 타입을 정해서 객체를 정의하고자 할때 인터페이스를 사용한다. 인터페이스에서 정해준 타입이 아닌 값을 넣어주려고 해도 에러가 나고, 인터페이스에 있는 모든 프로퍼티를 다 넣어주지 않아도 에러가 난다. interface User { name : string, age : number } let person : User = { name : 'mike', age : 60 } interface User { name : string, age : number } // 에러 let person1 : User = { name : 'mike', age : '60살' } // 에러 let person2 : User = { name : 'mike', } interface외에 새로운 속성을 추가하려고 하면 에러가 발생..

타입스크립트 플레이그라운드 타입 정해주기 타입은 : 을 사용해서 옆에 자료형을 적어주면 된다. 배열은 타입을 정해주는 2가지 방법이 있다. let name : string = 'bong'; let num : number = 1; let numArr : Array = [1, 2, 3]; // or let numArr : number[] = [1, 2, 3]; 튜플 (Tuple) 배열의 형태와 같지만 순서에 따라 타입을 정해 줄 수 있다. let person[string, number]; // 가능 person = ['bong', 1]; // 불가능 person = [1, 'bong']; void 함수에서 아무것도 반환하지 않을 때 사용 function sayHello () : void { console.l..

npm 설치 npm install --save styled-components import import styled from 'styled-components' vscode 익스텐션 설치 vscode-styled-components (코드 컬러 색상) styled-components-snippets (코드 스니펫) 파일분리 스타일 컴포넌트 코드와 리액트 컴포넌트 코드가 한 파일에 같이 있어서 길어진다면 파일 분리를 할 수도 있다. // Components.styled.js import styled from 'styled-components'; export StyledDiv = styled.div` background-color: red; ` // Components.js import * S from '...