Skip to main content

3.) Get started with Typescript

note

See Other Resources tab for links to additional TypeScript learning material

Advanced Concepts in A0​

Spreader Syntax​

In src/Assignment1/math/Mat2.ts, you may see a ... syntax serving for different purposes. This syntax behaves like writing out the contents of a list separated by commas. For example, if we have an array let a=[1,2,3,4] and we put it in another array let b=[a], the result would be an array inside of an array [[1,2,3,4]]. However, if we use the rest operator let c=[...a] it is as if we listed out the elements of a when assigning c, so c will have the value [1,2,3,4] just like a.

Example: spread content of an array into another array​

const a = [1,2,3];
const b = [4,5,6, ...a]; 
console.log(b);

output:

[ 4, 5, 6, 1, 2, 3 ]

Rest Syntax​

We can also use the elipses when defining function arguments to indicate that we want to accept an arbitrary set of inputs.

Example: Rest Syntax for an unknown number of arguments​

function f(a:type1, b:type2, ...args:any[]) {
    console.log(args);
}

f(1, 2, 3, 4, 5);

Output:

[ 3, 4, 5 ]

Pay attension that this feature is used in the function overload tutorial below.

note

These are all you need to know about the spreader syntax for now. There are more usage of the spreader syntax, like spread array content as function arguments, deconstruct an array or object, and so on. To learn more, you can check out Spread syntax (...) - JavaScript | MDN.

Function Overloading (really, function call signature overloading)​

Typescript is a bit odd in that you are allowed to overload the way functions are called, but not how they are implemented. Why? This restriction turns function overloading into just another kind of type checking, and that's just what TypeScript does best. Think of it as just another kind of type checking. It can tell you whether the arguments you provided are valid, but it's not going to change whatever function you wrote to deal with those arguments. So you can tell TypeScript that different sets of arguments are ok, but the actual function you write needs to be able to deal with any of these "ok" arguments.

In src/Assignment1/math/Mat2.ts, we have overloaded the call signature for the constructor and times functions of our Mat2 class. This makes creating matrices more convenient and makes multiplication behave a more like it's abstract mathematical counterpart. For example, You can construst a Mat2 object with different signature, like

let m1 = new Mat2();
let m2 = new Mat2([1,2,3,4]);
let m3 = new Mat2(1,2,3,4);

And overloading Mat2.times (matrix multiplication) lets us apply it to other matrices, vectors, or scalars, just as we would with matrices in more casual writing (nothing says 'casual' like matrix multiplication...):

// prepare matrices and vector to use
let m = new Mat2(1,2,3,4);
let m1 = new Mat2(5,6,7,8);
let v1 = new Vec2(2, 3);

// demo of different times usage
let a = m.times(m);
let b = m.times(v);

For more details on overloading in Mat2, see the code comments.

Testing for equality​

"Whoa, a double equals =="​

Double equals sign tests whether two values or equal after attempting to cast them to the same type.

"Now it's starting to look like a triple equals ==="​

Tripple equals sign tests whether two objects have equal values and types.