Type Annotation

• code we add to tell TS whay type of value a variable will refer to
• tell typescript the type

Type Interference

• 타입추론 — typescript guess the type

• declare 시에 발생한다.

  → Variable that we declaring and then initializing on the same line

• TS tries to figure out what type of value a variable refers to

annotation in action

//built in objects
let now: Date = new Date();

//array
let colors: string[] = ['red', 'green']

//boolean
let truths: boolean[] = [true, false, false]

//class
class Car{}
let car: Car;

//object
let point: { x: string; y: number;} = {
    x: 10,
    y:20,
}

//function
const logNumber: (i: number) => void = (i: number) => {
  console.log(i);
};

//function that return the 'any'
const json = '{"x":10,"y":20}'
const coordinates: { x: number; y: number } = JSON.parse(json);
console.log(coordinates);

//when we declare a variable on one line, and initializate it later
let words = ['red', 'green', 'blue'];
let foundWord:boolean;
for (let i = 0; i < words.length; i++) {
    const element = words[i];
    if(element === 'green')foundWord = true;
}

//  variable whose type cannot be inferred correctly
let numbers = [1, 10, 12];
let numberAboveZero: boolean|number = false;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 0) numberAboveZero = numbers[i;]
}

annotation in function and object

const add = (a: number, b: number): number => {
    return a + b;
}

const logger = (message: string): void => {
    console.log(message);
}

const forecast = {
    data: new Date(),
    weather: 'sunny',    
}

//destruction 
const logWeather = ({date,weather}: { date: Date, weather: string }): void => {
    console.log(date);
    console.log(weather);      
}

const profile = {
  name: 'dahye',
  age: 11,
  coords: {
    lat: 0,
    lng: 15,
  },
  setAge(age: number): void {
    this.age = age;
  },
};

const { age }: { age: number } = profile;
const { coords: { lat, lng } }: { coords: { lat: number; lng:number} } = profile;

profile.setAge(99);
console.log(profile);

const importantDates: (Date | string)[] = [new Date()];

importantDates.push('2030-10-10')
importantDates.push(new Date());

Turples

• array-like structure where each element represents some property of a record
• contains multiple diffrent properties to describe one single thing.

const drink = {
    color: 'brown',
    carbonated: true,
    sugar:40
}

type Drink = [string, boolean, number];

const pepsi:Drink = ['brown', true, 40];
const sprite: Drink = ['clear', true, 40];

/**
 * [Tuples]
 * hard to understand what that mean
 */
const carSpecs : [number,number] = [400,4465]

const carStats = {
    heroPower: 400,
    weight:4465,
}

Interface

• function args가 복잡할때 유용하게 사용할 수 있다.

const oldCivic = {
    name: 'civic',
    year: 2000,
    broken:true
}

interface Vehicle {
  name: string;
  year: number;
  broken: boolean;
}

const printVehicle = (vehicle: Vehicle): void => {
        console.log(vehicle);        
}

printVehicle(oldCivic);