TypeScript学习笔记

在这里推荐一个在线调试TypeScript的网站:TypeScript演练场

1.接口与对象类型

1.1对象类型

interface Person {
    name: string,
    age?: number,
    [propName: string]: any,
    cb(): number
}
const user: Person = {
    name: '张三',
    school: '某某中学',
    cb: () => {
        return 123
    }
}

console.log(user)

1.2接口继承

interface A {
    name: string
}
interface B extends A {
    age: number
}

let user: B = {
    name: '张三',
    age: 12
}

console.log(user)

2.数组类型

const arr: number[] = [123, 123]
const arr1: object[] = [{ name: 12 }]
const arr2: boolean[] = [true, false]
const arr3: number[][][] = [[], [], [[]],]
const arr4: any[] = [true, 1, '字符串']
const arr5: Array<number> = [1, 3]
const arr6: Array<Array<number | string>> = [[1, 3, 4, '可以是数字，也可以是字符串']]
// 无需主动声明
// interface IArguments {
//     [index: number]: any;
//     length: number;
//     callee: Function;
// }
function Arr(...args: any): void {
    let arr: IArguments = arguments
    console.log(arr)
}
Arr(4, 5, 6)

interface ArrNumber {
    [index: number]: string
}
const arr7: ArrNumber = ['张三', '李四', '王五']

3.函数类型

// 示例1
const fn = (name: string, age: number): string => {
    return name + age
}
console.log(fn('张三', 14))

// 示例2
const fn1 = (name: string, age?: number): string => {
    return name + age
}
console.log(fn1('张三'))

// 示例3
const fn2 = (name: string, age: number = 12): string => {
    return name + age
}
console.log(fn2('张三'))

// 示例4
interface User {
    name: string,
    age: number
}
const fn3 = function (user: User): User {
    return user
}
console.log(fn3({ name: '张三', age: 123 }))

3.1函数重载
重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
如果参数类型不同，厕操作函数参数类型应设置为any。
参数数量不同你可以将不同的参数设置为可选

function fn(params: number): void
function fn(params: string, param2: number): void
function fn(params: any, params2?: any): any {
    console.log(params)
    console.log(params2)
}
fn(123) // 实现的是 function fn(params: number): void
fn('str', 123) // 实现的是 function fn(params: string, param2: number): void
fn('skk','123') // 实现的是方法3

4.联合类型|类型断言|交叉类型

let phone: number | string = '010-2022203' // 数字类型与字符串类型都可以
console.log(phone)
// 如果后端传给你的值是1 或者是 布尔值。而你需要的是布尔值可以用这种方式判断
function fn(type: number | boolean): boolean {
    return !!type
}
fn(1)
fn(true)

// 交叉类型
interface Pople {
    name: string,
    age: number
}
interface Gender {
    sex: string
}
const user1 = (data: Pople & Gender): void{
    console.log(user1)
}
user1({
    name: '张三',
    age: 18,
    sex: '男'
})

4.1类型断言

function fn(phone: number | string): void {
    console.log((phone as string).length)
}
fn('123')

interface A {
    run: string
}
interface B {
    build: string
}
let fn = (params: A | B):void => {
    console.log((params as A).run)
}
fn({ run:'123' });

(window as any).abc = 123

5.内置对象

const regexp: RegExp = /\w\d\s/
const date: Date = new Date()
const error: Error = new Error('错误')
const list: NodeList = document.querySelectorAll('#list li')
const str: String = new String('张三')
const body: HTMLElement = document.body
const div: HTMLDivElement = document.querySelector('div')
document.body.addEventListener('click', (e: MouseEvent) => {
    console.log(123)
})
function promise(): Promise<number> {
    return new Promise<number>((resolve, reject) => {
        resolve(1)
    })
}
promise().then(res => {
    console.log(res)
})

6.Class

class Person {
    name: string
    age: number
    sub: boolean
    constructor(name: string, age: number, sub: boolean) {
        this.name = name
        this.age = age
        this.sub = sub
    }
}
new Person('土豆', 22, false)

6.1修饰符

// public 外部可访问
// private 私有变量只能在类的内部访问
// protected 内部和子类中访问
// static 静态属性，可以直接通过类来访问
// 默认为public
class Person {
    name: string
    public age: number
    private sub: boolean
    static st: string = '我是静态属性'
    constructor(name: string, age: number, sub: boolean) {
        this.name = name
        this.age = age
        this.sub = sub
        Person.fn()
        // this.fn() 这句是行不通的
    }
    static fn() {
        // 静态方法里面仅能访问类中的静态属性
        this.st 
        return '我是静态方法'
    }
}
class Man extends Person {
    constructor() {
        super('土豆', 22, false)
        // sub是访问不到的
    }
}
const user = new Person('土豆', 22, false)
console.log(user.name)
console.log(user.age)
console.log(Person.st)
console.log(Person.fn())

interface Person {
    run(type: boolean): boolean
}
interface H {
    set(): void
}
class A {
    params: string
    constructor(params: string) {
        this.params = params
    }
}
class Man extends A implements Person, H {
    run(type: boolean): boolean {
        return type
    }
    set() {

    }
}

6.2抽象类

// 定义的抽象类的函数getName 必须在派生类B中实现
abstract class A {
    name: string
    constructor(name: string) {
        this.name = name
    }
    setName(name: string) {
        this.name = name
    }
    abstract getName(): string
}
class B extends A {
    constructor() {
        super('土豆')
    }
    getName() {
        return this.name
    }
}

let user = new B()
user.setName('土豆2')
console.log(user.getName())

7.元组类型

let arr: [string, number] = ['土豆', 26]
console.log(arr[0].length)

let arr2: [string, number] = ['土豆', 26]
// 仅能push string,number格式
arr2.push('土豆1', 27)
console.log(arr2)

let arr3: [string, string, number][] = [
    ['title', 'name', 1]
]

8.枚举类型