이렇게 함수가 인자로 받는 타입이 적으면 하나하나 적어 줄 수 있겠지만, 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..
지난 번에 저장한 데이터를 보여주기위해서 데이터를 가져오는 코드를 썼다. 나는 데이터 전체를 한번만 가져오면 됐기 때문에 getDocs를 사용했다. 참고 필요한 요소 import 하기 import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore'; 파이어베이스 저장소를 불러온다. const firebaseConfig = { apiKey: import.meta.env.VITE_FIREBASE_API_KEY, authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN, projectId: import.meta.env.VITE_..
클래스를 이렇게 선언해주면 될 것 같지만 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..
저번에 만들었던 토이 프로젝트에 페이지를 더 추가하고 버그를 고쳤다! 반응형 깨지는 부분 수정 message 페이지 추가 HashRouter로 라우터 변경 저번에는 빨리 배포하느라고 반응형을 추가했음에도 특정 디스플레이에서 깨짐이 있었다. (내 폰... 아이폰 mini 12.. 🥲) 그래서 반응형을 수정했다. 링크를 공유했을 때 썸네일도 뜨도록 index.html에 meta태그도 추가했다. 작성한 메세지를 볼 수 있도록 하는 message 페이지를 추가했다. 파이어베이스에 추가했던 데이터들을 받아와서 작성자의 이름과 메세지들을 보여주는 페이지이다. 메세지가 있는데 작성자의 이름이 빈 문자열이라면 익명이라는 이름으로 변경하여 출력했고, 메세지가 없는 사람들은 보이지 않도록 했다. 지금은 내 친구들의 메세지..
프로퍼티에 타입을 정해서 객체를 정의하고자 할때 인터페이스를 사용한다. 인터페이스에서 정해준 타입이 아닌 값을 넣어주려고 해도 에러가 나고, 인터페이스에 있는 모든 프로퍼티를 다 넣어주지 않아도 에러가 난다. 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..
- Total
- Today
- Yesterday
- map
- javascript
- 자바스크립트
- 리액트
- Python
- 제이쿼리
- Til
- 코드잇
- 회고
- 파이썬
- 스파르타코딩클럽
- 타입스크립트
- js
- Typescript
- React
- vue
- 코딩앙마
- git
- 드림코딩
- 비주얼스튜디오코드
- 구름에듀
- scss
- 김버그
- CSS
- 저스트코드
- 제로초
- 깃
- html
- vscode
- TS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |