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();
