typescript
一、 ts的简单认识
认识+深入理解+熟练使用
vue3支持ts
ts是微软开发的开源、跨平台编程语言。在2012年发布。作者是安德斯.海尔斯伯格（C#首席架构师）。
TS => { {ES} + interfaces + strongly types + generic(泛型)}
ES => { {JS} + proto types + dynamic types + constructor functions }
TS comfiles to JS ( brower can't run ts) ts编译器
TS是JS的超集
特点：
1. ts可以编译出纯净、简洁的js代码，并能够在所有浏览器、node环境和es3及以上的js引擎运行。
2. ts 强大的类型系统 js开发者可以使用高效的开发工具和常用操作（静态检查和代码重构）
3.ts提供最新的和不断发展的js属性。比如异步功能和decorator
二、安装ts
全局安装
yarn global add typescript查看是否安装成功
tsc -V三、编写ts代码
tsc手动编译
(()=>{
function sayHi(str: string) {
return '您好呀' + str
}
let text = '小甜甜'
console.log(sayHi(text))
})()
// 浏览器可以运行ts文件，但是ts里面必须是js代码
// 用tsc编译ts，生成js文件，就可以在浏览器运行
// 生成的文件，被修饰的入参类型将去掉
// let修饰的变量，tsc编译后变成var修饰自动编译
1. tsc --init 生成tsconfig.json
2. tsconfig.json 内 将outDir 改成 './js'
strict 改成false
3. 终端 运行任务 tsc监视
四、类型注解
一种 “轻量级的为函数或者变量添加的约束” 的方式
typescript 提供了静态代码分析能力，它可以分析代码结构和类型注解
五、接口
一种能力，一种约束
六、类
ts的类只是一个语法题，本质还是js实现的
七、webpack+ts
八、ts基础类型
// let 变量名: 变量类型 = 值
let flag: boolean = true
console.log(flag)boolean\number\string
undefined\null 可以作为所有类型的子类型，undefined&null可以赋值给所有子类型
let numb: number = null数组类型
// let 变量名: 数据类型[] = [值1,值2,值3]
let arr1: number[] = [1,2,3,4]
console.log(arr1)
// 泛型 let 变量名: Array<数据类型> = [值1,值2,值3]
let arr2: Array = [7,8,9]
console.log(arr2)
元组类型
let arr3: [string,number,boolean] = ['Bonnie',1.051234,false]
console.log(arr3[0].split(''))
console.log(arr3[1].toFixed(2))枚举
// 枚举
enum Color {
red,
green=9,
blue
}
const color: Color = Color.red
console.log(color)
console.log(Color.red,Color.green,Color.blue)
console.log(Color[0],Color[9],Color[10])
enum Gender{
女,
男
}
console.log(Gender.女)any类型
let any1: any = '~_~'
any1 = 909
console.log(any1)
let any2: any[] = [100,'小妹妹',false]
console.log(any2[1].split(''))
// console.log(any2[0].split('')) //编译不报错 浏览器报错void类型
// void类型： 与any类型相反 代表没有任何类型
function fn():void{
console.log('小米米')
}
console.log(fn())
let vv: void = undefined
console.log(vv)object: 非原始类型
function fnn(obj:object):object{
console.log(obj)
return {
name:'卡卡西',
age:16
}
}
console.log(fnn({}))
console.log(fnn(new String('bilibl')))
console.log(fnn(String))联合类型，类型断言，类型推断
// 联合类型： 表示取值可以是多种类型之一
function combine(o: number|string){
// return o.toString()
if((o).length){
return (o as string).length
}else {
return o.toString().length
}
}
console.log(combine(12))
console.log(combine('212'))
// 类型断言: 告诉编译器 我知道我自己在做什么
// 1. <类型>变量
// 2. 变量 as 类型
// 类型推断：TS会在没有明确的指定类型的时候推测出一个类型
// let n = 124 // => number
// n = 'aaa'
// console.log(n)
// let n // => any
// n = 123
// n = 'aaa'
// console.log(n) 九、接口
接口： 对象的状态（属性）和行为（方法）的抽象
是一种规范 一种约束 一种功能
// 需求: 创建人的对象, 需要对人的属性进行一定的约束
// id是number类型, 必须有, 只读的
// name是string类型, 必须有
// age是number类型, 必须有
// sex是string类型, 可以没有
(()=>{
interface IPerson{
readonly id:number
name:string
age:number
sex?:string
}
const person: IPerson = {
id:1,
name:'bonnie',
age:17,
sex:'女'
}
console.log(person)
})()函数类型
// 为了使用接口表示函数类型，我们需要给接口定义一个调用签名。
// 它就像是一个只有参数列表和返回值类型的函数定义。
// 参数列表里的每个参数都需要名字和类型。
(()=>{
interface SearchFunc {
// 定义一个调用签名
(source:string, subString:string): boolean
}
const fn: SearchFunc = function (source:string, subString:string): boolean {
return source.search(subString) > -1
}
console.log(fn('我是Bonnie','我'))
})()类类型
用接口约束类
一个类可以实现多个接口
类与类是继承(extends) 接口与类是实现（implements）
// 类类型： 用接口约束类
// 一个类可以实现多个接口
// 类与类是继承(extends) 接口与类是实现（implements）
(()=>{
interface IFly {
fly()
}
interface ISwim {
swim()
}
interface IFlyAISwim extends IFly,ISwim{}
class Person implements IFlyAISwim{
fly(){
console.log('fly')
}
swim(){
console.log('swim')
}
}
// class Person1 implements IFly,ISwim{
// fly(){
// console.log('fly')
// }
// swim(){
// console.log('swim')
// }
// }
const person = new Person()
person.fly()
person.swim()
})()十、类
// 类： 模板 通过模板实例化对象
// 面向对象编程思想
(()=>{
// ts中类的定义
class Person {
// 属性
name: string
age: number
gender: string
// 构造方法: 初始化对象属性
constructor(name: string='Bonnie',age: number=18,gender: string='girl'){
this.name = name
this.age = age
this.gender = gender
}
// 实例方法
sayHi(str: string) {
console.log(`my name is ${this.name},i'm ${this.age} & i'm a ${this.gender},${str}`)
}
}
const person = new Person()
person.sayHi('马萨赛季')
})()继承
// 类与类之间的继承关系
// A继承了B
// A => 子类 -> 派生类
// B => 基类 -> 超类（父类）
// 继承用extends
// 子类用super继承父类的构造器，属性，方法
// 子类可以重写父类
(()=> {
class Person {
name: string
age: number
constructor(name:string='人', age:number=0){
this.name = name
this.age = age
}
sayHi(str: string){
console.log(`哇哇哇，${str},我是${this.name}`)
}
}
class Student extends Person{
constructor(name:string, age:number) {
super(name,age)
}
// 重写
sayHi() {
console.log('i"m student')
super.sayHi('嘟嘟嘟')
}
}
const person = new Person()
console.log(person)
person.sayHi('ccc')
const stu = new Student('Bonnie',16)
console.log(stu)
stu.sayHi()
})()多态
父类的引用指向子类的对象 不同类型的对象针对相同方法，产生不同的行为
(()=>{
class Animal {
name: string
constructor(name: string){
this.name = name
}
run(distance:number=0){
console.log(`${this.name}跑了${distance}米`)
}
}
class Dog extends Animal{
constructor(name: string){
super(name)
}
run(distance:number=5){
console.log(`${this.name}跑了${distance}米`)
}
}
class Pig extends Animal {
constructor(name: string){
super(name)
}
run(distance:number=10){
console.log(`${this.name}跑了${distance}米`)
}
}
const ani: Animal = new Animal('动物')
const dog: Animal = new Dog('狗')
const pig: Animal = new Pig('猪')
ani.run()
dog.run()
pig.run()
const dog1: Animal = new Dog('gou')
const pig1: Animal = new Pig('zhu')
dog1.run()
pig1.run()
function showRun(ani: Animal){
ani.run()
}
console.log('==========')
showRun(dog1)
showRun(pig1)
})()修饰符
// 修饰符：修饰类内部属性成员的可访问性
// 类的属性方法构造器 默认用public修饰
// public -- 公共类 修饰的成员 任何位置都能访问
// private -- 私有类 修饰的成员 在类外部不能访问, 子类也无法访问
// protected -- 受保护类 修饰的成员 在类外部不能访问, 子类可访问
(()=>{
class Person {
public name: string
// private name: string
// protected name: string
public constructor(name: string){
this.name = name
}
public eat(){
console.log(this.name,'eat')
}
}
class Stu extends Person{
constructor(name: string){
super(name)
}
public eat(){
console.log(this.name,'eat')
}
}
const person = new Person('bonnie')
console.log(person.name)
person.eat()
const stu = new Stu('andy')
console.log(stu.name)
})()readonly修饰符
// readonly修饰符： readonly修饰的属性成员，在外部无法修改，只可读;
// 在类内部的普通函数也无法修改；只能在构造函数内部进行赋值
(()=>{
// class Person {
// readonly name: string = 'moren'
// constructor(name:string){
// this.name = name
// }
// changeName(){
// this.name = 'xxx'
// }
// }
// const p1 = new Person('bonnie')
// p1.name = 'ccc'
// console.log(p1.name)
// readonly修饰构造器的参数，该类就有了一个只读的属性成员，外部可访问但无法修改
// 使用public private protected修饰构造器的参数,该类就有了一个或公共或私有或受保护的属性成员
class Person {
constructor(public name:string){
this.name = name
}
}
const p1 = new Person('bonnie')
p1.name = 'ccc'
console.log(p1.name)
})()存取器
存取器：在类中，对类中的属性进行有效的控制 通过getter setter进行实现
(()=>{
class Person {
firstName: string
lastName: string
constructor(firstName:string, lastName:string){
this.firstName = firstName
this.lastName = lastName
}
get fullName(){
console.log('get....')
return this.firstName+'_'+this.lastName
}
set fullName(val){
console.log('set....',val)
const n = val.split('_')
this.firstName = n[0]
this.lastName = n[1]
}
}
const p = new Person('上官','婉儿')
console.log(p.fullName)
p.fullName = '薛_宝钗'
console.log(p.fullName)
})()静态成员
// 静态成员： 用static修饰的类的属性或者方法
// 静态成员 不能通过实例对象访问 需要通过 类.静态属性 进行访问
// 静态方法 需要通过 类.静态方法 进行访问
(()=>{
class Person {
// static name 报错 静态属性“name”与构造函数“Person”的内置属性函数“name”冲突。
static name1: string = '贾宝玉'
constructor() {
// this.name1 = name1
}
static say(){
console.log('i"m ',Person.name1)
}
}
const p = new Person()
console.log(p)
// p.say()
// console.log( p.name1)
// console.log(Person.name1)
Person.say()
})()抽象类
// 抽象类：abstract 包含抽象方法（一般没有任何功能的具体实现）不能实例化抽象类 只能给子类实例化和让子类实现内部的抽象方法
// 抽象类服务于派生类
(()=>{
abstract class Animal {
abstract eat()
// 报错 astract标记的抽象类，不能有代码的实现
// abstract eat(){}
sayHi(){
console.log('hi')
}
}
// 不能实例化抽象类
// const dog = new Animal()
class Dog extends Animal {
eat() {
console.log('汪汪 骨头')
}
}
const dog = new Dog()
dog.eat() // 抽象类的实现
dog.sayHi() //调用抽象类的实例方法
})()十一、函数
// 函数： 重复代码的整合 功能的实现
(()=>{
// 函数声明 命名函数
function add(x: string, y: string): string {
return x+y
}
// 函数表达式 匿名函数
let add2 = function (x: number, y: number): number {
return x+y
}
console.log(add('a','b'))
console.log(add2(1,2))
// ts函数完整写法
let add3:(x: number, y: number)=> number = function (x: number, y: number): number {
return x+y
}
console.log(add2(99,88))
})()默认参数、可选参数
// 默认参数 若不传，默认某个值
// 可选参数 ?修饰的参数 可传可不传
(()=>{
function showName(firstName:string='贾',lastName?:string){
return firstName+'_'+lastName
}
console.log(showName('雪','抱柴'))
})()
剩余参数
// 剩余参数（rest参数）
// 在函数声明的时候，只能放在所有参数的最后
(()=>{
function add (n1: number,n2: number,...ns:number[]): void{
console.log(n1)
console.log(n2)
console.log(ns)
}
add(1,2,3,4,5,5)
})()函数重载声明
// 函数重载 名字相同 参数返回值不同
(()=>{
// 函数重载声明
function add(x:number,y:number): number
function add(x:string,y:string): string
function add(x:number|string,y:number|string){
if(typeof x === 'number' && typeof y === 'number')
return x+y
else if (typeof x === 'string' && typeof y === 'string')
return x+y
}
console.log(add(1,4))
console.log(add('1','4'))
// console.log(add(1,'4'))
// console.log(add('1',4))
})()十二、泛型
泛型：在定义函数、接口、类时不确定使用的数据类型，只有在使用函数、接口、类时才确定
// 泛型：在定义函数、接口、类时不确定使用的数据类型，只有在使用函数、接口、类时才确定
(()=>{
// const getArr = (value:T, num:number):T[]=>{
// const arr: T[] = new Array(num).fill(value)
// return arr
// }
function getArr(value:T, num:number):T[]{
const arr: T[] = new Array(num).fill(value)
return arr
}
console.log(getArr(123,3))
console.log(getArr('ccc',8))
})() 多个泛型参数的函数
(() => {
function getMsg(value1: K, value2: V): [K, V] {
return [value1, value2];
}
const arr = getMsg('abc',21.121)
console.log(arr[0].split(''),arr[1].toFixed(1))
})();
泛型接口
在定义接口时，为属性或方法指定泛型类型，在使用时，才确定具体的泛型类型
(()=>{
interface IBaseCRUD {
data: Array
add:(user: T) => T
getUserById:(id: number) => T
}
class User {
id?: number
name: string
age: number
constructor(name:string,age:number){
this.name = name
this.age = age
}
}
class UserCRUD implements IBaseCRUD{
data: Array = []
add(user: User):User{
user.id = Date.now()+Math.random()
this.data.push(user)
return user
}
getUserById(id: number): User{
return this.data.find(e=>e.id===id)
}
}
const ucrud = new UserCRUD()
ucrud.add(new User('andy',1))
ucrud.add(new User('bonnie',12))
ucrud.add(new User('kitty',31))
console.log(ucrud.data)
const {id} = ucrud.add(new User('billy',2))
const u1 = ucrud.getUserById(id)
console.log(u1)
})() 泛型类
泛型类： 定义一个类，传参、属性与返回值是泛型
(()=>{
class Generic{
defaultValue: T
add:(x:T, y:T) => T
}
const g1:Generic = new Generic()
g1.defaultValue = 'Bonnie'
g1.add = (x:string, y:string):string => {
return x+'_'+y
}
console.log(g1.add('史','湘云'))
console.log(g1.add(g1.defaultValue,'湘云'))
const g2:Generic = new Generic()
g2.defaultValue = 99
g2.add = (x:number, y:number):number => {
return x+y
}
console.log(g2.add(1,2))
console.log(g2.add(g2.defaultValue,3))
})() 泛型约束
如果我们对泛型参数取length属性，会报错，因为泛型不知道它有这个属性
(()=>{
interface ILen{
length:number
}
function getLen(x:T):void{
console.log(x.length)
}
getLen('abcd')
// getLen(12)
})()
十三、其他
声明文件
/*
当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
声明语句: 如果需要ts对新的语法进行检查, 需要要加载了对应的类型说明代码
declare var jQuery: (selector: string) => any;
声明文件: 把声明语句放到一个单独的文件（jQuery.d.ts）中, ts会自动解析到项目中所有声明文件
下载声明文件: npm install @types/jquery --save-dev
*/
//手动声明
import jQuery from 'jquery'
// 定义声明文件 （或者放到jQuery.d.ts文件里（自建））
declare var jQuery:(selector: string)=>any
jQuery('选择器')内置对象
(()=>{
/* 1. ECMAScript 的内置对象 */
// Boolean
// Number
// String
// Date
// RegExp
// Error
let b: Boolean = new Boolean(1)
let n: Number = new Number(true)
let s: String = new String('abc')
let d: Date = new Date()
let r: RegExp = /^1/
let e: Error = new Error('error message')
// b = true
console.log(b)
// let bb: boolean = new Boolean(2) // error
// 2. BOM 和 DOM 的内置对象
// Window
// Document
// HTMLElement
// DocumentFragment
// Event
// NodeList
const div: HTMLElement = document.getElementById('test')
const divs: NodeList = document.querySelectorAll('div')
document.addEventListener('click', (event: MouseEvent) => {
console.dir(event.target)
})
const fragment: DocumentFragment = document.createDocumentFragment()
console.log(div,divs,fragment)
})()