Typescript Flashcards
What is Typescript
It’s a super set of Javascript. Typescript is transpiled to Javascript, the version of Javascript (ES version) is according to the tsconfig configuration. Typescript enhances Javascript with static type checking and some class features such as abstract classes and the public, private, protected and abstract modifiers.
What is a superset of a language
It means that all the code of the language it is a superset of is valid in the superset, but it adds more features
What is static type checking
Typescript allows a developer to annotate the types that are expected for variables and for values returned by functions, methods in classes etc. It gives linting errors when variables are used in ways that are not valid. For example string has a length property, but null doesn’t.
How do you install Typescript
npm i –save-dev typescript, then npx tsc is available.
How do you configure typescript
The tsconfig file in root of project
How to compile typescript
tsc filename.ts
What do you call the set types
Type annotations
Example types
For primitives:
The same as the Javascript built-in constructors such as String, Number, Boolean, but lower-cased. Also null or undefined.
Tupels
Arrays as generics or not
Type aliases
Interfaces
Union types
Literal types
Intersection types
null
undefined
unknown
any
never
object - bad practice
void
What is type inference?
Typescript an infer types by the values assigned OR the return of a function.
With primitives, Typescript can figure out if a variable is a string, number, boolean, undefined or null, based on what is assigned to it.
With function return values as well as arguments with default values, inference can also occur:
function someFunc(num=10){
return 10*2
}
Typescript can even infer an object type and an array type
Explain any type
If you set a variable to ‘any’ then it can be of any value.
When can a type implicitly be any
With delayed initialization, where a variable is not assigned a value or annotated with type annotation, for example:
let someVariable;
Also function argument/parameter without annotation without default value
How to annotate function args/params, and return values without inference
function(num:number):string{
return num.toString();
}
Return value annotations explained
Best to not infer only, but rather annotate. Reason, function could be long, and it just makes it easy to see what it should be. Also, linting is improved, also where the function in invoked.
Union type example
string|number
What is void
When a function returns nothing OR nullish (null/undefined) a type annotation of void is valid.
If there is no ‘return’ statement then it will have a value of undefined as the return value
Explain anonymous function contextual typing
Inference can take place because of the context of where it’s called
[‘green’,’red’,’blue’].map(color=>{})
Typescript knows that color is a string
Quirky behaviour on excess object properties
When a type is defined for an object as a function argument, passing in excess properties inline will result in linting error.
However if assigned to a variable and then passed in it’s fine.
Two ways of annotating object properties
As an interface or as a type alias
What is a type alias
A type that can be used similar to a variable in that it can be assigned in multiple places
Example:
type SomeType = string;
type Person ={
name:string;
age:number;
}
Convention for type alias and interface names
Make it PascalCase
Explain optional types
Use ? in front of :
type Person={
name?:string;
}
This means that name can be string OR undefined
Readonly modifier
Ensure that an object property value cannot be overwritten, only read
type User = {
readonly id: string;
}
OR
interface User {
readonly id:string;
}
const user:User = {
id:’234234’
}
user.id=’3333’ // results in error
class UserObj implements User {
//cannot be updated within class, or outside of class
readonly id:string;
}
Example intersection type
type User={
id:string;
}
type Profile={
name:string;
}
type UserProfile=User&Profile
results in
{
id:string;
name:string;
}
Example array types - both syntaxes
const numbers:number[]=[1,2,3]
const numbers : Array<string></string>
type User ={name:string}
const users:User[] = [{name:’Albert’}]
What are literal types
Exact values assigned to type for example:
const names : ‘albert’|’lucas’
Multi-dimensional array example
const something:string[][]=[
[‘a’,’b’],
[‘c’,’d’,’e’]
]
