# 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 to any
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 create different/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-assignedwith same type though
  • A type cannot be changed after being created
type Window = {
  title: string
}
type Window = {
  ts: TypeScriptAPI
}
 // Error: Duplicate identifier 'Window'.

  • Extending a type via intersections &
type Animal = {
  name: string
}
type Bear = Animal & { 
  honey: boolean 
}
const bear = getBear();
bear.name;
bear.honey;

# Interfaces

  • An interface declaration is another way to name an object type

  • Extending 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 to add new properties
  • an interface which is always extendable
  • A type cannot be changed after being created
  • If you would like a heuristic, use interface until you need to use features from type.

# 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;
Last Updated: 2021/11/19 上午11:23:03