Skip to content

Instantly share code, notes, and snippets.

@ikhsanalatsary
Last active April 14, 2021 09:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ikhsanalatsary/65e83e38a3e9edaca5286d030374d86d to your computer and use it in GitHub Desktop.
Save ikhsanalatsary/65e83e38a3e9edaca5286d030374d86d to your computer and use it in GitHub Desktop.
Mengeluarkan tipe null dan undefined dari tipe data pada TypeScript
export type Maybe<T> = T | null | undefined;
type UnpackArray<T> = T extends (infer U)[] ? U : T;
type Unpack<T, U> = U extends keyof T ? T[U] : never;
// type Post = { id: string; title: string; content: Maybe<string> };
type Post = {
__typename?: 'Post';
authorDatabaseId: Maybe<number>;
authorId: Maybe<string>;
bodyClasses: Maybe<string>;
coAuthors: Maybe<string>;
commentCount: Maybe<number>;
commentStatus: Maybe<string>;
content: Maybe<string>;
databaseId: number;
date: Maybe<string>;
dateGmt: Maybe<string>;
desiredSlug: Maybe<string>;
enclosure: Maybe<string>;
excerpt: Maybe<string>;
featuredImageDatabaseId: Maybe<number>;
featuredImageId: Maybe<string>;
guid: Maybe<string>;
id: string;
isPreview: Maybe<boolean>;
isRestricted: Maybe<boolean>;
isRevision: Maybe<boolean>;
isSticky: boolean;
link: Maybe<string>;
modified: Maybe<string>;
modifiedGmt: Maybe<string>;
pingStatus: Maybe<string>;
pinged: Maybe<Array<Maybe<string>>>;
previewRevisionDatabaseId: Maybe<number>;
previewRevisionId: Maybe<string>;
slug: Maybe<string>;
status: Maybe<string>;
title: Maybe<string>;
toPing: Maybe<Array<Maybe<string>>>;
uri: string;
};
type Posts = Maybe<Array<Maybe<Post>>>;
function getPostTitles(allPosts: Posts): Array<string> {
return allPosts!.map((post) => post!.title!);
}
type PostDetailQueryType = { __typename?: 'RootQuery' } & {
post: Maybe<
{ __typename?: 'Post' } & Pick<Post, 'id' | 'title' | 'content'> & {
author: Maybe<
{ __typename?: 'NodeWithAuthorToUserConnectionEdge' } & {
node: Maybe<
{ __typename?: 'User' } & Pick<User, 'slug' | 'name'> & {
avatar: Maybe<
{ __typename?: 'Avatar' } & Pick<Avatar, 'url'>
>;
}
>;
}
>;
}
>;
};
type MaybeAuthor = NonNullable<PostDetailQueryType['post']>['author'];
type Author = NonNullable<NonNullable<PostDetailQueryType['post']>['author']>;
type PickMaybeAuthor = Unpack<
NonNullable<PostDetailQueryType['post']>,
'author'
>;
type PickAuthor = NonNullable<
Unpack<NonNullable<PostDetailQueryType['post']>, 'author'>
>;
type Category = {
__typename?: 'Category';
count: Maybe<number>;
databaseId: number;
description: Maybe<string>;
id: string;
isRestricted: Maybe<boolean>;
link: Maybe<string>;
name: Maybe<string>;
parentDatabaseId: Maybe<number>;
parentId: Maybe<string>;
slug: Maybe<string>;
termGroupId: Maybe<number>;
termTaxonomyId: Maybe<number>;
uri: string;
};
type PostDetailWithCategoriesQuery = { __typename?: 'RootQuery' } & {
post: Maybe<
{ __typename?: 'Post' } & Pick<Post, 'id' | 'title' | 'content'> & {
categories: Maybe<
{ __typename?: 'PostToCategoryConnection' } & {
nodes: Maybe<
Array<
Maybe<
{ __typename?: 'Category' } & Pick<
Category,
'id' | 'slug' | 'name' | 'uri'
>
>
>
>;
}
>;
}
>;
};
type CategoriesOnPost = NonNullable<
Unpack<NonNullable<PostDetailWithCategoriesQuery['post']>, 'categories'>
>;
type CategoryNodes = Unpack<NonNullable<CategoriesOnPost>, 'nodes'>;
type PickMaybeCategory = UnpackArray<NonNullable<CategoryNodes>>;
type PickCategory = NonNullable<UnpackArray<NonNullable<CategoryNodes>>>;
@ikhsanalatsary
Copy link
Author

ikhsanalatsary commented Apr 14, 2021

Saya tidak tampilkan semua tipe disini seperti tipe User dan Avatar. Namun setidaknya tidak merusak tipe(ekstrak null dan undefined) yang jadi contoh utama. Potongan kode ini bisa langsung copas ke TypeScript Playground

@ikhsanalatsary
Copy link
Author

Potongan kode ini melengkapi tulisan di lanjutkoding.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment