JS' 공부흔적

JSON.parse(localStorage.getItem("treasureList")); 위와 같이 localStorage에서 데이터를 불러온 후 파싱해주는 과정에서 아래와 같은 에러가 발생했다. string | null 타입은 string 타입에 할당할 수 없다는 뜻이다. localStorage는 string이나 null 타입을 반환하는데, JSON.parse는 string을 필요로 하기 때문에 발생하는 에러이다. 따라서 JSON.parse 안의 값이 항상 string이 되도록 수정해줘야 한다. JSON.parse(localStorage.getItem("treasureList") || "{}"); 이렇게 localStorage에서 불러온 값이 null이라면 "{}"라는 string 값으로 대신하면서 에..

Typescript에서의 클래스에는 C++, 자바처럼 다른 객체지향 언어와 마찬가지로 접근 제한자가 존재한다. public 해당 클래스의 내부와 자식 클래스 및 클래스 인스턴스에서도 모두 접근 가능하다. class Car { name: string = "car"; //name 앞에 public을 명시하지 않아도 default가 public임 color: string; constructor(color: string) { this.color = color; } } class BMW extends Car { constructor(color: string) { super(color); //파생 클래스는 무조건 super를 써야함 } showName() { console.log(this.name); //publi..

interface에 관한 글을 쓰면서 함수에 대한 코드를 잠깐 언급했었는데 이번 글에서도 다뤄보고자 한다. 이미 우리가 알고 있는 함수 그대로이다. Typescript에서는 함수에도 타입을 선언할 수 있다. 리턴값이 없다면 타입은 void가 된다. function test(name: string, age: number): string { if (age === undefined) return `name : ${name}`; else return `name: ${name}, age: ${age}`; } console.log(test('jun')); //error console.log(test('jun', 25)); // name: jun, age: 25 위의 함수는 name과 age 두 개의 변수를 받고 리..

리터럴 타입 리터럴 타입은 정해진 값을 가지는 타입이다. JS에서 var, let을 사용하면 값의 변경이 가능하지만 const를 사용하면 값의 변경이 불가능하다. 이러한 특성을 가지는 타입을 리터럴 타입이라고 한다. 아래와 같이 type을 선언해주면 정해진 값 내에서만 선택이 가능하다. type Job = "student" | "teacher" | "developer"; interface Person { name: string; job: Job; } const jun: Person = { name: 'jun', job: 'developer', // student, teacher, developer 중에서만 선택 가능 } //숫자형에도 동일하게 적용 가능 type num = 1 | 2 | 3; interf..

상호 간에 정의한 약속 혹은 규칙을 의미하며, 객체의 모양을 명시적으로 나타내기 위해 사용한다. let user:object; user={ name:'aa', age:30 } console.log(user.age); //error 위와 같이 사용하게 되면 property가 존재하지 않는다면서 에러가 발생한다. 따라서 아래와 같이 interface를 사용하여 객체의 모양을 나타내야 한다. interface User { name:string; age:number; } let user:User; user={ name:'aa', age:30 } console.log(user.age); interface 내에서 정의해준 것을 모두 선언해주지 않으면 에러가 발생한다. Optional Property interfac..

기본적으로 Javascript+타입으로 쓰인다. 아래와 같이 Typescript에서는 변수의 자료형을 함께 선언해주고, 선언된 자료형과 다른 타입의 값이 들어오면 에러 표시가 난다. //javascript let user; user=3; //typescript let user: string; user=3; //error Typescript는 기본적으로 아래의 Javascript의 기본 자료형을 포함한다. number string boolean null (null이라는 값이 할당된 상태 -> object type) undefined (변수가 선언된 후 아무 값도 할당되지 않은 상태 -> undefined type) symbol(ES6에서 추가됨) Array : Object 그리고 추가적으로 몇 가지 타입이..