TypeScript15 [Vue.js/Typescript] 8. Axios, Mutation, Action 이번에는 Api 통신으로 Vuex의 State 값을 갱신하는 것까지 해보자. Api 통신은 https://reqres.in 요 사이트를 이용한다. Axios $ npm install --save-dev axios Axios 설치 & 의존성 추가. reqres 사이트에서 제공하는 api중 위 API를 사용해보자. // src/types/user.ts export interface UserResponse { data: User; } export interface User { id: number; email: string; first_name: string; last_name: string; avatar: string; } 응답값을 보고 응답값에 맞는 인터페이스를 만든다. // src/api/reqres.ts.. 2019. 8. 15. [Vue.js/Typescript] 7. Props, Emit 이전까지는 Vue component 하나를 html, ts 파일 2개로 나누어서 관리했다. 컴포넌트 하나를 추가하려면 폴더 하나에 2개의 파일을 넣으려니 관리가 어렵다는 생각이 든다. (vue는 컴포넌트 단위 프레임워크인데 컴포넌트 하나 당 너무 많은 파일이 생성됨.) 그래서 이번부터는 vue 파일 하나(SFC)로 관리하기로 했다. // src/vueShilms.d.ts declare module '*.vue' { import Vue from 'vue'; export default Vue; } typescript 컴파일러가 vue파일을 인식할 수 있게 위 파일을 추가한다. 참고 깃허브 - add vue SFC setting 컴포넌트들은 각자 데이터를 가지고 있다. 컴포넌트만의 데이터이기 때문에 다른 컴포.. 2019. 8. 14. [Vue.js/Typescript] 6. ES Lint [Github - tslint issues] Roadmap: TSLint -> ESLint Typescript 용 Lint인 TSLint가 deprecated 되고 ESLint 로의 마이그레이션을 진행 중이다. TSLint 대신 ESLint 를 프로젝트에 적용해보자. 이미 TSLint 를 사용하고 있다면 TSLint to ESLint RoadMap (rules, Functionality ...) 이 글에 TSLint rules와 ESLint rules 매칭을 잘 해두었기 때문에 참고하면 좋을 듯 하다. $ npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint, @typescript-esl.. 2019. 8. 10. [Vue.js/Typescript] 5. Popup 모달(Modal)이 아닌 window.open으로 새 창을 띄우는 팝업 예제이다. 데이터 전달 방법 앱(부모) -> 팝업 : Url path, query param 팝업 -> 앱(부모) : vuex mutation 팝업에서 앱으로 데이터를 전송할 때 데이터 버스를 쓸까 하다가 그냥 기존에 세팅되어 있는 vuex를 쓰기로 했다. Vuex 데이터 추가 // src/store/modules/popup.ts export const namespaced = true; interface State { name: string; } export const state: State = { name: "default name" }; export const mutations = { SET_NAME(state: State, na.. 2019. 8. 8. [Typescript] 개발 환경 만들기 typescript -> javascript 컴파일 해서 결과 확인하는 용도의 개발환경 만들기 $ npm install -g typescript typescript 먼저 설치. - test.ts - tsconfig.json 파일은 위에 2개만 만들었다. // tsconfig.json { "compilerOptions": { "outDir": "./out/", "target": "es6", "strictNullChecks": true } } tsconfig는 위와 같이 적어두었다. typescipt의 컴파일 옵션만 간단하게 설정했는데 outDir 은 컴파일 결과(.js 파일들)를 어느 폴더에 저장할지에 대한 설정이다. target 에는 컴파일 한 javascript의 버전을 명시한다. strictNullC.. 2019. 7. 24. [Typescript] 얕은 복사 // test.ts const srcMember = { name: "member" }; const destMember = srcMember; destMember.name = "change"; console.log(`srcMember : ${srcMember.name}`); console.log(`destMember : ${destMember.name}`); ts 파일 작성 srcMember라는 객체를 하나 만들고 destMember에 srcMember를 복사한뒤(=) destMember의 name만 변경 $ tsc test.ts 컴파일 // test.js const srcMember = { name: "member" }; const destMember = srcMember; destMember.name .. 2019. 7. 24. 이전 1 2 3 다음
