Explain Typescript, I'm Like Five

Thanks

Comments

[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

[Pacharapol Withayasakpunt]

TypeScript is just some tidbits that can be transformed to JavaScript, as well as allows you to write JavaScript directly inside it.

Some benefits of using TypeScript are

• Better typing (albeit superficial and IDE only; nothing persists at runtime; actually TypeScript maintainers reject the idea of having it at runtime)
• Better IDE integration, especially in Visual Studio Code

I would disagree that TypeScript is not really a strongly typed language; but more of an IDE-oriented language, but it is as dynamically typed as JavaScript at runtime. Or like a static type-checker, e.g. Flow; which is nothing new.

Furthermore, you can use some TypeScript features inside JavaScript, even if you don't use *.ts extension, by adding // @ts-check at the top of the file, and use VSCode IDE. You can use interfaces in pure JavaScript as well, by using JSDoc's @typedef.

If you want a strongly-typed compiled-to-JavaScript language, example includes Kotlin/JavaScript, but it will not allow you to write JavaScript inside it. (and the compiler is painfully slow.)

Another dimension that TypeScript probably doesn't always do includes newer ECMAScript features. In this case, you might use Babel. And sometimes, you would want to use BOTH TypeScript and Babel together. (In reality, TypeScript compiler can indeed replace some parts of Babel, such as compiling to ES5.)

[Sasidharan]

Great summary.Im 15 now ;)

[Nepali Lab]

TypeScript is a superscript of JS, meaning it consists of everything JS has and also has other features that JS is missing.

The major attraction of TS is that it's a strongly-typed language, means you have to define what the data-types of the variables you use.
For ex: JS is a dynamically typed language means you can literally write var testVar= 5 and JS would understand that it is Integer. Or you can just write var testVar="5" and it will unserstand that it is a string.

However, JS faced many difficulties while the values were being returned and programmers had to deal a lot on what kind of data-type the given variable was. As you can see, testVar could've been an Integer or a String. On big program structure, it's not very efficient to keep searcing what these variables were, especially if it was written by other developers. Also, it created a lot of bugs in the program because you know, instead of returning an integer, the program may return a String and it makes your development much more difficult. The error isn't seen in run-time so as you may have already guessed by now, in large projects these small problems were difficult to manage.

That's where TS comes in. You strongly define what variable you set and then once you set it, you cannot just put any random values on it. Meaning, if you set varNum as an Integer in your program, you cannot put a length of text in that variable and the compiler shows error at the run-time which is pretty useful.

Also you can make use of Interface to document as you go. For ex: if you have an entity like USER, and you want to define it you could do it this way :

Interface User {
uName : String;
uId:Number,
user_test:any

}

So, what this does is now if you create a new user, it must always have uName as a string, uId as a Number and user_test as any (number,string). So, this is very useful in developing large scale applications.

I hope I made my points clear.

[Sasidharan]

Thanks, man.I'm 10 now.

[Vuelancer]

I trying to learn typescript for developing some nice stuffs in deno!

Typescript was developed by Microsoft.

1. Like C# for C++, they have introduced typescript for javascript developers with nice type-checking addons to their language!
2. Introduced Map, Interface, etc,.

I know this level only!

[Sasidharan]

Thanks man!