Programmers Office

今度はTypescript

https://github.com/gothinkster/realworld-starter-kit

Part 1 : Introduction and Vue CLI Setup

$ vue create realworld-vue-ts

vue-class-component

create component の代わりに@Component

vue-property-decorator

@Propなど

vuex-module-decorators

@module

$ yarn serve

今回はyarn派なんですね

$ yarn add vue-property-decorator
$ yarn add vuex-module-decorators

Part 2 : Templates and Styling

router.ts がなくなっていて、router/index.ts

VSCode command + D で複数選択

Part 3 : Vuex and API Access

https://github.com/gothinkster/realworld/tree/master/api

json to ts

https://jvilk.com/MakeTypes/

$ yarn add axios

axios npm

JWT JSON Web Token

やべえ、何一つわからない

export async function loginUser(user: UserSubmit): Promise<UserResponse | undefined> {
    try {
        const response = await axios.post('/users/login', {
            user
        })
        return (response.data as UserResponse)
    } catch (e) {
        console.error(e)
    }
}

Promise<>
| undefined
as UserResponse
console.error

MutationAction

https://github.com/championswimmer/vuex-module-decorators{.aioseop-link}

mutate　変異する
自動的にmutateする

vue.config.js

dynamic: true

Property ‘login’ does not exist on type ‘VueConstructor’.
import users from ‘@/store/modules/users.vue’;
import users from ‘@/store/modules/users’;

baseURL
を使えていない
POST http://localhost:8080/users/login 404 (Not Found)
いったん
const response = await axios.post(‘https://conduit.productionready.io/api/users/login’, {

Error: Request failed with status code 422
at createError (createError.js?2d83:16)
at settle (settle.js?467f:17)
at XMLHttpRequest.handleLoad (xhr.js?b50d:61)

POSTMAN
{
“errors”: {
“email or password”: [
“is invalid”
]
}
}

@Mutation
@Action

もう少し進めてみる

・・・と思いましたが、もう少し初心者向けから出直してきます。