All posts by admin

Dart nullable, if-null, and assertion operator

March 25, 2021Dartadmin

Not null-able

If we annotate a type to be say, int, it means it can only be an integer. It cannot be null.

1	int a = null // Error, a can't be null

We can’t add two numbers if one of them is null:

int a; // null

int b = 2;

print(a + b); // Without Nullable, we get run time error!

Nullable (?)

If you want that int to be null, use the question mark to denote that.

1	int? a = null; // Can be null

int? a; // null

int b = 2;

print(a+b); // <-- compile time error here!

With nullable, we get Compile Time Error.
This makes us write safer programs.

Assertion Operator (!)

If you’re sure that a nullable variable will ALWAYS have non-nullable values,
it’s safe to assign it to a non-nullable variable with the ! operator.

1 2	int? aNullableInt = 8; print(aNullableInt!.isEven); // 8

However, if you’re wrong, you’ll get a runtime error!

int? aNullableInt = null;

print(aNullableInt!.isEven); // run time error!

// Unhandled exception:

// Null check operator used on a null value

if-null operator (??)

In the example, x is -1, and thus maybeValue will be null;

int x = -1;

int? maybeValue; // null, due to x is -1

if ( x > 0) {

print('larger than 0');

maybeValue = x;

}

Usually, we’d write it like this:

1	int value = maybeValue == null ? 0 : maybeValue;

Now, we can use if-null operator like so:

// if not null, assign value to maybeValue

// if null, assign 0 to value

int value = maybeValue ?? 0;

Null Safety with type safety

So if x is -1, then maybeValue is left with null.
That’s not very good for future usage and printing.

So we can use a Type safety where if maybeValue is null, then we assign it to a default number.
Its a shorthand for if-null

int x = -1;

int? maybeValue;

if ( x > 0) {

print('larger than 0');

maybeValue = x;

}

// if maybeValue is null, then take on 0.

maybeValue ??= 0;

print(maybeValue);

Conditional Access Operator

Say we declare an array, and its of type String?.

const cities = <String?>['Shenzhen', 'Beijing', null];

for (var city in cities) {

print(city.toUppercase()); // run time crash at index 2

// city is null, and null does not have toUppercase method.

}

in order to fix this, we use conditional access operator:

String? haha;

print(haha?.toUpperCase()); // if null, would display null

// then

const cities = <String?>['Shenzhen', 'Beijing', null];

for (var city in cities) {

print(city?.toUpperCase()); // when city is null, it'll simply print it

}

Mac setup for flutter

March 24, 2021Configurationsflutteradmin

ref –

https://trevorsullivan.net/wp-content/uploads/2015/11/Trevor-Sullivan-VI-Shortcuts.pdf
https://stackoverflow.com/questions/58387606/flutter-app-running-error-dart-can-not-be-opened-developer-can-not-be-verified

Download flutter and unzip it into say, your home directory /Users/username.

Still in your home directory, type:

ls -la

You should see a whole list of files.

Look for a .zshenv or a .zshrc file:

-rw-r–r– 1 rtsao staff 91 Mar 23 16:10 .zshenv

If it doesn’t exist, just create one:

touch .zshenv

If you do have it just edit it:

vi .zshenv

Then in that file, put flutter’s bin directory in PATH:

1	export PATH=$PATH:/Users/rtsao/software/flutter/bin

then type:
flutter doctor

and follow the flutter URLs to download the needed packages:

Install xCode
Install Android

As flutter is downloading and executing, sometimes you’ll need to allow security to let it run:

Go to System Preferences > Security and click ‘Open Anyways’ for some of the packages that is trying to install.

There is a special situation where gen_snapshot will repeatedly get denied because the system can’t verify the developer.

You can allow your mac/apps downloaded from anywhere with this command:

sudo spctl –master-disable

As you download apps and allow access to installations, eventually everything will be a success:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.3, on macOS 11.1 20C69 darwin-x64, locale en-CN)
[✓] Android toolchain – develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode – develop for iOS and macOS
[✓] Chrome – develop for the web
[✓] Android Studio (version 4.1)
[✓] IntelliJ IDEA Community Edition (version 2020.3.2)
[✓] VS Code (version 1.54.2)
[✓] Connected device (1 available)

• No issues found!

Basic web app with Typescript

March 24, 2021Uncategorizedadmin

What it does:

randomly generate user
randomly generate company

It will then show it on google map.

npm install -g parcel-bundler

mkdir RandomGenerate
cd RandomGenerate
touch index.html
mkdir src
cd src
touch index.ts

Fields with Inheritance in typescript

March 24, 2021Uncategorizedadmin

class Vehicle {

constructor(public color: string) {

}

protected honk(): void {

console.log('beep');

}

If we were to construct our Car, we need to make sure it call the parent class’s constructor. We do this by using super, and passing in whatever required parameters is required. In our case, it is color: string.

We then declare new property wheels for Car.

class Car extends Vehicle {

// whenever instance is created, the constructor in parent is being called automatically

constructor(public wheels: number, color: string) {

super(color);

}

private drive(): void {

console.log('vroooom');

}

startDrivingProcess(): void {

this.honk();

this.drive();

console.log('this ' + this.color + ' car drove away');

}

const car = new Car(3, 'black');

car.startDrivingProcess();

Lastly, make sure we put in the required constructor params for Car when we instantiate it.

Classes in typescript

March 24, 2021javascriptadmin

If we want Car to have different drive, simply redefine:

class Vehicle {

drive(): void{

console.log('chug chug');

}

honk(): void {

console.log('beep');

}

class Car extends Vehicle {

drive(): void {

console.log('vroooom');

}

// const vehicle = new Vehicle();

// vehicle.drive();

// vehicle.honk();

const car = new Car();

car.drive(); // vroooom

Modifiers

public, private, protected – Restrict access

public – can be called any where, any time
private: can be only called by other methods in THIS class.
protected – called by other methods in THIS class, or by other methods in child classes.

by default, it’s public.

If we’re ever over-riding an interface, we cannot change modifier:

If its protected, we can can access in child class.

class Vehicle {

protected honk(): void {

console.log('beep');

}

class Car extends Vehicle {

private drive(): void {

console.log('vroooom');

}

startDrivingProcess(): void {

this.honk(); // access honk from Vehicle

this.drive();

}

const car = new Car();

car.startDrivingProcess(); // beep, vroooom

shortcut

class Vehicle {

constructor(public color: string) {

}

...

}

Also note that if we change it to private, then child classes can’t access it anymore.

In order to be made accessible in child class, we can change it back to public or protected.

Interfaces in typescript

March 24, 2021javascriptadmin

Interface + Classes = How we get strong code reuse

Long Type Annotation

Given an object like so:

const oldCivic = {

model: 2000,

broken: true

};

Say we want to implement a function that takes in such a type. We say, this parameter is called vehicle, and it takes in an object with property name of type string, year of type number, and whether it is broken…which is of type boolean.

const printVehicle = (vehicle: { name: string, year: number, broken: boolean }): void => {

console.log(`Name: ${vehicle.name}`);

console.log(`Year: ${vehicle.year}`);

console.log(`Broken? ${vehicle.broken}`);

}

pintVehicle(oldCivic);

Boy, this function annotation is really really long and tiring on the eyes

How to fix this long Annotation?

Creating an interface is like we are creating a type.

const oldCivic = {

year: 2000,

broken: true

}

will tell us that we need a type like this:

interface Vehicle {

year: number;

broken: boolean;

}

now we can do this:

const printVehicle = (vehicle:Vehicle): void => {

console.log(vehicle);

}

printVehicle(oldCivic);

which is much easier on the eyes and fingers.

By definition, typescript gives us compile time checking. If we change true to 1 in oldCivic, we’ll get compile time checking for oldCivic, that it does not conform to the interface.

Functions around Interfaces

const oldCivic = {

year: 2000,

broken: true,

summary(): string {

return 'awesome car!'

}

interface Vehicle {

year: number;

broken: boolean;

summary():string;

}

Is it important that Vehicles MUST have these properties? No, as long as Vehicle interface is a subset of what is provided in oldCivic, then we are okay.

In other words, as long as what we declared are included in the interface, then it is ok.

That is the ONLY QUESTION that is asked when we’re trying to check if the passed in object has the properties of the interface.

const oldCivic = {

year: 2000,

broken: true,

summary(): string {

return 'awesome car!'

}

interface Vehicle {

summary():string;

}

const printVehicle = (vehicle:Vehicle): void => {

console.log(vehicle);

console.log(vehicle.summary());

}

printVehicle(oldCivic);

Let’s change the name Vehicle to Reportable. It is much more descriptive.
And change the function name.

interface Reportable {

summary(): string;

}

const printSummary = (item: Reportable): void => {

console.log(item.summary());

}

Code Reuse with Interfaces

const drink = {

color: 'brown',

carbonated: true,

sugar: 40,

summary(): string {

return 'My drink has ${this.sugar} grams of sugar`;

}

Notice we both have summary function that returns a string. They are both considered to be ‘Reportable’ types. So they can both be used in the parameter.

const printSummary = (item: Reportable): void => {

console.log(item.summary());

}

We can use a single interface to describe very different objects.

Arrays in Typescript

March 23, 2021Uncategorizedadmin

Typed Arrays – Arrays where each element is some consistent type of value.

const carMakers: string [] = ['ford', 'toyota', 'chevy'];

const dates = [new Date(), new Date()];

const carsByMake: string[][] = [

['f150', 'f151'],

['corolla'],

];

// Help with inference with extracting values

const car = carMakers[0];

const myCar = carMakers.pop();

carMakers.map((car: string) : string => {

return car.toUpperCase();

});

Multiple Types in Arrays

// Flexible types

const importantDates = [new Date(), '2030-10-10'];

importantDates.push('2030-10-10');

importantDates.push(new Date());

When to use Arrays?

When we want to represent a collection of records which some arbitrary sort order.
of same type.

https://stackoverflow.com/questions/49047886/whats-difference-between-array-and-tuple/49047969

Tuple vs Arrays

Tuple – A tuple is a grouping of unnamed, ordered values. Each value in a tuple does not need to be the same type.

Array An array is mutable collection. They are very efficient to create, but must always be a single type.

We have a literal object like this:

const drink = {

color: 'brown',

carbonated: true,

sugar: 40

}

// array of string | number | boolean

const pepsi = ['brown', true, 40];

// But we have to memorize that 1st is the color, 2nd is boolean, 3rd is number

// so we can't use array

// we use tuple

const pepsi: [string, boolean, number] = ['brown', true, 40];

// that way we get compile time checking

// pepsi[0] = 40; would give compile time error

type alias

type Drink = [string, boolean, number]; // create a tuple type

const MountainDew: Drink = ['yellow', true, 20];

const sprite: Drink = ['clear', true, 40];

const tea: Drink = ['brown', false, 0];

But Why Tuples!?

Here’s why we don’t really use it too much.

1	const carSpecs: [number, number] = [400, 33543];

It does not describe what those numbers mean. It is not descriptive.

Let’s use object instead. It is much more descriptive because we are forced to put in a key.

const carStats = {

horsepower: 400,

weight: 3354

}

Typescript add Annotation onto Functions

March 23, 2021Uncategorizedadmin

Type annotations for functions – Code we add to tell Typescript what type of arguments a function will receive and what type of values it will return.

Type inference for functions – TS tries to figure out what type of value a function will return.

const add = (a: number, b: number): number => {

return a + b;

};

const subtract = (a:number, b:number): number => {

return a - b;

}

Alternate forms of syntax

Annotate a by providing type number
Annotate b by providing type number
Annotate the return value by providing type number

function divide(a: number, b: number): number {

return a / b;

}

const multiply = function(a: number, b: number) : number {

return a * b;

}

if no return value, we can specify void

const logger = (message: string): void => {

console.log(message);

}

TypeScript introduced a new type never, which indicates the values that will never occur.

const throwError = (message: string): never => {

if (!message) throw new Error(message);

return message;

}

// or

function keepProcessing(): never {

while (true) {

console.log('I always does something and never ends.')

}

Difference between never and void

ref – https://www.tutorialsteacher.com/typescript/typescript-never

The void type can have undefined or null as a value where as never cannot have any value.

1 2	let something: void = null; // ok let nothing: never = null; // Error: Type 'null' is not assignable to type 'never'

A function that has return type void, and no return value, actually defaults to return undefined.

function sayHi(): void {

console.log('Hi!')

}

If you you use never type, then sayHi will give a compile time error, as void is not assignable to never.

Destructuring with Annotation

const todayWeather = {

date: new Date(),

weather: 'sunny'

};

// parameter is forecast object

// return type is void

const logWeather = (forecast: { date: Date, weather: string }): void => {

console.log(forecast.date);

console.log(forecast.weather);

}

logWeather(todaysWeather);

In order to do parameter destructuring, we do this:

const logWeather = ({ date, weather } : {date: Date, weather: string}): void => {

// use date, weather as so

}

Annotation with Objects

const profile = {

age: 20,

coords: {

lat: 0,

lng: 15

setAge(age: number): void {

this.age = age;

}

};

// if we want to use de-structuring, we need to write out the structure

// { age: number } is the type

const { age } : { age: number } = profile;

//de-structure out coordinates

const { coords: { lat, lng } } : { coords: { lat: number, lng: number } } = profile;

Typescript Inference

March 23, 2021Uncategorizedadmin

Typescript Inference

variable declaration: const color
variable initialization: ‘red’

1	const color = 'red';

If declaration and initialization are on the same line, Typescript will figure out the type of ‘color’ for us.

But when are we going to add in these type Annotations?

If typescript can figure it out, why would we want to do it yourselves?

Try to use Type Inference.

But there are THREE scenarios where we rely on Type Annotations to help Typescript out.

Scenario 1 – ‘Any’ type

Whenever a function return the any type.

// when to use annotations?

// 1) function that returns the 'any' type

const json = '{"x":10, "y": 20}';

// mouse over coordinates. You'll see 'Any'

// mouse over parse and you'll see that the parse function returns

// 'any'.

const coordinates = JSON.parse(json);

JSON.parse() –> ‘false’ –> boolean
JSON.parse() –> ‘4’ –> number
JSON.parse() –> ‘{“value”, 5}’ –> {value:number}

Can’t predict what we get in return.

So as a shortcut, typescript uses ‘Any’ type.
We have no idea what type gets returned.

type Any – means TS has no idea what this is – can’t check for correct property references

Avoid variables with ‘any’ at all costs.

The reason why is because say we have declare speed to be string:

1	let speed: string = 'fast';

if we then go

1	speed.abcdef

TS will let us know that property abcdef does not exist. Because TS knows that speed is a string.
But with Any, TS doesn’t know, and won’t be able to do this check for you.

Scenerio 2 – How to use Use Type Annotation to Fix the ‘Any’ Type

We can add type annotation for object.

Say we’re expecting an object where there’s a x and y property of type number.

1	const coordinates: { x: number, y: number } = JSON.parse();

Now if we mouse over coordinates, or try to access a weird random property, we’ll get proper feedback or error.

Delayed Initialization

Another way to add type annotation manually…

// 2) When we declare a variable on oneline

// and initialize it later

let words = ['red', 'green', 'blue'];

let foundWord: boolean; // add annotation of 'boolean'

// you can also initialize it like so:

// let foundWorld = false;

// TS will now know that foundWord is of type false

for (let i = 0; i < words.length; i++) {

if (words[i] === 'green') {

foundWord = true;

}

Scenario 3 – variable shows Type cannot be Inferred Correctly

let numbers = [-10, -1, 12];

let numberAboveZero = false; // by default false

// However! if number is above zero, we want it to be assigned a number!

for (let i = 0; i < numbers.length; i++) {

if (numbers[i] > 0) {

numberAboveZero = numbers[i]; // type inference would give error here due to default false

}

what we could do:

let numbers = [-10, -1, 12];

let numberAboveZero: boolean | number = false;

// However! if number is above zero, we want it to be assigned a number!

for (let i = 0; i < numbers.length; i++) {

if (numbers[i] > 0) {

numberAboveZero = numbers[i]; // now this would be ok

}

webpack and typescript

March 23, 2021Uncategorizedadmin

1
2
3

npm init
tsc --init
npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

Webpack is a tool that allows us to bundle our code. Transform our typescript code into javascript, then emit 1 javascript bundle file.

Webpack-dev-server is a development server.

Set up a webpack project

go to tsconfig file.

“target”: “es6”
“module”:”2016″

touch webpack.config.js

webpack will automatically look for this file.