Typescript Flashcards
(34 cards)
How do you run TypeScript compiler on files?
tsc app.js
If we have setup a tsconfig.json, we can type tsc.
It will look for ts.config.json even if we are not in the same directory
What are TypeScript Project files?
- Simple JSON text file named tsconfig.json
- Stores compiler options used with the project
- Specifies files to be included or excluded in compilation (In a large you can use many different project files, each specifying different compiler options for each subset of projects)
- Support configuration inheritance
Explain basic compiler options for :
{
“compilerOptions”: {
“target”: “ES5”,
“noUnusedLocals”: true,
“outFile”: “output.js”
},
“files”: [“app/app.ts”]
}
{
“compilerOptions”: {
“target”: “ES5”, // tells the compiler to which version of javascript to output
“noUnusedLocals”: true, // will generate an error if I have unused local variables
“outFile”: “output.js” // name of the js file, that I want to output
},
“files”: [“app/app.ts”] // array of files I want to include in the compilation
}
How do you initialize TypeScript Config
tsc –init
How do you assert TypeScript, that you know that a certain object will not come as a null?
By adding ! (non-null assertion operator)
messagesElement!.innerText = Welcome to MultiMath! Starting a new game...;
How can you apply Configuration Inheritance in TypeScript?
1) The configuration in the root folder should be renamed to tsconfig.base.json
2) We should add an inherited configuration in the fodler of our choosing tsconfig.json
3) Ts config, as one of the properties should have the “extends” keyword:
{
“extends”: “../tsconfig.base”,
“compilerOptions”: { // all of additional keywords will be run apart of the tsconfig.base
“removeComments”: true
}
}
What is the glob and how it can be used?
Glob is used to specify which files should be compiled. Contrary to “files” key, which requires you to match specifically which files you would like to include in the compilation, glob allows you to specify a file name pattern.
We add globs using the “include” keyword.
{
“extends”: “../tsconfig.base”,
“compilerOptions”: {
“removeComments”: true
},
“include”: [”./**/*”] // ** will tell to look recursively through all subdirectories
}
What are the types that TypeScript Supports?
- boolean
- number (floating point value)
- string
- Array (string[] or Array)
- Enum (In computer programming, an enumerated type is a data type consisting of a set of named values called elements, members, enumeral, or enumerators of the type. The enumerator names are usually identifiers that behave as constants in the language.)
- void (Void is a data type used to represent the absence of a type, used for functions that do not return anything)
- null
- undefined
- never (assigned to values that will never occur)
- any (opt out of checking by the compiler)
What are Type Annotations?
Type annotations are part of variable declarations that allow you to specify what data type may be assigned to a variable.
You can assign a type annotation by adding a colon to the variable declaration, like:
let x: string = “Test”;
If you do not add the type annotation, TypeScript will assign the type based on the variable declaration
let x = “Test”;
so x in this case will also always be a string.
What are union types in TypeScript?
A union type describes a value that can be one of several types.
With vertical bar ( | ) we might separate each type, number | string | boolean is the type of a value that can be a number, a string, or a boolean
What is –strictNullChecks
By default, null and undefined can be assigned to any type.
With –strictNullChecks, it can be avoided in TS. With that option set to true, null and undefined ae no longer valid values for every other type.
What are Type assertions and why are they useful in TypeScript?
Sometimes you’ll end up in a situation where you’ll know more about a value than TypeScript does. Usually, this will happen when you know the type of some entity could be more specific than its current type.
A type assertion is like a type cast in other languages, but it performs no special checking or restructuring of data.
Type assertions have two forms.
One is the as-syntax:
let someValue: unknown = “this is a string”;
let strLength: number = (someValue as string).length;
The other version is the “angle-bracket” syntax:
let someValue: unknown = “this is a string”;
let strLength: number = (someValue).length;
How do you add annotations to functions?
function funfunc(score: number, message?: string): string {}
? flags the parameter as optional
the last annotation is used to specify the return type of the function
We can additionally, add a default value for a parameter with “=”. This will make the parameter optional by default.
What does –noImplicitAny compiler option do?
It will require us to pass a type annotation for all variables. It will not implicitly assign any type.
What is the TypeScript syntax for creating arrow functions?
Parameters, we need to wrap parameters with (), if there are 0 or more parameters. Additionally, we need to do that, if there is type annotation to a single parameter.
We also can pass the return value from an arrow function.
const logMessage = (message: string): void => console.log(message);
How can you take advantage of TypeScript function types?
Whenever we hover over a function name, there will be a little popup that shows the function type.
If two functions have the same function type, we can assign either of the functions to that variable
To give a variable a function type, after colon, we need to put the expected function parameters and their types in parentheses
let logger: (value: string) => void;
What are TypeScript Interfaces?
Interfaces and classes can both be used to create custom types in TypeScript.
Interfaces are a development time tool -> they are used by the compiler to type check your code, but don’t compile down to anything in JS.
- Used to define new types
- Have properties (define signatures of properties; it has only a name and a type)
- Define methods (signatures; define number and types of the parameters it expects as well as method’s return type)
- Can’t be instantiated
- Do not provide any implementation details
What are TypeScript Classes?
- Used to define new types
- Have properties (but can also include implementation details for the property)
- Define methods (class methods include full method implementations, each instance of a class will get the same code for a given method)
- Can be instantiated
How can you create an Interface?
An interface is created using the “interface” keyword.
interface Employee {
name: string;
title: string;
}
extends keyword, can extend an interface
interface Manager extends Employee {
department: string;
numOfEmployees: number;
scheduleMeeting: (topic: string) => void;
}
How can you create Classes?
Classes provide:
- Method implemenations
- Property implementations
- Accessors (getters and setters)
- Access modifiers:
- Public
- Private (members not accessible outside of the class)
- Protected (can only be accsessible inside of the class or any class that inherits from the class)
What do extends and implements keywords do?
class WebDeveloper extends Developer {}
- Creates a very typical object-oriented inheritance relationship between the two classes.
A common practice is to write classes that implement interfaces.
class Engineer implements Employees {}
once you declared that a class will implement an interface, you’re required to provide an implementation for all of the required properties and methods.
How can you use triple slash directives to configure a Project’s compiler
in the tsconfig.json,
we want to specify the entry point to a file:
“files” :[
“./app.ts”
]
then in app.ts we would like to use the triple slash directives. In vscode there is a code snippet after typing “ref”
///
by specifying this ref we provide instructions to the compiler, where to look for a file that includes some class or an interface.
What are static members of a class?
They are members that you access on the class directly, not on instances of the class.
class WebDeveloper extends Developer {
static jobDescription: string = “Build cool things!”;
static logFavoriteProtocol () {
}
}
WebDeveloper.logFavoriteProtocol()
What are constructors?
Constructors are a special type of function that’s executed when new instances of the class is created.
They’re a handy place for you to perform any special initialization or setup that needs to be performed for new instances of a class.
class Developer {
constructor() {
}
}
