π₯ Learn TypeScript in one tweet. π₯
Beginners guide. ππ
(threadπ§΅)
Beginners guide. ππ
(threadπ§΅)
What is TypeScript?
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript which helps us build large scale applications with ease.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript which helps us build large scale applications with ease.
The main purpose of TS is to help developers be more productive by providing best in class tooling. (Eg. static type checking, editor intellisense, language features etc etc.)
Annotating your code isn't just about finding errors and validating the code before hand, it's also about documenting the code and conveying your intent more clearly to your future self and to other developers.
youtu.be
youtu.be
Getting Started.
Installation:
1. npm i -g typescript
2. create a project with `npm init -y`
3. run `tsc --init`
4. create an index.ts file
5. run `tsc` to build your project
`tsc --init` will create a tsconfig.json file for you with some default values
typescriptlang.org
Installation:
1. npm i -g typescript
2. create a project with `npm init -y`
3. run `tsc --init`
4. create an index.ts file
5. run `tsc` to build your project
`tsc --init` will create a tsconfig.json file for you with some default values
typescriptlang.org
Don't have time to setup npm & all that?
No worries you can proceed with online typescript playground:
typescriptlang.org
No worries you can proceed with online typescript playground:
typescriptlang.org
Basic Types:
Just like in any other language in TS we also have primitive types.
// string, number & boolean
Let's start with a simple example:
We specifying some vars with types, then redeclaring them with other types, you'll see TS will warn us that this isn't allowed.
Just like in any other language in TS we also have primitive types.
// string, number & boolean
Let's start with a simple example:
We specifying some vars with types, then redeclaring them with other types, you'll see TS will warn us that this isn't allowed.
Typescript is smart enough to automatically infer type of a variable in most cases, and It is recommended that you let the compiler infer as much types as possible. Good Read:
fettblog.eu
Let's rewrite the above example:
fettblog.eu
Let's rewrite the above example:
More types!!
That's booring, lets move on to Arrays, Objects, Functions.
<--- Arrays! --->
Let's see how we can type an array which accepts numbers.
That's booring, lets move on to Arrays, Objects, Functions.
<--- Arrays! --->
Let's see how we can type an array which accepts numbers.
<--- Mixed Arrays! --->
To type an array which accepts both a string and a number we can utilize union types.
Union types looks like this: `string | number`
<Again, TS can infer these types too, try experimenting with them>
To type an array which accepts both a string and a number we can utilize union types.
Union types looks like this: `string | number`
<Again, TS can infer these types too, try experimenting with them>
<--- Objects! --->
TypeScript is by design uses a structural type system, it means that if two of the types has same key value pairs they will be considered as same type and TS compiler won't throw any errors.
We can use an `interface` to define the shape of our object
TypeScript is by design uses a structural type system, it means that if two of the types has same key value pairs they will be considered as same type and TS compiler won't throw any errors.
We can use an `interface` to define the shape of our object
<--- Functions! --->
Taking the `Person` interface we can also define a function which takes a Person object as a parameter.
Similarly as we type annotate a variable, we can also type function parameters.
Let's see the example:
Taking the `Person` interface we can also define a function which takes a Person object as a parameter.
Similarly as we type annotate a variable, we can also type function parameters.
Let's see the example:
But if you open the intellisense, you'll notice that in the function parameter we are still accepting the `last` field even tho we are not using it inside the function, how can we fix it?
This is a bit more advanced but we can utilize a inbuilt type called Omit<> to remove it.
This is a bit more advanced but we can utilize a inbuilt type called Omit<> to remove it.
<--- any type! --->
TypeScript provides a special type called `any`.
It is an escape hatch which you can use if for some reason you are getting typechecking errors and you want to ignore them.
Note, that it is considered as bad practice to use any too much, try to avoid it.
TypeScript provides a special type called `any`.
It is an escape hatch which you can use if for some reason you are getting typechecking errors and you want to ignore them.
Note, that it is considered as bad practice to use any too much, try to avoid it.
<--- Union types! --->
Union types are combination of two of more types,
Basically what they define is that a particular type can be both A or B.
Let's take an example to see more clearly how it works.
Union types are combination of two of more types,
Basically what they define is that a particular type can be both A or B.
Let's take an example to see more clearly how it works.
<--- Narrowing Union types! --->
TS will only allow you to do things with the union if that thing is valid for every member of the union. For example, in here type is `string | number` that means you canβt use methods that are only available on string:
TS will only allow you to do things with the union if that thing is valid for every member of the union. For example, in here type is `string | number` that means you canβt use methods that are only available on string:
The solution is type narrowing, Narrowing occurs when TS can deduce a more specific type for a value by analyzing the structure of the code, this is called "Control flow analysis"
Good Read: mariusschulz.com
let's see an example:
Good Read: mariusschulz.com
let's see an example:
<--- Type Aliases! --->
You can think of type aliases like variables in type level, but they do more than that. You can extract out, reuse & and compose types too.
Curious about Type Aliases vs Interfaces? here's a great thread by @_kamlesh_
You can think of type aliases like variables in type level, but they do more than that. You can extract out, reuse & and compose types too.
Curious about Type Aliases vs Interfaces? here's a great thread by @_kamlesh_
<--- Generics! --->
At last let's learn about generics, generics gives you more flexibility & reusability when typing your APIs or functions.
You can apply generics to classes, functions & even type aliases.
Let's see an example:
At last let's learn about generics, generics gives you more flexibility & reusability when typing your APIs or functions.
You can apply generics to classes, functions & even type aliases.
Let's see an example:
<--- Generic Constraints! --->
Generic constraints as the name suggests lets you constraint your generic parameter to a certain type.
Let's say we want to create a function which can only take a generic type if the type matches an object's shape.
Generic constraints as the name suggests lets you constraint your generic parameter to a certain type.
Let's say we want to create a function which can only take a generic type if the type matches an object's shape.
<--- Thank You! --->
Did I missed anything?
Any questions for me?
Any corrections?
I hope you learned some TypeScript & enjoyed the thread. :)
Did I missed anything?
Any questions for me?
Any corrections?
I hope you learned some TypeScript & enjoyed the thread. :)
CORRECTION 0: (<--- Objects! --->)
This example is incorrect, here's a revised example
Playground link: #code/JYOwLgpgTgZghgYwgAgArQM4HsTIN4BQyyMwUGYAXMhVKAOYDcRyANnBQPzW0OPIB6AcgA8AWjHIABpynJQAE2AI4kDMiwAHMMBxxWJYBFYKWcehGogArgFsARtGYBfAm4Q4KyODajnq6OQ4yAC8+IbkVMgARACCvubRADRsHFHRABJwAF5+yd4W1ABMAAzIzvxCGgDWBB4gXgBWWAAWIAGYwWF4ERTUcQn0+eaWyKXllcJYtfVNwLYdQbjdvekAUvPRE4JTtVXEyAB6x2hQWtBgAJ7IAOQjN-LqtsAYGAzyuFeaKDc9pJE8MB0EBMcoPezWMDIKAQACO1jIEAUH2QXx+gWwIBuADo3EA" target="_blank" rel="noopener" onclick="event.stopPropagation()">typescriptlang.org
This example is incorrect, here's a revised example
Playground link: #code/JYOwLgpgTgZghgYwgAgArQM4HsTIN4BQyyMwUGYAXMhVKAOYDcRyANnBQPzW0OPIB6AcgA8AWjHIABpynJQAE2AI4kDMiwAHMMBxxWJYBFYKWcehGogArgFsARtGYBfAm4Q4KyODajnq6OQ4yAC8+IbkVMgARACCvubRADRsHFHRABJwAF5+yd4W1ABMAAzIzvxCGgDWBB4gXgBWWAAWIAGYwWF4ERTUcQn0+eaWyKXllcJYtfVNwLYdQbjdvekAUvPRE4JTtVXEyAB6x2hQWtBgAJ7IAOQjN-LqtsAYGAzyuFeaKDc9pJE8MB0EBMcoPezWMDIKAQACO1jIEAUH2QXx+gWwIBuADo3EA" target="_blank" rel="noopener" onclick="event.stopPropagation()">typescriptlang.org
Loading suggestions...