Typescript

=js+A type system(what we are learning)

• catch error
• “type annotations”=>analyze our code
• only active during development
• doesnot provide any performance optimization

npm install -g typescript ts-node
npm init -y创建新项目，建立ts文件写代码
ts-node index.ts=tsc index.ts(编译ts为nodejs格式)+node index.js

Interfaces + Classes = how we get really strong code reuse in TS

view=>extention=>prettier
perfermence=>setting=>format on save/sigle quotes( tick )

import  axios  from  'axios';

const  url  =  'http://jsonplaceholder.typicode.com/todos/1';

// 限制变量类型

interface  Todo {

id:  number;

title:  string;

completed:  boolean;

}

axios.get(url).then((res) => {

const  todo  =  res.data  as  Todo;

const  ID  =  todo.id;

const  title  =  todo.title;

const  finished  =  todo.completed;

logTodo(ID, title, finished);

});

//限制变量和标题一一对应

const  logTodo  = (id:  number, title:  string, completed:  boolean) => {

console.log(`

ID:${id}

Title:${title}

finished:${completed}

`);

};

What is typescript

Syntax + Features VS Design Patterns with TS

1.png

Types

interface=>type
type ===== value

2.png

Annotation

Developers tell Typescript the type

let  apples  :  number  =  5

let  speed:  string  =  'fast'

let  hasName:  boolean  =  true

let  nothingMuch:  null  =  null

let  nothing:  undefined  =  undefined

//built in objects

let  now:Date  =  new  Date()

//Array

let  colors:  string[] = ['red','green','blue'];

let  myNumbers:number[] = [1,2,3]

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

//classes

class  Car {

}

let  car:  Car  =  new  Car()

//Object literal

let  point:{x:number;y:number} = {

  x:10,

  y:20

}

//Fuction

const  logNumber: (i:  number) =>  void  = (i:number)=>{

  console.log(i)
  
}

Type Inference

Typescript gueses the type
JSON.parse() we may get different type
‘false’=>(boolean)JSON.parse()=>any
‘4’=>(number)JSON.parse()=>any
‘{“value”:5}’=>({value:number})JSON.parse()=>any
‘{“name”:“alex”}=>({name:string})JSON.parse()=>any

//When to use annotations

// 1）Function that returns the 'any' type

const  json  ='{"x":10,"y":20}'

const  coordinates:{x:number;y:number} =  JSON.parse(json)

//JSON function returns the 'any' type

console.log(coordinates)

// 2)When we declare a variable on one line

// and initalizate it late

let  words  = ['red','green','blue']

let  foundWord:  boolean;

for (let  i  =  0; i  <  words.length; i++) {

  if(words[i] ===  'green'){

    foundWord  =  true

  }

}

// 3) Variable whose type cannot be inferred correctly

let  numbers  = [-10, -1, 12]

let  numberAboveZero  :boolean|number  =  false;

for (let  i=  0;i  <  numbers.length; i++){

  if(numbers[i] >  0){

    numberAboveZero  =  numbers[i]//type inference

  }

}

Annotations with function and objects

(destructuring)

• functions
  never 类型是 TypeScript 中的底层类型。它自然被分配的一些例子：

(A) 一个从来不会有返回值的函数（如：如果函数内含有 while(true) {}）；
(B)一个总是会抛出错误的函数（如：function foo() { throw new Error('Not Implemented') }，foo 的返回类型是 never）；

const  add  = (a:  number, b:  number) => {

return  a  +  b

}

const  substract  = (a:  number, b:  number) =>{

return  a  -  b;

}

function  dicide(a:number , b:number):number{

return  a  /  b

}

const  multiply  =  function (a:number,b:number):number{

return  a  *  b

}

const  logger  = (message :  string):void  =>{

console.log(message)

}

const  throwError  = (message :  string):void=>{

if(!message){

throw  new  Error(message)

}

}

const  forecast  = {

date :new  Date(),

weather:'sunny'

}

// const logWeather = (forecast: {date: Date, weather: string})=>{

// console.log(forecast.date)

// console.log(forecast.weather)

// }

//destructuring

const  logWeather  = ({date,weather}: {date:  Date, weather:  string})=>{

console.log(date)

console.log(weather)

}

• objects

const  profile  = {

  name:'alex',

  age:20,

  coords:{

    lat:0,

    lng:15

  },

setAge(age:  number):void{

  this.age  =  age

}

}

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

Matsering Typed Arrays

• TS can do type inference when extracting values from an array
• TS can prevent us from adding incompatible values to the array
• We can get help with ’map’, ‘forEach’, ‘reduce’ function
• Flexiable- arrays can still contain multiple different types

const  carMakers:  string[] = ['ford','toyota','chevy']

const  dates  = [new  Date(),new  Date()];

const  carsByMake:string[][] = [

['f150'],

['corolla'],

['camaro']

]

//Multiple Types in Arrays

//Help with inference when extracting values

const  car_  =  carMakers[0]

const  myCar  =  carMakers.pop();

//prevent incimpatible values

carMakers.push(100)

//Help with 'map'

carMakers.map((car:string):string  =>{

return  car.toUpperCase()

})

//Flexiable types

const  importantDates:(Date|string)[] = [new  Date(),'2030-10-10']

importantDates.push(new  Date())

importantDates.push('2030-10-10')

Tuples in typescript

• tuple=>array-like structure where each element represents some property of a record
• Why tuples?
  =>不建议，比如一个object有几个相同类型就无法判定
  除了这种情况可以用

const  drink  = {

color:'brown',

carbonated:true,

sugar:40

}

//Type alias

type  Drink  = [string, boolean, number];

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

const  sprite:  Drink  = ['clear',false,0]

const  tea:  Drink  = ['brown',false,0]

const  carSpecs:[number, number] = [400,3354];

const  carSptats  = {

horsepower: 400,

weight:3354,

}

The All-Important Interface

Interfaces + Classes = How we get really strong code reuse in TS
Interfaces->Create a new type, describing the property names and value types of an object

interface  Reportable {

  summary():  string;

}

const  oldCivic  = {

  name: 'civic',

  year: new  Date(),

  broken: true,

  summary():  string {

    return  `Name: ${this.name}`;

  },

};

const  drink_  = {

  color: 'brown',

  carbonated: true,

  sugar: 40,
  
  summary():  string {

    return  `My drink has ${this.sugar} grams of sugar`;

  },

};

const  printSummary  = (item:  Reportable):  void  => {

  console.log(item.summary());

};

printSummary(oldCivic);

printSummary(drink_);

Building Functionality with Classes

• Classes => Blueprint to create an object with some fields(values) and methods(functions) to represent a thing
• Instance Methods Modifiers
  Public=>This method can be called any where, any time
  Private=>This method can only be called by other methods in this class
  Protected=>This method canbe called by other methods in this class, or by other methods in child classes

class  Vehicle {

  color:  string  =  'red';

  constructor(color:  string) {

  this.color  =  color;

}

public  drive():  void {

  console.log('chugga chugga');

}

public  honk():  void {

  console.log('beep');

}

}

const  vehicle  =  new  Vehicle('orange');

//如果honk是protected这里就不可以被调用

vehicle.honk();

console.log(vehicle.color);

class  Car_  extends  Vehicle {

  constructor(public wheels:number,color:string){

  super(color)

}

//复写方法不能改变类型（public/private/protected)

drive():  void {

  console.log('vroom');

}

startDrivingProcess():  void {

  this.drive();

  //如果honk是private这里就不能用

  //因为private只有同class内部的function可以调用

  //protected可以

  //因为protected除了同class内部的function以外

  //还有可以被其子class的function调用

  this.honk();

}

}

const  car__  =  new  Car_(4,'red');

car__.drive();

car__.honk();