function countCharacter(value){
  return value.length
}

var name = "Danger"
countCharacter(name) // 5 

var name = 1 
countCharacter(name) // ? 

var name = false 
countCharacter(name) // ? 


// Previously: sayMyName(firstName, lastName) { ...
function sayMyName(fullName) {
	console.log(`You acting kind of shady, ain't callin' me ${fullName}`);
}
sayMyName("Beyoncé", "Knowles");

if(typeof name !== string) throw "Name should be string";

// find the error in this code 
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

<div>
  {
  	data.products.map(item=><Card data={item}/>); // 😵 Cannot read the property map of undefined .. or blah blah
  }
</div>

// javascript has loose documentation
// what is the type of a and b
function add(a, b) {
  return a + b
}

const inputA = input()("Some async input for a!") // inputA could be anything
const inputB = input()("Some async input for b!") // inputB could be anything
add(inputA, inputB)

function add(a: number, b: number): number {
  return a + b
}
add(3, "4")
// 😵 Argument of type 'string' is not assignable to parameter of type 'number'.

interface Address {
  street: string;
  city: string;
  state: string;
  zipCode: string;
}

interface User {
  name: string;
  email: string;
  password: string;
  address: Address;
}

function createUser(name: string, email: string, password: string, address: Address): User {
  return {
    name,
    email,
    password,
    address : address
  };
}

const address = {
  street: "123 Main St",
  city: "Anytown",
  state: "CA",
  zipCode: "12345",
};

const newUser = createUser("John Doe", "john@example.com", "secret", address);

function sayMyName(fullName) {
  console.log(`Hello ${fullName}`);
}
sayMyName("Beyoncé", "Knowles"); // 😵 Expected 1 argument, but got 2.

type possiblyNumberOrString = number | string;

let value : possiblyNumberOrString = Math.random() > 0.5 ? 12 : "Twelve";

let physicist = Math.random() > 0.5 ? "Marie Curie" : 84;

physicist.toString(); // Ok vaild for both type

physicist.toUpperCase(); // 😵 Error: Property 'toUpperCase' does not exist on type 'string | number'.

physicist.toFixed(); // 😵 Property 'toUpperCase' does not exist on type 'number'.

// Type of scientist: number | string
let scientist = Math.random() > 0.5 ? "Rosalind Franklin" : 51;

scientist.toUpperCase(); // 😵 Property 'toUpperCase' does not exist on type 'string | number'.

if (scientist === "Rosalind Franklin") {
	scientist.toUpperCase(); // Ok
} 

if (typeof scientist === "string") {
	scientist.toUpperCase(); // Ok 
}

typeof scientist === "string" ? scientist.toUpperCase() // Ok: string
				: scientist.toFixed(); // Ok: number

const poet = {
    born: 1935,
    name: "Mary Oliver",
};
poet['born']; // Type: number
poet.name; // Type: string
poet.end; // 😵 Error: Property 'end' does not exist on type '{ born: number; name: string; }'.

type Poet = {
  born: number;
  name: string;
};
let poetLater: Poet;
// Ok
poetLater = {
  born: 1935,
  name: "Sara Teasdale",
};
poetLater = "Emily Dickinson"; //😵 Error: Type 'string' is not assignable to 'Poet'.

type WithFirstName = {
	firstName: string;
};
type WithLastName = {
	lastName: string;
};
const hasBoth = {
	firstName: "Lucille",
	lastName: "Clifton",
};

let withFirstName: WithFirstName = hasBoth; // Ok: `hasBoth` contains a `firstName` property of type `string`

let withLastName: WithLastName = hasBoth; // Ok: `hasBoth` contains a `lastName` property of type `string`

type FirstAndLastNames = {
    first: string;
    last: string;
};

// Ok
const hasBoth: FirstAndLastNames = {
    first: "Sarojini",
    last: "Naidu",
};
const hasOnlyOne: FirstAndLastNames = {
    first: "Sappho"
};
// 😵 Property 'last' is missing in type '{ first: string; }'
// 😵 but required in type 'FirstAndLastNames'.

const extraProperty: FirstAndLastNames = {
  	first: "Sarojini",
  	last: "Naidu",
  	age : 10
};
// 😵 'age' does not exist in type 'FirstAndLastNames'.

type Book = {
  author?: string; // optional author
  pages: number;
};

// Ok
const ok: Book = {
  author: "Rita Dove",
  pages: 80,
};

const missing: Book = {
  author: "Rita Dove",
};
// 😵 Error: Property 'pages' is missing in type
// '{ author: string; }' but required in type 'Book'.

const poem = Math.random() > 0.5
  ? { name: "The Double Image", pages: 7 }
  : { name: "Her Kind", rhymes: true };
/**
 * {
 *      name : string;
 *      pages : number;
 * }
 * |
 * {
 *      name : string;
 *      rythmes : boolean
 * }
 * 
 */
poem.name;      // string
poem.pages;     // number | undefined
poem.rhymes;    // booleans | undefined

type Poet = {
  born: number;
  name: string;
};

interface Poet {
  born: number;
  name: string;
}

let valueLater: Poet;
// Ok
valueLater = {
  born: 1935,
  name: 'Sara Teasdale',
};

valueLater = "Emily Dickinson";	// 😵 Error: Type 'string' is not assignable to 'Poet'.

// 😵 Error: Type 'boolean' is not assignable to type 'number'.
valueLater = {
  born: true,
  name: 'Sappho'
};

interface Animal {
  name: string;
  sound: string;
  readonly legs: number;
  run(speed: number): void;
}

interface Cat extends Animal {
  meow(): void;
}

// OK !
const myCat: Cat = {
  name: "Fluffy",
  sound: "meow",
  legs: 4,
  run(speed: number) {
    console.log(`I'm running at ${speed} mph!`);
  },
  meow() {
    console.log("Meow!");
  },
};

// any 
let anyValue: any;
anyValue = "Lucille Ball"; // Ok
anyValue = 123; // Ok
console.log(anyValue); // Ok

// unknown
function greetComedian(name: unknown) {
	console.log(`Announcing ${name.toUpperCase()}!`); // 😵 Error: Object is of type 'unknown'.
}

// using narrowing
function greetComedianSafety(name: unknown) {
    if (typeof name === "string") {
        console.log(`Announcing ${name.toUpperCase()}!`); // Ok
    } else {
        console.log("Well, I'm off.");
    }
}
greetComedianSafety("Var.Camp"); // "Announcing VAR.CAMP!" 
greetComedianSafety({}); //  "Well, I'm off." 

function isNumberOrString(value: unknown) {
    return ['number', 'string'].includes(typeof value);
}

function logValueIfExists(value: number | string | null | undefined) {
  if (isNumberOrString(value)) {
      // 😳 ? Type of value: number | string
      // 😵 'value' is possibly 'null' or 'undefined'
      console.log(value.toString());
  } else {
      // Type of value: null | undefined
      console.log("value does not exist:", value);
  }
}

function typePredicate(input: WideType): input is NarrowType;

function isNumberOrString(value: unknown) : value is number | string {
    return ['number', 'string'].includes(typeof value);
}

function logValueIfExists(value: number | string | null | undefined)  {
  if (isNumberOrString(value)) {
      // 😍 Type of value: number | string
      console.log(value.toString());
  } else {
      // Type of value: null | undefined
      console.log("value does not exist:", value);
  }
}

logValueIfExists(null)

interface Box<T> {
	inside: T;
}
let stringyBox: Box<string> = {
	inside: "abc",
};
let numberBox: Box<number> = {
	inside: 123,
}
let incorrectBox: Box<number> = {
	inside: false,
	// 😵 Error: Type 'boolean' is not assignable to type 'number'.
}

function makeTuple<First, Second>(first: First, second: Second) {
	return [first, second] as const;
}
makeTuple(true, "abc"); // OK Type of value: readonly [boolean, string]

makeTuple<string, number>("abc", 123); // OK ! Type: { key: string; value: number }

makeTuple<"abc", 123>("abc", 123); // Type: { key: "abc"; value: 123 }

makePair<string>("abc", 123); // 😵 Error: Expected 2 type arguments, but got 1.

// Type: Promise<unknown>
const resolvesUnknown = new Promise((resolve) => {
	setTimeout(() => resolve("Done!"), 1000);
});

// Type: Promise<string>
const resolvesString = new Promise<string>((resolve) => {
	setTimeout(() => resolve("Done!"), 1000);
});

// // Type: (text: string) => Promise<number>
async function lengthAfterSecond(text: string) {
	new Promise((resolve) => setTimeout(resolve, 1000))
	return text.length;
}

async function getData<T>(): Promise<T> {
    const [data,setData] = useState<T>()
    useEffect(()=>{
        //  set data
	},[])
    return data 
}
interface Data {
    name : string;
    email : string;
}
const res  = getData<Data>();