3장 타입 추론-1 타입스크립트는 타입 추론을 적극적으로 수행합니다. 타입 추론은 수동으로 명시해야하는 타입 구문의 수를 엄청나게 줄여주기 때문에, 코드의 전체적인 안정성이 향상됩니다. item 19 : 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입스크립트가 타입을 추론할 수 있다면 명시적 타입 구문을 작성하지 않는 게 좋습니다. let x: number = 12; // 비생산적이며 형편없는 스타일 let x = 12; // 이렇게만 해도 충분 편집기에서 x에 마우스를 올려보면 타입이 number로 이미 추론되어 있음을 확인할 수 있습니다. 만약 타입을 확신하지 못한다면 편집기를 통해 체크하면 됩니다. 더 복잡한 객체도 가능합니다. // 거추장스러움 const person: { number: st..

Options API => Composition API: Lifecycle Options API | Composition API beforeCreate, create | Not Needed | (setup replaces thes hooks) beforeMount, mounted | onBeforeMount, onMounted beforeUpdate, update | onBeforeUpdate, onUpdated beforeUnmount, unmounted | onBeforeUnMount, onUnmounted

Options API => Composition API Options API | Composition API data() {...} | ref(), reactive() methods: {doSmth() {...}} | function doSmth() {...} computed: {val() {...}} | const val = computed() watch: {...} | watch(dep, (val, oldV) => {}) provide: {...} / inject: [] | provide(key, val), inject(key)

Router SPA 하나의 HTML 파일에서 자바스크립트로 어떤 것이 보일지를 컨트롤한다. 페이지 이동이 일어날 때에도 URL이 변경되는 것이 아니라 화면만 바뀌게 되는데 이 경우 현재 페이지의 정보를 알아낼 수 없으므로 문제가 된다. 따라서 URL이 변경될 때 하나의 SPA에서 해당 URL이 나타내는 페이지를 라우팅시켜줘야하고, 이 때문에 라우팅이 필요하다. vue-router npm 설치 후 라우터를 설정한다. //main.js import { createApp } from 'vue'; import {createRouter, createWebHistory} from 'vue-router'; import App from './App.vue'; import Te..

Vuex global state를 관리하는 라이브러리 local state는 하나의 컴포넌트에만 영향을 미치지만 global state는 어플리케이션 전체에 영향을 미칠 수 있다. why global state를 관리하는 것은 어려울 수 있다. 하나의 컴포넌트에 너무 많은 로직과 데이터를 포함하게 된다. 데이터의 변화를 예측할 수 없다. 에러를 일으킬 수 있고 추적이 어렵다. Using store main.js에 createStore를 통해 store를 생성한 후 app에 연결한다. import { createApp } from 'vue'; import { createStore } from 'vuex'; import App from './App.vue'; con..

제네릭 내장 제네릭 & 제네릭이란? 제네릭 타입이란 타입스크립트에 내장된 타입이며 다른 타입과 연결된다. 제네릭 타입을 사용하면 보다 나은 타입 안정성을 확보할 수 있다. const names: Array = []; //string[] names[0].split(' '); const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(10); }, 2000); }); promise.then(data => { data.split(' '); // error : Property 'split' does not exist on type 'number'. }) Generic Functions 제네릭 함수를 직접 만들어보자. 두 개의 객체를..

고급 타입 intersection Types 두 가지 타입을 교차해서 사용할 때 사용한다. type Admin = { name: string; privileges: string[]; }; type Employee { name: string; startDate: Date; } type ElevatedEmployee = Admin & Employee; const e1: ElevatedEmployee = { name: 'Max', privileges: ['create-server'], startDate: new Date() } Type Guards 유니언 타입을 도와 특정 타입을 발라내는 역할을 한다. 유연성을 가지는 건 좋지만 런타임 시 정확히 어떤 타입을 얻게 될지 알아야하는 경우가 많기 때문이다. typ..

인터페이스 인터페이스 인터페이스는 객체의 구조를 정의할 수 있게 해준다. 따라서 해당 구조를 가져야하는 객체에 대한 타입을 확인하는 용으로 사용할 수 있다. interface Person { name: string; age: number; greet(pharse: string): void; } let user1: Person; user1 = { name: 'Max', age: 30, greet(pharse: string) { console.log(`${pharse} + ' ' + ${this.name}`); } }; user1.greet('Hi'); 왜 사용할까? 인터페이스와 사용자 정의 타입은 완전히 같지 않다. 인퍼테이스는 객체의 구조를 설명하기 위해서만 사용한다. 인터페이스를 자주 사용하는 이유는 ..