typescript入门笔记3

函数

封装了一些重复使用的代码，在需要的时候直接调用即可

函数类型

// js中的书写方式,ts中也支持这么写
// 函数声明，命名函数
function add(x, y) {
    return x + y;
}

// 函数表达式
const add2 = function(x, y) {
    return x + y;
}

// ts中的书写方式
// 函数声明，命名函数
function add(x:number, y:number): number {
    return x + y;
}

// 函数表达式
const add2 = function(x:number, y:number): number {
    return x + y;
}

// 函数的完整写法
// add3 变量名
// (x:number, y:number) => number 当前这个函数的类型
// function(x:number, y:number): number {return x + y;} 函数类型的值
const add3: (x:number, y:number) => number = function(x:number, y:number): number {
    return x + y;
}

可选参数和默认参数

function fullName(firstName: string = '赵', lastName?: string): string {
    if(lastName) {
        return firstName + lastName
    } else {
        return firstName
    }
}

剩余参数（rest参数）

剩余参数是放在函数声明所有参数的最后

// …args:string[] 剩余的参数，放在一个字符串的数组中，args里
function showMsg(str: string, …args: string[]) {
    console.log(str)
    console.log(args)
}

showMsg(‘a’, ‘b’, ‘c’) //str => a  args => [‘b’, ‘c']

函数重载

函数名字相同，函数的参数及个数不同

// 函数重载声明
function add(x: string, y: string): string
function add(x: number, y: number): number

// 函数声明 定义一个方法，相同类型属性相加并返回相同类型值
function add(x: string | number, y: string | number): string | number {
    if(typeof x === ’string’ && typeof y === ’string’) {
        return x + y
    } else if (typeof x === ’string’ && typeof y === ’string’) {
        return x + y
    }
}

console.log(add(’11’, 12)) // 非法传入数据，ts提示错误信息内容

泛型

在定义函数、接口、类的时候不能预先确定要使用的数据的类型，而是在使用函数、接口、类的时候才能确定数据的类型。

函数泛型

function createArray <T> (value: T, count: number): T[] {
    const arr: Array<T> = [];
    for(let i = 0; i < count; i++) {
        arr.push(value)
    }
    return arr
}

const arr1 = createArray<number>(1, 5)
const arr2 = createArray<string>(‘abc’, 3)

多个泛型参数的函数

function getMsg<K, V>(value1: K, value2: V): [K, V] {
    return [value1, value2]
}

const arr1 = getMsg<string, number>(‘aaa’, 11)
const arr2 = getMsg<number, number>(123, 456)

泛型接口

interface IbaseCRUD <T> {
  data: T[]
  add: (t: T) => void
  getById: (id: number) => T
}

class User {
  id?: number; //id主键自增
  name: string; //姓名
  age: number; //年龄

  constructor (name, age) {
    this.name = name
    this.age = age
  }
}

class UserCRUD implements IbaseCRUD <User> {
  data: User[] = []
  
  add(user: User): void {
    user = {...user, id: Date.now()}
    this.data.push(user)
    console.log('保存user', user.id)
  }

  getById(id: number): User {
    return this.data.find(item => item.id===id)
  }
}

const userCRUD = new UserCRUD()
userCRUD.add(new User('tom', 12))
userCRUD.add(new User('tom2', 13))
console.log(userCRUD.data)

泛型类

class GenericNumber<T> {
  zeroValue: T
  add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function(x, y) {
  return x + y 
}

let myGenericString = new GenericNumber<string>()
myGenericString.zeroValue = 'abc'
myGenericString.add = function(x, y) { 
  return x + y
}

console.log(myGenericString.add(myGenericString.zeroValue, 'test'))
console.log(myGenericNumber.add(myGenericNumber.zeroValue, 12))

泛型约束

// 没有泛型约束
function fn <T>(x: T): void {
  // console.log(x.length)  // error
}
// 泛型约束
interface Lengthwise {
  length: number;
}

// 指定泛型约束
function fn2 <T extends Lengthwise>(x: T): void {
  console.log(x.length)
}

fn2('abc’)  //ok
fn2(123) //error

其他

声明文件

一般声明文件都会单独写成一个xxx.d.ts 文件

很多的第三方库都定义了对应的声明文件库, 库文件名一般为 @types/xxx，可以上NPM官网找到

/* 
当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
声明语句: 如果需要ts对新的语法进行检查, 需要要加载了对应的类型说明代码
  declare var jQuery: (selector: string) => any;
声明文件: 把声明语句放到一个单独的文件（jQuery.d.ts）中, ts会自动解析到项目中所有声明文件
下载声明文件: npm install @types/jquery --save-dev
*/

jQuery('#foo');
// ERROR: Cannot find name 'jQuery’.

// 需要使用declare var 来定义它的类型
declare var jQuery: (selector: string) => any;

// 或者npm插件官方声明文件 npm install @types/jquery --save-dev

内置对象

JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。

内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。

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')

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()