TypeScript—学习笔记

TypeScrip基本介绍

TypeScript是一个编译到纯JS的有类型定义的JS超集。
TS遵循当前以及未来出现的ECMAScript规范。TS不仅能兼容现有的JavaScript 代码，它也拥有兼容未来版本的JavaScript的能力。大多数TS的新增特性 都是基于未来的JavaScript提案，这意味着许多TS代码在将来很有可能会变成ECMA的标准.

配置文件生成

npx tsc

标准库声明

"target": "es5"

中文错误消息

npx tsc --local zh_CN

作用域的问题

const a = 222;
export { }// 表示当前文件属于一个模块，变量a属于独立作用域，确保跟其他文件中a变量不会冲突

原始数据类型

布尔类型：boolean

数字类型：number

字符串类型：string

空值：void

Null 和 Undefined：null 和 undefined

Symbol 类型：symbol

BigInt 大数整数类型：bigint

Object类型

泛指除了原始类型以外的其他类型

const foo: object = function () { }
const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' };

数组类型

const arr1: Array<number> = [1, 2, 3,];
const arr2: number[] = [1, 2, 3,];

元组类型

数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。元组中允许存储不同类型的元素，元组可以作为参数传递给函数，一般用于在一个函数之中返回多个返回值。

var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0]) 
console.log(mytuple[1])

枚举类型

枚举类型主要用于标识代码状态,是一个标识符.当我们需要表示某些变量表示什么意思时,可以通过枚举类型

语法:(枚举类型首字母大写)

enum Schedule {
  not = 1,
  reported,
  stored,
}

函数类型

// 函数类型
export { } // 限制变量作用域

function aa(a: number, b: string) {
    console.log(a,b)
}
aa(4,'m')

任意类型

// 任意类型
export { } // 限制变量作用域

let aa: any = 99;
aa = 'kkk'

隐式类型推断

// 函数类型
export { } // 限制变量作用域

let aa = 99;
aa = 'kkk'

接口

约定一个对象中有哪些成员以及这些成员的类型

// 接口，约定对象的成员
export { } // 限制变量作用域

interface Post {
    title: string,
    content: string
}
function printPost(post: Post) {
    console.log(post.title)
    console.log(post.content)
}
printPost({
    title: 'hello TypeScript',
    content: 'A javascript superset'
})

可选成员、只读成员

interface Post {
    title: string,
    content: string,
    subtitle?: string,// 可选成员， 可有可无
    readonly summary: string// 只读成员
    // [key:string]:string,
}
function printPost(post: Post) {
    console.log(post.title)
    console.log(post.content)
}
printPost({
    title: 'hello TypeScript',
    content: 'A javascript superset',
    summary: 'lll'
})

动态成员

interface Cache {
    [prop: string]: string
}
const cache: Cache = {
    'mmm': 'kkk'
}
console.log('cache',cache)

Typescript中类的基本使用

类用来描述一类具体对象的抽象成员

// 类(class)
export { } // 限制变量作用域

class Person {
    name: string
    age: number // 类的属性必须有初始值
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age
    }
    sayHi(msg: string): number {
        return 222
    }
}

typeScript类的访问修饰符

控制类中成员的可访问级别(共有，私有，受保护)

// 类(class)
export { } // 限制变量作用域

class Person {
    public name: string
    private age: number // 类的属性必须有初始值
    protected gender:boolean
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age
        this.gender = true
    }
    sayHi(msg: string): number {
        return 222
    }
}
const tom = new Person('tom', 18)
console.log(tom.name)

class Student extends Person{
    constructor(name:string,age:number){
        super(name,age)
        console.log(this.gender)
    }
}

class Student extends Person {
    private constructor(name: string, age: number) {
        super(name, age)
        console.log(this.gender)
    }
    static create(name: string, age: number) {
        return new Student(name, age)
    }
}
const jack = Student.create('jack',25)

只读属性

// 类(class)
export { } // 限制变量作用域

class Person {
    public name: string
    private age: number // 类的属性必须有初始值
    protected readonly gender: boolean // 只读属性
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age
        this.gender = true
    }
    sayHi(msg: string): number {
        return 222
    }
}
const tom = new Person('tom', 18);
tom.gender = false;(不被允许)
console.log(tom.name)

类与接口

// 类(class)
export { } // 限制变量作用域
// 一个接口只约束一个能力，一个类型同时实现多个接口
interface Eat {
    eat(food: string): void
}
interface Run {
    run(distance: number): void
}
// 一个类通过关键字implements声明自己使用一个或者多个接口
class Person implements Eat, Run {
    eat(food: string): void {
        console.log(`优雅的进餐:${food}`)
    }
    run(distance: number) {
        console.log(`直立的行走:${distance}`)
    }
}
class Animal implements Eat, Run {
    eat(food: string): void {
        console.log(`呼噜呼噜的吃:${food}`)
    }
    run(distance: number) {
        console.log(`爬行:${distance}`)
    }
}

抽象类

// 抽象类(class)它可以包括一些具体实现，接口不包括具体实现
export { } // 限制变量作用域

// 抽象类只能被集成不能被实例化
abstract class Animal {
    eat(food: string): void {
        console.log(`呼噜呼噜的吃:${food}`)
    }
    // 当父类中有抽象方法时，子类就必须去实现这个方法
    abstract run(distance: number): void
}

class Dog extends Animal {
    run(distance: number): void {
        console.log(`四角爬行`, distance)
    }
}
const d = new Dog();// 同时拥有父类中实例方法以及子类中实现的方法

泛型

// 泛型 
export { } // 限制变量作用域
//
function creatNumberArray<T>(length: number, value: number): number[] {
    const arr = Array<number>(length).fill(value)
    return arr

}
function creatArray<T>(length: number, value: T): T[] {
    const arr = Array<T>(length).fill(value)
    return arr

}
// 定义的时候不能明确的类型变成一个参数，在使用的时候传入
const res = creatArray<string>(3, '100');

类型声明

// 类型声明
import { camelCase } from 'lodash'
import qs from 'query-string'
// cameCase把字符串转为驼峰格式

// declare function camelCase(input: string): string;
const res = camelCase('hello typed')
qs.parse('?weekId=765&lessonId=1573')