wejs22.pdf

Transcript

1. ©2018 Wantedly, Inc. Practical Typed React App We Are JavaScripters!

   @22nd 23.July.2018 - Kodai Nakamura

2. ©2018 Wantedly, Inc. Practical Typed React App We Are JavaScripters!

   @22nd 23.July.2018 - Kodai Nakamura

3. ©2018 Wantedly, Inc. Kodai Nakamura Github: @kdnk Twitter: @kdnk__ Engineer

   at Wantedly, inc. ৽ଔ1೥໨ JavaScript, TypeScript, React, Rails, Ruby

4. ©2018 Wantedly, Inc. ձࣾϖʔδϦχϡʔΞϧ ‣ TypeScriptಋೖ ‣ React / Redux

   ͳWebΞϓϦ #BDLHSPVOE

5. ©2018 Wantedly, Inc. $PNQPOFOUͷܕఆٛΛͲ͏͢Δ͔

6. ©2018 Wantedly, Inc. ‣ ϖʔδ͝ͱʹඞཁͱͳΔϑΟʔϧυ͸ҧ͏ - ͋ΔϖʔδͰ͸company.name͚ͩɺผͷϖʔδͰ͸company.url΋ཉ͍͠ͱ͔ ‣ ϖʔδ͝ͱʹඞཁͳϑΟʔϧυͷΈΛฦ͢API͕͋Δ ‣

   Container, ComponentΛෳ਺ͷϖʔδͰ࢖͍ճ͍ͨ͠ ‣ RailsͷmodelʹରԠ͢ΔܕΛWtdModelsͱͯ͠ఆٛ લఏ ϖʔδ͝ͱʹܕఆ͕ٛҰͭͩͱContainer, Component͸࢖͍ճͤͳ͍ Container, ComponentͰຊ౰ʹඞཁͳ΋ͷ͚ͩΛఆ͍ٛͨ͠

7. ©2018 Wantedly, Inc. 8UE.PEFMT ‣ API͸active_model_serializersʹґଘ - SerializerʹରԠͨ͠ܕΛఆٛ υϝΠϯ಺Ͱڞ௨ͷܕΛఆٛ declare

   namespace WtdModels { export interface Company { id: number; name: string; // ... projects: HasMany<Project>; } } declare namespace WtdModels { export interface Post { id: number; category_cd: number; title: string | null; created_at: Date | null; published_at: Date | null; // ... liked_status: HasOne<LikedStatus>; tagged_users: HasMany<User>; } }

8. ©2018 Wantedly, Inc. 8UE.PEFMT ‣ API͸active_model_serializersʹґଘ - SerializerʹରԠͨ͠ܕΛఆٛ declare namespace

   WtdModels { export interface Company { id: number; name: string; // ... projects: HasMany<Project>; } } declare namespace WtdModels { export interface Post { id: number; category_cd: number; title: string | null; created_at: Date | null; published_at: Date | null; // ... liked_status: HasOne<LikedStatus>; tagged_users: HasMany<User>; } } υϝΠϯͰڞ௨ͷܕΛఆٛ

9. ©2018 Wantedly, Inc. 8UE.PEFMT ‣ API͸active_model_serializersʹґଘ - SerializerʹରԠͨ͠ܕΛఆٛ υϝΠϯͰڞ௨ͷܕΛఆٛ declare

   namespace WtdModels { export interface Company { id: number; name: string; // ... projects: HasMany<Project>; } } declare namespace WtdModels { export interface Post { id: number; category_cd: number; title: string | null; created_at: Date | null; published_at: Date | null; // ... liked_status: HasOne<LikedStatus>; tagged_users: HasMany<User>; } } 3BJMTͷ4FSJBMJ[FSʹఆٛ͞Ε͍ͯΔ΋ͷʹରԠ͍ͯ͠Δ

10. ©2018 Wantedly, Inc. ͸͡Ίʹͨ͜͠ͱ $POUBJOFSͰͷ4UBUFͷܕఆٛ interface MappedProps { company?: Company;

    avatar?: Image; background?: Image; // ... isMember: boolean; } function mapStateToProps(state: RootState): MappedProps { return { company: state.companies.common.draftCompany, avatar: state.companies.common.draftCompanyAvatar, // ... isMember: isMemberSelector(state), }; }

11. ©2018 Wantedly, Inc. ͸͡Ίʹͨ͜͠ͱ $POUBJOFSͰͷ4UBUFͷܕఆٛ interface MappedProps { company?: Company;

    avatar?: Image; background?: Image; // ... isMember: boolean; } function mapStateToProps(state: RootState): MappedProps { return { company: state.companies.common.draftCompany, avatar: state.companies.common.draftCompanyAvatar, // ... isMember: isMemberSelector(state), }; }

12. ©2018 Wantedly, Inc. ͸͡Ίʹͨ͜͠ͱ $POUBJOFSͰͷ"DUJPOͷܕఆٛ interface MappedActions { editModeStarted: typeof

    editModeStarted; editModeFinished: typeof editModeFinished; // ... pushState: typeof pushState; } function mapDispatchToProps(dispatch: Dispatch<RootState>): MappedActions { return bindActionCreators( { editModeStarted, editModeFinished, // ... pushState, }, dispatch ); }

13. ©2018 Wantedly, Inc. ͸͡Ίʹͨ͜͠ͱ $POUBJOFSͰͷ"DUJPOͷܕఆٛ interface MappedActions { editModeStarted: typeof

    editModeStarted; editModeFinished: typeof editModeFinished; // ... pushState: typeof pushState; } function mapDispatchToProps(dispatch: Dispatch<RootState>): MappedActions { return bindActionCreators( { editModeStarted, editModeFinished, // ... pushState, }, dispatch ); }

14. ©2018 Wantedly, Inc. ͸͡Ίʹͨ͜͠ͱ $POUBJOFSͰͷ"DUJPOͷܕఆٛ interface MappedActions { editModeStarted: typeof

    editModeStarted; editModeFinished: typeof editModeFinished; // ... pushState: typeof pushState; } function mapDispatchToProps(dispatch: Dispatch<RootState>): MappedActions { return bindActionCreators( { editModeStarted, editModeFinished, // ... pushState, }, dispatch ); } $POUBJOFS͝ͱʹ4UBUF
    "DUJPOͷܕΛఆٛ

15. ©2018 Wantedly, Inc. ͸͡Ίʹͨ͜͠ͱ $POUBJOFSͰͷ"DUJPOͷܕఆٛ interface MappedActions { editModeStarted: typeof

    editModeStarted; editModeFinished: typeof editModeFinished; // ... pushState: typeof pushState; } function mapDispatchToProps(dispatch: Dispatch<RootState>): MappedActions { return bindActionCreators( { editModeStarted, editModeFinished, // ... pushState, }, dispatch ); } *OUFSGBDFͷఆٛ͸4UBUF
    "DUJPOͱಉ͡
    $POUBJOFSΛ࡞Δͨͼʹ͜ΕΛ΍Δͷ͸ͭΒ͍

16. ©2018 Wantedly, Inc. $PNQBOZEUT ͸͡Ίʹͨ͜͠ͱ $PNQPOFOUͰͷ1SPQTͷܕఆٛ declare namespace WtdModels {

    export interface Company { id: number; name: string; company_name: string; // ... projects: HasMany<Project>; } } export type Company = WtdModels.Partial< WtdModels.Company, "company_name" | "background" | "name" | "short_location" | "mission_statement", { avatar: WtdModels.HasOne<Image>; } >;

17. ©2018 Wantedly, Inc. $PNQBOZEUT ͸͡Ίʹͨ͜͠ͱ $PNQPOFOUͰͷ1SPQTͷܕఆٛ
    8UE.PEFMT1BSUJBM͸5ZQF4DSJQUͷ1JDLͷΑ͏ͳ΋ͷ export type Company

    = WtdModels.Partial< WtdModels.Company, "company_name" | "background" | "name" | "short_location" | "mission_statement", { avatar: WtdModels.HasOne<Image>; } >; declare namespace WtdModels { export interface Company { id: number; name: string; company_name: string; // ... projects: HasMany<Project>; } }

18. ©2018 Wantedly, Inc. $PNQBOZEUT ͸͡Ίʹͨ͜͠ͱ $PNQPOFOUͰͷ1SPQTͷܕఆٛ
    8UE.PEFMT1BSUJBM͸5ZQF4DSJQUͷ1JDLͷΑ͏ͳ΋ͷ export type Company

    = WtdModels.Partial< WtdModels.Company, "company_name" | "background" | "name" | "short_location" | "mission_statement", { avatar: WtdModels.HasOne<Image>; } >; declare namespace WtdModels { export interface Company { id: number; name: string; company_name: string; // ... projects: HasMany<Project>; } }

19. ©2018 Wantedly, Inc. declare namespace WtdModels { export interface Company

    { id: number; name: string; company_name: string; // ... projects: HasMany<Project>; } } $PNQBOZEUT ͸͡Ίʹͨ͜͠ͱ $PNQPOFOUͰͷ1SPQTͷܕఆٛ
    8UE.PEFMT1BSUJBM͸5ZQF4DSJQUͷ1JDLͷΑ͏ͳ΋ͷ export type Company = WtdModels.Partial< WtdModels.Company, "company_name" | "background" | "name" | "short_location" | "mission_statement", { avatar: WtdModels.HasOne<Image>; } >; υϝΠϯͰڞ௨ͷܕ

20. ©2018 Wantedly, Inc. $PNQBOZEUT ͸͡Ίʹͨ͜͠ͱ $PNQPOFOUͰͷ1SPQTͷܕఆٛ
    8UE.PEFMT1BSUJBM͸5ZQF4DSJQUͷ1JDLͷΑ͏ͳ΋ͷ export type Company

    = WtdModels.Partial< WtdModels.Company, "company_name" | "background" | "name" | "short_location" | "mission_statement", { avatar: WtdModels.HasOne<Image>; } >; $PNQPOFOUʹඞཁͳϑΟʔϧυΛ͔͘ declare namespace WtdModels { export interface Company { id: number; name: string; company_name: string; // ... projects: HasMany<Project>; } }

21. ©2018 Wantedly, Inc. declare namespace WtdModels { export interface Company

    { id: number; name: string; company_name: string; // ... projects: HasMany<Project>; } } $PNQBOZEUT ͸͡Ίʹͨ͜͠ͱ $PNQPOFOUͰͷ1SPQTͷܕఆٛ
    8UE.PEFMT1BSUJBM͸5ZQF4DSJQUͷ1JDLͷΑ͏ͳ΋ͷ export type Company = WtdModels.Partial< WtdModels.Company, "company_name" | "background" | "name" | "short_location" | "mission_statement", { avatar: WtdModels.HasOne<Image>; } >; ͜ΕΛ$PNQPOFOU͝ͱʹ͔͘
    ͦ͏͢Ε͹ɺ$PNQBOZ͸$PNQPOFOUͰ࢖͏ϑΟʔϧυͷΈͷܕʹͳΔ

22. ©2018 Wantedly, Inc. declare namespace WtdModels { export interface Company

    { id: number; name: string; company_name: string; // ... projects: HasMany<Project>; } } $PNQBOZEUT ͸͡Ίʹͨ͜͠ͱ $PNQPOFOUͰͷ1SPQTͷܕఆٛ
    8UE.PEFMT1BSUJBM͸5ZQF4DSJQUͷ1JDLͷΑ͏ͳ΋ͷ export type Company = WtdModels.Partial< WtdModels.Company, "company_name" | "background" | "name" | "short_location" | "mission_statement", { avatar: WtdModels.HasOne<Image>; } >; ͜ͷఆٛΛ͢΂ͯͷ$PNQPOFOUʹॻ͘ͷ͸ͭΒ͍
    $PNQPOFOUʹͲͷϑΟʔϧυ͕ඞཁ͔ௐ΂Δͷ΋ͭΒ͍

23. ©2018 Wantedly, Inc. ܕͷఆٛΛָʹ͍ͨ͠

24. ©2018 Wantedly, Inc. վྑ൛ ‣ infer - TypeScript2.8Ͱೖͬͨ - Conditional

    TypeͰਪ࿦͞ΕͨܕΛ ܕͷύϥϝλͱͯ͠ར༻Ͱ͖Δ *OGFSSJOH
    XJUIJO
    $POEJUJPOBM
    5ZQFT JOGFS type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any; type FirstArg<T> = T extends (a1: infer A1, ...rest: any[]) => any ? A1 : never;

25. ©2018 Wantedly, Inc. վྑ൛ ‣ infer - TypeScript2.8Ͱೖͬͨ - Conditional

    TypeͰਪ࿦͞ΕͨܕΛ ܕͷύϥϝλͱͯ͠ར༻Ͱ͖Δ *OGFSSJOH
    XJUIJO
    $POEJUJPOBM
    5ZQFT JOGFS type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any; type FirstArg<T> = T extends (a1: infer A1, ...rest: any[]) => any ? A1 : never;

26. ©2018 Wantedly, Inc. վྑ൛ ‣ infer - TypeScript2.8Ͱೖͬͨ - Conditional

    TypeͰਪ࿦͞ΕͨܕΛ ܕͷύϥϝλͱͯ͠ར༻Ͱ͖Δ *OGFSSJOH
    XJUIJO
    $POEJUJPOBM
    5ZQFT JOGFS type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any; type FirstArg<T> = T extends (a1: infer A1, ...rest: any[]) => any ? A1 : never;

27. ©2018 Wantedly, Inc. վྑ൛ 4UBUF
    "DUJPOͰͷܕఆٛ function mapStateToProps(state: RootState): MappedProps

    { return { company: state.companies.common.draftCompany, avatar: state.companies.common.draftCompanyAvatar, // ... isMember: isMemberSelector(state), }; } interface MappedProps { company?: Company; avatar?: Image; background?: Image; // ... isMember: boolean; }

28. ©2018 Wantedly, Inc. վྑ൛ 4UBUF
    "DUJPOͰͷܕఆٛ function mapStateToProps(state: RootState): MappedProps

    { return { company: state.companies.common.draftCompany, avatar: state.companies.common.draftCompanyAvatar, // ... isMember: isMemberSelector(state), }; } ͜ͷؔ਺ఆٛʹରͯ͠ʜ

29. ©2018 Wantedly, Inc. վྑ൛ 4UBUF
    "DUJPOͰͷܕఆٛ function mapStateToProps(state: RootState): MappedProps

    { return { company: state.companies.common.draftCompany, avatar: state.companies.common.draftCompanyAvatar, // ... isMember: isMemberSelector(state), }; } type Props = OwnProps & ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>; ͜Ε͚ͩͰΑ͘ͳΔ

30. ©2018 Wantedly, Inc. վྑ൛ 8UE.PEFMT6OJPO 1SPQTͰͷܕఆٛ ‣ Union - جຊతʹ͸&ͱಉ͡

    - [ComponentName]ModelsΛ ֤ComponentͰఆٛ - ਌ComponentͰimportͯ͠ Union // CompanyCardLateral.tsx export interface CompanyCardLateralModels { Company: Company; } import CompanyCard, { CompanyCardModels } from "./CompanyCard"; import CompanyCardLateral, { CompanyCardLateralModels } from "./CompanyCardLateral"; type Company = WtdModels.UnionAll< WtdModels.Partial<WtdModels.Company, "id">, CompanyCardModels["Company"], CompanyCardLateralModels["Company"] >;

31. ©2018 Wantedly, Inc. վྑ൛ 8UE.PEFMT6OJPO 1SPQTͰͷܕఆٛ ‣ Union - جຊతʹ͸&ͱಉ͡

    - [ComponentName]ModelsΛ ֤ComponentͰఆٛ - ਌ComponentͰimportͯ͠ Union // CompanyCardLateral.tsx export interface CompanyCardLateralModels { Company: Company; } import CompanyCard, { CompanyCardModels } from "./CompanyCard"; import CompanyCardLateral, { CompanyCardLateralModels } from "./CompanyCardLateral"; type Company = WtdModels.UnionAll< WtdModels.Partial<WtdModels.Company, "id">, CompanyCardModels["Company"], CompanyCardLateralModels["Company"] >; ࢠ$PNQPOFOUͰ.PEFMTΛఆٛ

32. ©2018 Wantedly, Inc. վྑ൛ 8UE.PEFMT6OJPO 1SPQTͰͷܕఆٛ ‣ Union - جຊతʹ͸&ͱಉ͡

    - [ComponentName]ModelsΛ ֤ComponentͰఆٛ - ਌ComponentͰimportͯ͠ Union // CompanyCardLateral.tsx export interface CompanyCardLateralModels { Company: Company; } import CompanyCard, { CompanyCardModels } from "./CompanyCard"; import CompanyCardLateral, { CompanyCardLateralModels } from "./CompanyCardLateral"; type Company = WtdModels.UnionAll< WtdModels.Partial<WtdModels.Company, "id">, CompanyCardModels["Company"], CompanyCardLateralModels["Company"] >; ਌$PNQPOFOUͰJNQPSU

33. ©2018 Wantedly, Inc. վྑ൛ 8UE.PEFMT6OJPO 1SPQTͰͷܕఆٛ ‣ Union - جຊతʹ͸&ͱಉ͡

    - [ComponentName]ModelsΛ ֤ComponentͰఆٛ - ਌ComponentͰimportͯ͠ Union // CompanyCardLateral.tsx export interface CompanyCardLateralModels { Company: Company; } import CompanyCard, { CompanyCardModels } from "./CompanyCard"; import CompanyCardLateral, { CompanyCardLateralModels } from "./CompanyCardLateral"; type Company = WtdModels.UnionAll< WtdModels.Partial<WtdModels.Company, "id">, CompanyCardModels["Company"], CompanyCardLateralModels["Company"] >; 6OJPO

34. ©2018 Wantedly, Inc. ·ͱΊ

35. ©2018 Wantedly, Inc. ·ͱΊ ‣ infer ศར ‣ ܕఆٛ͸ͳΔ΂ָ͘ʹ