tslet x = 'x'; // use const to narrower
let vec = {x : 10, y : 20, z : 30};
getComponent(vec, x);
               // ~ Argument of type 'string' is not assignable to
               //   parameter of type '"x" | "y" | "z"'

tsconst v1 = {
    x: 1,
    y: 2,
}; // Type is { x: number; y: number; }
 
const v2 = {
    x: 1 as const,
    y: 2,
}; // Type is { x: 1; y: number; }
 
const v3 ={
    x: 1,
    y: 2,
} as const; // Type is { readonly x: 1; readonly y: 2; }

tsconst el = document.getElementById('foo'); // Type is HTMLElement | null
// can check null first then throw error for early return
if (el) {
    el // Type is HTMLElement
    el.innerHTML = 'Party Time'.blink();
}
else{
    el // Type is null
    alert('No element #foo');
}

tsconst members = ['Janet', 'Michael'].map(
    who => jackson5.find(n => n === who)
).filter(who => who !== undefined); // Type is (string | undefined)[]
 
//use type guard  to tell the type checker narrow type
//"x is T" tell checker can narrow type if the func return true
function isDefined<T>(x: T | undefined): x is T {
    return x !== undefined;
}
const members = ['Janet', 'Michael'].map(
who => jackson5.find(n => n === who) ).filter(isDefined); // Type is string[]

ts//Problem is how about layout is Fill and paint is Line ???
//What's type it should be?
interface Layer {
    layout: FillLayout | LineLayout | PointLayout;
    paint: FillPaint | LinePaint | PointPaint;
}
 
interface FillLayer {
    layout: FillLayout;
    paint: FillPaint;
}
interface LineLayer {
    layout: LineLayout;
    paint: LinePaint;
}
interface PointLayer {
    layout: PointLayout;
    paint: PointPaint;
}
type Layer = FillLayer | LineLayer | PointLayer;