# Everyday Types
TIP
I will skip for all those primitives such as string/number/boolean/symbol, because they're not really different from JS
- but with
annotations
on ur Variables, it's totally different way from JS
let myName: string = "Alice";
// in js
let myName = "Alice";
# any
special
type in TS, that you can use whenever you don’t want a particular value to cause typechecking errors- When you don’t specify a type, and TypeScript can’t infer it from context, the compiler will typically
default
toany
let obj: any = { x: 0 };
// None of the following lines of code will throw compiler errors.
// Using `any` disables all further type checking, and it is assumed
// you know the environment better than TypeScript.
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;
- Use the compiler flag
noImplicitAny
to flag any implicit any as an error.
# Object
Optional
Properties with?
// The parameter's type annotation is an object type
function printCoord(pt: { x?: number; y: number }) { // x is optional
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });
# Union
function printId(id: number | string) {
if (typeof id === "string") {
// In this branch, id is of type 'string'
console.log(id.toUpperCase());
} else {
// Here, id is of type 'number'
console.log(id);
}
}
# Type Aliases
- A type alias is exactly that a
name
for any type
type Point = {
x: number;
y: number;
};
printCoord({ x: 100, y: 100 });
// Exactly the same as the earlier example
function printCoord(pt: Point) {
console.log("x value is " + pt.x);
console.log("y value is " + pt.y);
}
// use a type alias to give a name to any type at all
type ID = number | string;
- Note that aliases are only aliases - you
cannot
use type aliases to createdifferent/distinct “versions”
of the same type- in my undertanding, it may says that like
type p = string, t:p = "test"
still illegal - Can still be
re-assigned
withsame type
though
- in my undertanding, it may says that like
- A type
cannot
be changed after beingcreated
type Window = {
title: string
}
type Window = {
ts: TypeScriptAPI
}
// Error: Duplicate identifier 'Window'.
Extending
a type viaintersections &
type Animal = {
name: string
}
type Bear = Animal & {
honey: boolean
}
const bear = getBear();
bear.name;
bear.honey;
# Interfaces
An
interface
declaration isanother
way to name anobject
typeExtending
an interface
interface Animal {
name: string
}
interface Bear extends Animal {
honey: boolean
}
const bear = getBear()
bear.name
bear.honey
Adding
new fields
interface Window {
title: string
}
interface Window {
ww: TypeScriptAPI
}
// Duplicate identifier 'Window' are illegal
const src = 'const a = "Hello World"';
window.ww.transpileModule(src, {});
# Differences Between Type Aliases and Interfaces
- a type
cannot
be re-opened toadd
new properties - an
interface
which is alwaysextendable
- A type
cannot
be changed after beingcreated
- If you would like a
heuristic
, useinterface
until you need to use features fromtype
.
# Type Assertions
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");
- disallow more complex coercions, can use
two
assertions
// first to any (or unknown, which we’ll introduce later), then to the desired type
const a = (expr as any) as T;