Just another flavour of javascript
# 👪 Typescript
Why we need it? To help us write better code for compiler, and so compiler can do its job more efficiently. Does it mean typescript is faster than javascript?
- How do I compile and run typescript while developing to get realtime feedback?
Use nodemon package (opens new window) and ask bash to asynchronously run
tsc --watchFrom bash reference (opens new window)
A single ampersand terminates an asynchronous command. An ampersand does the same thing as a semicolon or newline in that it indicates the end of a command, but it causes Bash to execute the command asynchronously. That means Bash will run it in the background and run the next command immediately after, without waiting for the former to end. Only the command before the & is executed asynchronously and you must not put a ; after the &, the & replaces the ;.
# 🔷 Interfaces
- properties with types
- optional properties
- readonly properties
- Interfaces for
- functions,
- objects,
- class
/**
* Shape of data information for compiler
* Argument of type '{ size: number; }' is not assignable to parameter of type 'ILabeledValue'.
* Property 'label' is missing in type '{ size: number; }' but required in type 'ILabeledValue'.
*/
interface ILabeledValue {
label: string;
// optional properties
size?: number;
// readonly properties
readonly y: number;
}
// Function interface
interface IPrintLabelFunc {
(source: object): null;
}
/**
* using interface
* @param labeledObj
*/
function printLabel(labeledObj: ILabeledValue) {
console.log(`from function using interface`);
console.log(JSON.stringify(labeledObj, null, 4));
}
/**
* without interface
* @param labeledObj
*/
function printLabel1(labeledObj: { label: string }) {
console.log(`from function NOT using interface`);
console.log(JSON.stringify(labeledObj, null, 4));
}
let myObj = {
size: 10,
label: "Size 10 Object",
y: 5
};
// MAIN
printLabel(myObj);
printLabel1(myObj);# 🗞 might be interesting
babela and typescript
Babel 7 has built-in TypeScript syntax support.
This means that projects using Babel can now use TypeScript, without ever needing to complicate their builds with the TypeScript compiler.
- But what are the differences between using Babel and the TypeScript compiler? And should you use Babel or TypeScript for your next project? (opens new window)
babel vs typescript compiler
- TypeScript by default compiles an entire project at once, while Babel only compiles one file at a time.
# Interfaces
- Difference between implements and extends a class ?
A class could extend to an interface as well as implement an interface.
keyword description implements same shape, but NOT a child, commonly used with Interfaces extends new class as a child, with all parents properties Implements a new class means,
# Generic Types
Creating types from types
- Get better type definitions
- How to add constraints to generic types? extend generic to interface?
- How to constrain generic type definitions?
extends - How to use Generics with Interfaces?
- How to use generics with react hooks? and functional components?
- HOw to override
useStategeneric? - How to use a render Prop with generics?
type numarr = Array<number>;
type strarr = Array<string>;
const makeArr = <X, Y>(x: X, y: Y): [X, Y] => {
return [x, y];
};
<T extends {firstname: string; lastname: string}>
interface Tab<T> {
id: string;
data: T
}
type NumberTab = Tab<number>
type StringTab = Tab<string>
// react Functional Component
interface Prop {
name: string
}
const HelloWorld: React.FC<props> = ({name}) => (
<div>Hello {name}!</div>
)
// render props
interface FormProps<T> {
values: T
children: (values: T) => JSX.Element
}
const Form = <T extends {}>({values, children}: FormProps<T>) => {
return (children(values))
}
# Advanced Typescript
- How to make an array immutable?
const a = [1,2,3,4,5] as const - How to let ts check if an array has an index?
const b = a[10]