Typescript Cheat Sheet

Posted : admin On 1/3/2022

SaltyCrane Cheat Sheets — Notes on JavaScript and web development. TypeScript React Cheat Sheet. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. This is a list of TypeScript types generated from the declaration files for react, react-dom. TypeScript Cheatsheets. Community curated cheatsheets for experienced JS developers to share knowledge and copy-paste recipes for common usecases.

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:

Cheat

There are two ways to declare an array:

TypeScript:

JavaScript:

Note: Both ways produce the same JavaScript output

Typescript Cheat Sheet

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:

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

Typescript Cheat Sheet

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:

Sheet

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:

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:

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:

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

Return

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

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.

  • 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)

Typescript Cheat Sheet 2020

Typescript syntax cheat sheet
  • * 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)
  • * from './dist/client/link'
    • LinkProps(type)
  • default ‹ default ‹ Link(function)

Typescript Return Two Types

  • * 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)