【重点突破】—— Typescript走进类型的世界

一、编程语言的类型

• 动态类型语言
• 静态类型语言

二、Typescript究竟是什么

• Javascript that scales Javascript的超集
• 静态类型风格的类型系统
• 从es6到es10甚至是esnext的语法支持
• 兼容各种浏览器，各种系统，各种服务器，完全开源

三、官网

typescriptlang.org

四、为什么要使用Typescript

• 程序更容易理解

1. 问题：函数或者方法输入输出的参数类型，外部条件等
2. 动态语言的约束：需要手动调试等过程
3. 有了Typescript：代码本身就可以回答上述问题

• 效率更高

1. 在不同的代码块和定义中进行跳转
2. 代码自动补全

• 更少的错误

1. 编译期间能够发现大部分错误
2. 杜绝一些比较常见的错误

• 非常好的包容性

1. 完全兼容javascript
2. 第三方库可以单独编写类型文件
3. 大多数项目都支持使用typescript

五、一些小缺点

1. 增加了一些学习成本
2. 短期内增加了一些开发成本

六、安装typescript

npm install -g typescript
 
tsc -v　　

推荐使用IDE: visual Studio code

编译成js：报错也会生成编译结果

tsc test.ts
 
cat test.js　　

七、原始数据类型和Any类型

let isDone: boolean = false
let age: number = 10
let firstName: string = 'viking'
let message: string = `Hello, ${firstName}`
 
let u: undefined = undefined
let n: null = null
 
let notSure: any = 4
notSure = 'maybe a string'
notSure = true
 
notSure.myName
notSure.getName()　　

八、数组和元组

let arrOfNumbers: number[] = [1, 2, 3]
arrOfNumbers.push(3)
 
function test(){
console.log(arguments)
}
 
let user: [string, number] = ['viking', 20]
user.push('123')　　

九、Interface 接口

• 对对象的形状(shape)进行描述
• Duck Typing(鸭子类型)

interface person{
   readonly id: number;
   name: string;
   age?: number;
}
 
let viking: person = {
    id: 1,
    name: 'viking'
}　　

十、函数

在JS中，函数是一等公民

const add = (x:number, y: number, z?: number) : number => {
     if(typeof z === 'number'){
         return x + y + z
     }else{
         return x + y
     }
}
 
let result = add(1, 2)
 
interface ISum {
      (x:number, y:number, z?:number): number
}
 
let add2: ISum = add

 十一、类型推论 联合类型和类型断言

//type inference
let str = 'str'
 
//union types
let numberOrString: number | string
numberOrString = 'abc'
numberOrString = 123
numberOrString.valueOf()
numberOrString.toString()
 
function getLength(input:string | number): number{
   const str = input as string
   if(str.length){
    return str.length
   }else{
    const number = input as number
    return number.toString().length
   }
}
 
//type guard
function getLength2(input:string | number): number{
  if(typeof input === 'string'){
    return input.length
  }else{
    return input.toString().length
  }
}

十二、class 类　　

• 类(Class): 定义了一切事物的抽象特点
• 对象(Object):类的实例
• 面向对象(OOP)三大特性： 封装、继承、多态

//封装
class Animal {
    constructor(name){
        this.name = name
    }
    run(){
        return `${this.name} is running`
    }
}
 
const snake = new Animal('lily')
console.log(snake.run())
 
//继承
class Dog extends Animal {
    bark() {
        return `${this.name} is barkong`
    }
}
 
const xiaobao = new Dog('xiaobao')
console.log(xiaobao.run())
console.log(xiaobao.bark())
 
//多态 - 重写
class Cat extends Animal {
    static categories = ['mammal']
    constructor(name) {
        super(name)
        console.log(this.name)
    }
    run(){
        return 'Meow, ' + super.run()
    }
}
const maonao = new Cat('maomao')
console.log(maomao.run())

Typescript中的类

• Public: 修饰的属性或方法是共有的
• Private: 修饰的属性或方法是私有的
• Protected: 修饰的属性或方法是受保护的

十三、类和接口

• 继承困境
• 类可以使用implements来实现接口

interface Radio {
    switchRadio(trigger: boolean) : void;
}
 
interface Battery {
    checkBatteryStatus(): void;
}
 
interface RadioWithBattery extends Radio{
    checkBatteryStatus(): void;
}
 
class Car implements Radio{
    switchRadio(trigger: boolean){
 
    }
}
 
class CellPhone implements RadioWithBattery {
    switchRadio(trigger: boolean){
        
    }
    checkBatteryStatus(){
 
    }
}

十四、枚举　　

//常量枚举 - 双向映射
const enum Direction {
    Up = 'UP',
    Down = 'DOWN', 
    Left = 'LEFT',
    Right = 'RIGHT'
}
 
// console.log(Direction.up)
// console.log(Direction[0])
const value = 'UP'
if(value === Direction.Up){
    console.log('go up!')
}

十五、泛型

相当于一个占位符，一个变量，把定义好的参数类型原封不动的输出

function echo<T>(arg: T): T {
    return arg
}
 
const str: string = 'str'
const result = echo(str)
 
function swap<T, U>(tuple: [T, U]):[U, T]{
    return [tuple[1], tuple[0]]
}
 
const reusult2 = swap(['string', 123])
 
function echoWithArr<T>(arg: T[]): T[] {
    console.log(arg.length)
    return arg
}
const arrs = echoWithArr([1, 2, 3])
 
interface IWithLength {
    length: number
}
 
function echoWithLength<T extends IWithLength>(arg: T): T {
    console.log(arg.length)
    return arg
}
 
const str2 = echoWithLength('str')
const obj = echoWithLength({length: 10})
const arr2 = echoWithLength([1, 2, 3])