React+TypeScript组件开发（一）TypeScript类型

1. TypeScript 基础类型

// 布尔类型
let isDone: boolean = false

// 数值类型
let age: number = 20
let binaryNumber: number = 0b1111

// string 类型
let firstName: string = 'viking'
let message: string = `Hello, ${firstName}, age is ${age}`

// undefined 和 null 是所有类型的子类型
let u: undefined = undefined
let n: null = null

let num: number = undefined

2. any类型和联合类型

// any 允许赋值为任何类型
let notSure: any = 4

notSure = 'maybe it is a string'
notSure = true

notSure.myName
notSure.getName()

// 当有明确的类型时应该避免使用any  会丧失类型检查的作用 并且没有类型方法的提示了

// 一个变量可以是 number 或者 string （限制这俩个类型 其他不行）

let numberOrString: number | string  = 234
numberOrString = 'abc'

3. Array和Tuple

// Array
let arrOfNumbers: number[] = [1, 2, 3, 4]
arrOfNumbers.push(5)

function test() {
    console.log(arguments) // array like object
    arguments.length
    arguments[0]
    // 但是没有数组的一些方法  例如 arguments.forEach 等

    let htmlCollection: Node    
}

// Tuple 合并了多个类型的数组 
let user:[string, number] = ['viking', 1]

4. Interface

// Interface接口
/**
 * 1 对对象的形状（shape）进行描述
 * 2 对类 （class） 进行抽象
 * 3 Duck Typeing（鸭子类型）
 */

interface IPerson {
    name: string;
    age: number;
    gender?: string; // 可选属性
    readonly id: number; //只读属性
}

let viking: IPerson = {
    name: 'viking',
    age: 20,
    id: 1234
}
// viking.id = 1111 错误  只读属性不能继续赋值
const viking2 = 1111; // 只读

5.函数类型和推断

// 函数类型和推断  参数类型  返回类型 类型判断 参数默认值 可选参数
function add(x: number, y: number = 10, z?: number): number {
    if(typeof z === 'number') {
        return x + y + z
    }
    return x + y
}

let result = add(2, 4)

// 函数表达式 add2  为 函数类型 自动推断类型为function 
const add2 = function (x: number, y: number = 10, z?: number): number {
    if(typeof z === 'number') {
        return x + y + z
    }
    return x + y
}

// => 声明 返回值类型
const add3: (x: number, y: number, z?: number) => number = add

let str = 'str'
// str = 123 错误 TypeScript 会在没有类型的时候推测出一个类型

6. Class

// Class
// 面向对象的基本术语
// 类 （Class）: 定义了一切事物的抽象特点
// 对象(Object): 类的实例
// 面向对象（oop） 三大特性： 封装、继承、多态

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name
    }

    run() {
        return `${this.name} is running`
    }
}

const snake = new Animal('snake')
snake.run()

// 继承
class Dog extends Animal {
    bark() {
        return `${this.name} is barking`
    }
}

const bati = new Dog('bati')
bati.run()
bati.bark()

// 方法的重写
class Cat extends Animal {
    constructor(name) {
        super(name) // 必须super调用父类的方法
    }
    run() {
        return `Miao , ${super.run()}`
    }
}

const miao = new Cat('xixi');
miao.run()
// 多态 不需要了解是什么类型，只需要调用方法，就会执行正确的方法，

7 Class2

// Class
// 面向对象的基本术语
// 类 （Class）: 定义了一切事物的抽象特点
// 对象(Object): 类的实例
// 面向对象（oop） 三大特性： 封装、继承、多态

class Animal {
    name: string;
    private age: number;  // 只有当前类中可以使用
    readonly sex: boolean;  // 只读 不可以写
    protected gender: boolean; // 父类和子类中可以使用
    static categoies: string[] = ['mammal', 'bird'] // 静态属性
    static isAnimal(a) {  // 静态方法
        return a instanceof Animal
    }
    constructor(name: string) {
        this.name = name
    }

    run() {
        return `${this.name} is running`
    }
}

const snake = new Animal('lily')
console.log(snake.name)
snake.name = 'lucy'
// snake.age 属性为私有属性 只能在父类中访问

console.log(Animal.isAnimal(snake)) // true

// 继承
class Dog extends Animal {
    bark() {
        return `${this.name} is barking`
    }
}

const bati = new Dog('bati')
bati.run()
bati.bark()

// 方法的重写
class Cat extends Animal {
    constructor(name) {
        super(name) // 必须super调用父类的方法
    }
    run() {
        return `Miao , ${super.run()}`
    }
}

const miao = new Cat('xixi');
miao.run()
// 多态 不需要了解是什么类型，只需要调用方法，就会执行正确的方法，

// 修饰符 默认的属性都是 public 在任何地方都可以访问到

8. 接口实现 接口继承

// 俩个类共同的接口
interface Radio {
    switchRadio(triggerL: boolean) : void  // 参数 返回值
}

// 单独的接口
interface Battery {
    checkBatteryStatus();
}

// 接口继承
interface RadioWithBattery extends Radio {
    checkBatteryStatus();
}


class Car implements Radio {
    switchRadio(triggerL: boolean) {

    }
}

class Cellphone implements Radio, Battery {
    switchRadio(triggerL: boolean){

    }
    checkBatteryStatus(){

    }
}
// 俩个类都有共同的方法  可以提取出来一个interface

9 枚举

const enum Direction {
    Up,
    Down,
    Left,
    Right
}
// 枚举默认从0开始赋值 自动递增
// 也可以给定第一个元素一个数字  自动递增
// 赋值常量字符串
// 枚举对象可以通过数组取到他的key字符串 Direction[0]  输出 'Up'

10 泛型

function echo<T>(arg: T):T {
    return arg
}

const result = echo('string')

function swap<T,U>(tuple:[T,U]):[U,T] {
    return [tuple[1],tuple[0]]
}

const result2 = swap(['string', 123])

11 . 约束泛型

function echoWithArr<T>(arg: T[]):T[] {
    console.log(arg.length)
    return arg
}

interface IwithLength {
    length: number
}

function echoWithLength<T extends IwithLength> (arg: T):T {
    console.log(arg.length)
    return arg
}
const str = echoWithLength('string')
const arr = echoWithLength([1,2,3])
const obj = echoWithLength({length: 1})

12 类型断言和别名

// type aliases 类型别名
type PlusType = (x:number, y:number) => number
function sum(x:number, y:number):number {
    return x + y
}

const sum2: PlusType = sum

type NameResolver = () => string
type NameOrResolver = string | NameResolver

function getName(n: NameOrResolver):string {
    if( typeof n === 'string') {
        return n
    }else {
        return n()
    }
}

// type assertion 类型断言

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
    // }
    if((<string>input).length) {
        return (<string>input).length
    } else {
        return input.toString().length
    }
}

13 声明文件 引入第三方 @types typeconfig.json typesearch查找三方库