Discussion on: Explain Typescript, I'm Like Five

[Tom]

What is TypeScript?

TypeScript provides compile-time static typing, which can provide safety in handling variables and knowing what they are, provides self-documentation of your more complex types, and ensures you are using variables correctly.

TypeScript is a superset of JavaScript. This means that it contains the same syntax as JavaScript with more added in (defining the type of a variable cannot be done in JavaScript, defining interfaces and types cannot be done in JavaScript, but can be done in TypeScript).

TypeScript is transpiled to JavaScript. TypeScript code itself cannot be run in an engine like V8 (Chrome, Node.js) or SpiderMonkey (Firefox), as they can only handle JavaScript. So, TypeScript includes a compiler, tsc, which interprets the TypeScript files and outputs JavaScript files. These are in turn used for the package instead. This is also the reason it only provides compile-time type safety- there's nothing in the runtime that is checking types. Instead, tsc validates that there is no logic errors in how you are using variables in your TypeScript code before converting it to JavaScript.

TypeScript is self-documenting, as an effect of having types defined on functions and classes. Imagine you have a function in Javascript, that handles an incoming context and some options, to update the user status. It might look like this:

export function updateUser(ctx, opts) {
  ctx.user.firstName = opts.first;
  ctx.user.lastName = opts.last;
  ctx.lastAccessed = new Date();
}

Now, you might understand what is being accessed in context here, but how do you know that the opts variable contains properties called first, not firstName? Or that you can update the property lastAccessed in the context ctx? And furthermore, how should I expect to know this behavior when I'm in another file, or even another package? As a codebase gets larger, you can find yourself digging for an explanation of what this ctx object is, what properties there are, and how to use it.

In TypeScript, you would be defining the types for the function parameters, optionally the return type (if you don't, TypeScript will determine what possible return types there are for you), and the compilation stage will fail if you are accessing things incorrectly.

export interface UserOptions {
  first: string;
  last: string;
  email: string;
}

export interface Context {
  user: UserContext;
  lastAccessed: Date;
}

export interface UserContext {
  firstName: string;
  lastName: string;
}

export function updateUser(ctx: Context, opts: UserOptions): void {
  ctx.user.firstName = opts.first;
  ctx.user.lastName = opts.last;
  ctx.lastAccessed = new Date();
}

Now, the way you're accessing values in the function don't look all that different here, but tsc will break if we have done anything wrong. We have defined types for Context which we can reference in external modules, and IntelliSense in VS Code or other editors/IDEs would let you inspect types just by hovering over a variable, or go directly to the file it was defined.

For an example of incorrect code, suppose the UserOptions interface had properties firstName and lastName instead. In this case, opts.first would never be defined and could not be assigned to UserContext.firstName because it is a string type. You would need to fix your code before you could successfully compile your TypeScript to JavaScript.

[Sasidharan]

Great man! thanks