instanceof type guards If you’ve read about typeof type guards and are familiar with the instanceof operator in JavaScript, you probably have some idea of what this section is about. instanceof type guards are a way of narrowing types using their constructor function. For instance, let’s borrow our industrial string-padder example from earlier: interface Padder { getPaddingString(): string } class SpaceRepeatingPadder implements Padder { constructor(private numSpaces: number) { } getPad

Symbol.toStringTag A String value that is used in the creation of the default string description of an object. Called by the built-in method Object.prototype.toString.

Add example code Type the following code into app.ts. function sayHello() { const compiler = (document.getElementById("compiler") as HTMLInputElement).value; const framework = (document.getElementById("framework") as HTMLInputElement).value; return `Hello from ${compiler} and ${framework}!`; }

Validators in a single file interface StringValidator { isAcceptable(s: string): boolean; } let lettersRegexp = /^[A-Za-z]+$/; let numberRegexp = /^[0-9]+$/; class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } // Some samples to try let strings = ["Hello", "98052", "101"]; /

Definition File Theory: A Deep Dive Structuring modules to give the exact API shape you want can be tricky. For example, we might want a module that can be invoked with or without new to produce different types, has a variety of named types exposed in a hierarchy, and has some properties on the module object as well. By reading this guide, you’ll have the tools to write complex definition files that expose a friendly API surface. This guide focuses on module (or UMD) libraries because the optio

Moving to TypeScript Files At this point, you’re probably ready to start using TypeScript files. The first step is to rename one of your .js files to .ts. If your file uses JSX, you’ll need to rename it to .tsx. Finished with that step? Great! You’ve successfully migrated a file from JavaScript to TypeScript! Of course, that might not feel right. If you open that file in an editor with TypeScript support (or if you run tsc --pretty), you might see red squiggles on certain lines. You should thin

Export statements Export statements are handy when exports need to be renamed for consumers, so the above example can be written as: class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } export { ZipCodeValidator }; export { ZipCodeValidator as mainValidator };

MSBuild Update project file to include locally installed Microsoft.TypeScript.Default.props (at the top) and Microsoft.TypeScript.targets (at the bottom) files: <?xml version="1.0" encoding="utf-8"?> <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003"> <!-- Include default props at the bottom --> <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.T

Use Optional Parameters Don’t write several overloads that differ only in trailing parameters: /* WRONG */ interface Moment { diff(b: MomentComparable): number; diff(b: MomentComparable, unitOfTime: string): number; diff(b: MomentComparable, unitOfTime: string, round: boolean): number; } Do use optional parameters whenever possible: /* OK */ interface Moment { diff(b: MomentComparable, unitOfTime?: string, round?: boolean): number; } Note that this collapsing should only occur when al

Add TypeScript The next step is to add a folder for TypeScript. We’ll just call it scripts.