ts学习笔记

// 声明数字
let num: number

num = 1
num = 'str' // error

// 声明字符串
let str: string = 'str'

// 声明多种类型
let value: number | string

value = 1
value = 'str'


// 声明任意数据类型；若声明函数没有指明类型，也是 any 类型
let value: any

value = true
value = { foo: 'foo' }

// 声明函数返回的类型
// 函数参数支持类型也是与声明变量类似
function foo (bar: string | number): boolean {
    var flag:boolean = true

    console.log(bar.length) // length 属性只在 string 类型存在，number 类型不存在；因为编译器会报错
    console.log(bar.toString()) // 两种类型都有的方法，能够正常运行，因此当声明变量为多个类型的时候，访问的属性需要两个类型都具有的方法或者属性
    return flag
}

interface Person {
    name: string,
    age: number
}

let person: Person = {
    name: 'kyrie',
    age: 20
}

// 当有属性是不确定添加，部分对象包含，部分对象不包含的情况，可以使用这样子来表示：
interface Person {
    name: string,
    nickName?: string,
    age: number,
    id?: number,
}

let person: Person = {
    name: 'kyrie',
    age: 20,
    id: 10
}

// 当一个对象需要一些不确定名称的值，可以使用任意属性的定义方法，但是已知的属性必须是任意属性类型的子集；例如已知属性全部都是 string 类型；那么任意属性可以定义为 string, 但不能够定义为 number；如果已知属性有number, string，那么任意属性定义为 string 也不正确
interface: Person {
    readonly id: number,
    name: string,
    age: number,
    [propName: string]: any // 所以这里可以定义为 any 类型；那么 string 与 number 就是 any 的子集
}

// 注意上面的接口有一个是 readonly 关键词，表示只读，也就是第一次赋值，不能二次赋值

let person: Person = {
    id: 10,
    name: 'kyrie',
    age: 20
}
person.id = 11 // error

// 1. 类型 + 方括号表示方法，类型包括 any 的定义
let arr: number[] = [1, 2, 3] // 数组元素只能是数字

// 2. 泛形(后面会说到泛型的详细信息)
let arr: Array<number> = [1, 2, 3]

// 3. 接口类型
interface NumberArray {
    [index: number]: number
}
let arr: NumberArray = [1, 2] // successful
let arr2: NumberArray = [1, 2, '3'] // error

// 4. 内置对象，常见的有：IArguments(普通函数的参数), NodeList, HTMLCollection

function foo () {
    // let args: number[] = arguments // error
    let args: IArguments = arguments

    console.log(args)
    console.log(typeof args)
}

function getLength (value: string | number): void {
    // 断言方式有两种
    // 第一种是 <type> 的方式
    console.log((<string>value).length)
    // 第二种是 值 as 类型
    console.log((value as string).length)
    // 因为第一种方式在 jsx 里面会存在误区，所以在 jsx 语法里面，只能使用第二种
}

// 使用 type 关键词
type numStr = string | number
type numStrFun = numStr | () => string

function getLength (value: numStr) {
    // ...
}

// type 关键词除了可以定义类型之外，还可以字符串字面量
type top3 = 'first' | 'second' | 'third'
function typeFun (value: top3) {
    console.log(value)
}

typeFun('first')
typeFun('fourth') // 报错，因为参数 fourth 不在定义的字符串字面量中

var multiType: [string, number]

multiType = ['1', 1]
// 元组与数组比较类似，可以通过下标用来赋值或者取值，但是赋值的时候，这个值需要下标对应类型一致，否则会出错
multiType[0] = 2 // error，类型对不上

// 可以使用 push 添加属性，也可以使用 slice 来获取不同值
multiType.push('2') // 注意使用 push 的时候，需要初始化值之后才能使用
multiType.push(2)
multiType.slice(0) // [ '1', 1, '2', 2 ]
multiType.push(true) // error 类型对不上

enum Color {
    red,
    green,
    blue
}

// 取值
Color['red'] // 0
Color[1] // 'green'

// 上面的枚举类型，转换到js之后是这样子的：
var Color;
(function (Color) {
    Color[Color["red"] = 0] = "red";
    Color[Color["green"] = 1] = "green";
    Color[Color["blue"] = 2] = "blue";
})(Color || (Color = {}));

// 执行后相当于：
var Color = {
    0: 'red',
    1: 'green',
    2: 'blue',
    'red': 0,
    'green': 1,
    'blue': 2
}
// 通过下标与字符串都能够访问到对应数据

enum Color {
    red = 1,
    green,
    blue
}

Color[2] // 'green'
Color[3] // 'blue'
// 所以这个数可以是负数或者是小数，每次增加步长都是1；也可以是计算所得值：

enum Color {
    red,
    green,
    blue = 'blue'.length
}

// 需要注意的是，这个计算所得值对应的枚举项需要是最后的值；如果不是最后的值，那么计算所得值后面的枚举项将不能每次步长+1；无法获取确切的初始值而报错。

// 1. 类的属性与方法添加修饰符：public(默认值，任何对象都能够访问到), private(只能在当前类的方法访问), protected(只能在当前类或者子类访问)
class Animal {
    public name
    private nickName

    constructor (name: string, nickName: string) {
        this.name = name
        this.nickName = nickName
    }

    // 默认是 public，实例对象可以访问
    getName () {
        return this.name
    }
    // 私有方法，只能在当前类访问
    private getNickName () {
        return this.nickName
    }
    // 保护方法，只能在当前类或者子类中访问
    protected getFullName () {
        return this.name + ':' + this.nickName
    }
}

// 2. 抽象类，使用 abstract 关键词声明的类；抽象类是不能够直接实例化，只能通过有子类继承，并由子类实现所有抽象类的抽象方法
abstract class Eat {
    abstract eatFood ()
}

class Animal {
    public food
    constructor (food: string) {
        this.food = food
    }
    eatFood () {
        console.log('eat food:', this.food)
    }
}

function repeatValue<T> (value: T): T[] {
    var arr: T[] = []

    for (var i = 0; i < 3; i++) {
        arr.push(value)
    }

    return arr
}

repeatValue('str') // ['str', 'str', 'str']
repeatValue(1) // [1, 1, 1]

// 泛型中的类型可以是 interface 的类型，也可以是基础的数据类型
// 可以在函数中定义多个泛型的类型
function reverse<T, U> (v1: T, v2: U): [U, T] {
    return [v2, v1]
}
reverse('1', 2) // [2, '1']

// 由于泛型定义的变量并不知道是什么类型，因此如果调用变量的一些属性的时候，因为类型不确定的关系，系统会报错
// 这个泛型的默认类型为 string; 可以在函数使用的时候，传的参数没有指定确切类型的时候使用
function getLen<T = string> (value: T): number {
    return value.length // error
}

// 但是我们的泛型也是可以添加约束的，那么在约束范围内使用方法或者属性就可以了：
interface lengthInterface {
    length: number
}

function getLen<T extends lengthInterface> (value: T): number {
    return value.length
}

// 泛型接口 interface
// 没有使用泛型定义的接口，根据接口定义函数表达式的函数
interface includeFunction {
    (str: string, subStr: string): boolean    
}
let isInclude: includeFunction
isInclude = function (str: string, subString): boolean {
    return str.indexOf(subStr) > -1
}

// 使用泛型定义接口的话
interface repeatFunction {
    <T>(value: T, len: number): Array<T>
}
let repeatByLen: repeatFunction
repeatByLen = function<T> (value: T, len: number): Array<T> {
    let arr: Array<T> = []

    for (let i = 0; i < len; i++) {
        arr.push(value)
    }
    return arr
}
repeatByLen('foo', 3) // ['foo', 'foo', 'foo']

// 在类中添加泛型
class NumberClass<T> {
    value: T,
    add: (x: T, y: T) => T
}

let num = new NumberClass()
num.value = 10
num.add = function (x, y) { return x + y }