30-04-2021

Typescript Cheat Sheet



TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. This is a list of TypeScript types for Next.js generated from the declaration files in https://github.com/zeit/next.js/tree/v10.1.3.

See also my TypeScript React cheat sheet and TypeScript cheat sheet.

I've compiled useful tips from my experience and from the internet to React Typescript Cheatsheet Do you know useful tricks and tips for using React and Typescript together? Let me know, I'll add them to the page 😊 Also, if you're interested in making such cheatsheets, request access here. I'll be glad to know that someone likes my project. Assertion Function Style 2 - Tell Typescript That a Specific Variable or Property Has a Different Type; Modern Typescript with Examples Cheat Sheet Typing Objects Object Versus object. Object is the type of all instances of class Object. It describes functionality that is common to all JavaScript objects; It includes primitive values. View in the TypeScript Playground. Type Guarding: Sometimes Union Types solve a problem in one area but create another downstream.If A and B are both object types, A B isn't 'either A or B', it is 'A or B or both at once', which causes some confusion if you expected it to be the former.

  • default ‹ next ‹ default ‹ createServer(function)
  • GetServerSideProps<P, Q extends ParsedUrlQuery> (type)
  • GetServerSidePropsContext<Q extends ParsedUrlQuery> (type)
  • GetServerSidePropsResult<P> (type)
  • GetStaticPaths<P extends ParsedUrlQuery> (type)
  • GetStaticPathsContext(type)
  • GetStaticPathsResult<P extends ParsedUrlQuery> (type)
  • GetStaticProps<P, Q extends ParsedUrlQuery> (type)
  • GetStaticPropsContext<Q extends ParsedUrlQuery> (type)
  • GetStaticPropsResult<P> (type)
  • InferGetServerSidePropsType<T> (type)
  • InferGetStaticPropsType<T> (type)
  • NextApiHandler ‹ NextApiHandler ‹ NextApiHandler<T> (type)
  • NextApiRequest ‹ NextApiRequest ‹ NextApiRequest(interface)
  • NextApiResponse ‹ NextApiResponse ‹ NextApiResponse<T> (type)
  • NextComponentType ‹ NextComponentType ‹ NextComponentType<C extends BaseContext, IP, P> (type)
  • NextPage<P, IP> (type)
  • NextPageContext ‹ NextPageContext ‹ NextPageContext(interface)
  • PageConfig(type)
  • react(module)
    • HtmlHTMLAttributes<T> (interface)
    • LinkHTMLAttributes<T> (interface)
    • StyleHTMLAttributes<T> (interface)
  • Redirect(type)
  • * from './dist/next-server/lib/amp'
    • isInAmpMode(function)
    • useAmp(function)
  • * from './dist/pages/_app'
    • AppContext(type)
    • AppInitialProps ‹ AppInitialProps ‹ AppInitialProps(type)
    • AppProps<P> (type)
    • Container(function)
    • createUrl(function)
    • NextWebVitalsMetric ‹ NextWebVitalsMetric ‹ NextWebVitalsMetric(type)
  • default ‹ default ‹ App(class)
  • * from './dist/client/index'
    • __webpack_public_path__(var)
    • emitter(var)
    • global(module)
      • Window(interface)
    • render(function)
    • renderError(function)
    • router(var)
    • version(var)
  • default ‹ default ‹ [anonymous](function)
  • * from './dist/next-server/lib/runtime-config'
    • setConfig(function)
  • default ‹ default ‹ [anonymous](function)
  • * from './dist/next-server/lib/constants'
    • AMP_RENDER_TARGET(var)
    • BLOCKED_PAGES(var)
    • BUILD_ID_FILE(var)
    • BUILD_MANIFEST(var)
    • CLIENT_PUBLIC_FILES_PATH(var)
    • CLIENT_STATIC_FILES_PATH(var)
    • CLIENT_STATIC_FILES_RUNTIME(var)
    • CLIENT_STATIC_FILES_RUNTIME_AMP(var)
    • CLIENT_STATIC_FILES_RUNTIME_MAIN(var)
    • CLIENT_STATIC_FILES_RUNTIME_POLYFILLS(var)
    • CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH(var)
    • CLIENT_STATIC_FILES_RUNTIME_WEBPACK(var)
    • CONFIG_FILE(var)
    • DEV_CLIENT_PAGES_MANIFEST(var)
    • EXPORT_DETAIL(var)
    • EXPORT_MARKER(var)
    • FONT_MANIFEST(var)
    • IMAGES_MANIFEST(var)
    • OPTIMIZED_FONT_PROVIDERS(var)
    • PAGES_MANIFEST(var)
    • PERMANENT_REDIRECT_STATUS(var)
    • PHASE_DEVELOPMENT_SERVER(var)
    • PHASE_EXPORT(var)
    • PHASE_PRODUCTION_BUILD(var)
    • PHASE_PRODUCTION_SERVER(var)
    • PRERENDER_MANIFEST(var)
    • REACT_LOADABLE_MANIFEST(var)
    • ROUTES_MANIFEST(var)
    • SERVER_DIRECTORY(var)
    • SERVER_FILES_MANIFEST(var)
    • SERVER_PROPS_ID(var)
    • SERVERLESS_DIRECTORY(var)
    • STATIC_PROPS_ID(var)
    • STATIC_STATUS_PAGES(var)
    • STRING_LITERAL_DROP_BUNDLE(var)
    • TEMPORARY_REDIRECT_STATUS(var)
  • * from './dist/pages/_document'
    • DocumentContext ‹ DocumentContext ‹ DocumentContext(type)
    • DocumentInitialProps ‹ DocumentInitialProps ‹ DocumentInitialProps(type)
    • DocumentProps ‹ DocumentProps ‹ DocumentProps(type)
    • Head(class)
    • Html(function)
    • Main(function)
    • NextScript(class)
    • OriginProps(type)
  • default ‹ default ‹ Document(class)
  • * from './dist/next-server/lib/dynamic'
    • DynamicOptions<P> (type)
    • LoadableBaseOptions<P> (type)
    • LoadableComponent<P> (type)
    • LoadableFn<P> (type)
    • LoadableGeneratedOptions(type)
    • LoadableOptions<P> (type)
    • Loader<P> (type)
    • LoaderComponent<P> (type)
    • LoaderMap(type)
    • noSSR(function)
  • default ‹ default ‹ dynamic(function)
  • * from './dist/pages/_error'
    • ErrorProps(type)
  • default ‹ default ‹ Error(class)
  • * from './dist/next-server/lib/head'
    • defaultHead(function)
  • default ‹ default ‹ Head(function)
  • * from './dist/client/image'
    • ImageLoader(type)
    • ImageLoaderProps(type)
    • ImageProps(type)
  • default ‹ default ‹ Image(function)
Typescript Cheat Sheet
  • * from './dist/client/link'
    • LinkProps(type)
  • default ‹ default ‹ Link(function)
  • * from './dist/client/router'
    • createRouter(var)
    • makePublicRouterInstance(function)
    • NextRouter ‹ NextRouter ‹ NextRouter(type)
    • Router ‹ Router ‹ default ‹ Router(class)
    • SingletonRouter(type)
    • useRouter(function)
    • withRouter ‹ default ‹ withRouter(function)
  • default ‹ default ‹ singletonRouter(var)
06 Feb 2020

This post is a collection of the available TypeScript types, examples of their usual use, and JavaScript outputs.

Update history:

  • 13 Feb 2020 - Added void type (thx to AngularBeginner);
  • 13 Feb 2020 - Added unknown type (thx to andra_nl);
  • 8 Mar 2020 - Added the const enum section;

Nothing special, just true and false:

TypeScript:

JavaScript:

Note: Boolean with an upper case B is different from boolean with a lower case b. Upper case Boolean is an object type whereas lower case boolean is a primitive type. It is always recommended to use boolean.

4 ways to declare a number:

TypeScript:

JavaScript:

Note: All numbers in TypeScript are floating point values

Same to boolean, pretty much as-is:

TypeScript:

JavaScript:

There are two ways to declare an array:

TypeScript:

JavaScript:

Note: Both ways produce the same JavaScript output

You can also declare an array that contains elements of different data types:

TypeScript:

JavaScript:

Tuple is a type that allows you to express an array with a fixed number of elements whose types are known:

TypeScript:

JavaScript:

Numeric

Numeric enum allows you to use and specify numeric values:

TypeScript:

JavaScript:

Look at this elegant approach:

Since the Color is the object, this line is responsible for producing the following output:

Eventually, it allows us to access the enum both ways: either Color.Red or Color[1].

Get name

Two ways to get the enum’s key:

Typescript Syntax Cheat Sheet

TypeScript:

JavaScript:

Note: Works with numeric enums only

Duplicates

I don’t know why but you can use a single value for multiple enum keys:

TypeScript:

JavaScript:

In this case you’ll end up with the following output:

Note: You can get the same value by multiple keys but not vice versa

Const

Const enums are completely removed during compilation. Const enum mebers are inlined:

TypeScript:

JavaScript:

String

String enums allow you to specify string values but the output is a bit different:

TypeScript:

JavaScript:

The output object won’t have MALE and FEMALE properties, so there is only one way to access values:

Heterogeneous

Again, the use case isn’t clear for me, but you can define enums with values of various types:

TypeScript:

JavaScript:

Status.Done has the value 2 which was calculated automatically

TypeScript has type-checking and compile-time checks. And any is extremely helpful when we don’t have prior knowledge about the type of some variables:

TypeScript:

React typescript cheat sheet

JavaScript:

Why not have an array of any values? Absolutely not a problem:

TypeScript:

JavaScript:

The unknown type is very similar to any but much less permissive. On the one hand unknown variables can hold any values (e.g. true, [], Math.random, undefined, new Error()). On the other hand TypeScript won’t let you to access type specific properties and operations without explicit and prior type checking:

TypeScript:

JavaScript:

Typescript Cheat Sheet Pdf

Both typeof and instanceof operators are valid for type checking

Null and undefined are separate types in TypeScript. They’re not extremely useful on their own, but still can assist you as a part of union type declarations:

TypeScript:

JavaScript:

Void type is used to declare functions that don’t return any meaningful value (besides undefined and null (if --strictNullChecks is disabled)). Anyway, you can even declare void variables:

TypeScript:

JavaScript:

The last piece in puzzle is the type never. It could be used as the return type of a function that always throws an exception or never returns a value.

TypeScript:

Redux Typescript Cheat Sheet

JavaScript:

Reference:

  1. TypeScript playground;
  2. Basic types;
  3. Enums in TypeScript;
  4. Boolean in TypeScript;
  5. Boolean in Javascript and TypeScript;
  6. The unknown Type in TypeScript;

If you want to support me

Follow me on Youtube or GitHub if you want me to continue.

  • Youtube: https://www.youtube.com/channel/UCz6AZvABoICHPpi43y-Hd5g
  • GitHub: https://github.com/FSou1

Related Posts