学习typescript

为了学习Vue3，今天过了typescript文档，笔记如下
参考来自 http://ts.xcatliu.com/

 var numa: number = 2;
    var global_num = 12
    class Numbers {
      num_val = 13;
      static sval = 10;

      storeNum():void {
        var local_num =14 ;
      }
    }
    var obj = new Numbers();
    var j:any;
    var n:any = "a b c"
    for(j in n) {
      console.log(n[j])
    }
    var sites = string[];
    sites = ["1","2","3"]
    console.log(sites[1])
    let namesdd = new Map();

    namesdd.set('ggo', 1);
    namesdd.set('sdo', 2);
    namesdd.set('who', 3);

    //接口
    //接口中会定义属性和变量类型
    interface RunOptions {
      program: string;
      commandline:string[]|string|(()=>string)  //数组，字符串，方法
    }
    // 声明创建接口实例
    var options:RunOptions = {program:"test1",commandline:"Hello"}
    options = {programs: "progs",commandline:()=>{return "**Hello world**"}}

    //变量索引值可以是number或string
    interface namelist {
      [index: number]: string
    }
    var newList:namelist = ["Google","Runoob","Taobao"] //数组元素必须是string

    //接口的继承
    interface Person {
      age: number
    }
    interface Musician extends Person {    //Musician继承于Person
      name: string
    }
    var singer = <Musician> {};
    singer.age = 27;
    singer.name = Jo;
    console.log(singer.age)   //27


    //创建类
    class Car {
      //成员变量
      engine:string;
      //构造函数
      constructor(engine:string){
        this.engine = engine
      }
      //方法
      disp():void {
        console.log("发动机为:" + this.engine)
      }
    }
    //实例化类对象
    var obj = new Car("XXSY1");
    obj.disp() //  发动机为XXSY1

    //对象
    var sites  = {
      site1: "value1",
      site2: "value2",
    }
    //在sites中添加方法
    sites.sayHello = function(){
      return "Hello"
    }
    //对象也可以作为一个参数传递给函数
    var invokesites = function(obj: { site1:string, site2 :string }) {
      console.log("site1 :"+obj.site1)
      console.log("site2 :"+obj.site2)
    }
    invokesites(sites)

    //模块化
    //通过export导出，import导入
    export interface SomeInterface{}
    import someInterface = require("./SomeInterface")

    //ts声明文件
    /* 在 TypeScript 中，我们并不知道 $ 或 jQuery 是什么东西
       使用 declare 关键字来定义它的类型
     */
    declare var jQuery: (selector: string) => any;

function slice (a?: number, b?: number) {
    // ? 跟在参数名字的后面，表示可选的参数
    // 注意：可选参数只能在 必须参数的后面
    // 如果可选参数在必选参数的前面，会报错
    
  }
  slice()
  slice(1)
  slice(1,2)
}

全局引用和局部引用(es module)

//通过import和export声明的文件，函数和变量是局部的
//declare.d.ts
import * as fs from 'fs';
declare const func: (a: number, b: number) => number

// 通过关键字global可以强制声明全局
//index.ts
declare global{
const func: (a: number, b: number) => number}
}

in 类型守卫

type Square = { size: number }
type Rectangle = { width: number; height: number }
type Shape = Square | Rectangle
// in 用来去联合类型的值
function isSquare(shape: Shape): shape is Shape {
  return 'size' in shape;   //属性是字符串形式，固定写法
}

let obj = <Shape>{size: 12}

// 常量断言
const objectA = {name: 'jack'} as const

调用签名

type Add = { (a: number, b: number): number }
const add: Add = (a: number, b: number) => {
  return a + b
}

type Point = { new(x: number, y: number): { x: number; y: number } }

// 索引签名
const objectB = {name: 'sino', age: 12}
const call = objectB['name']

//keyof 取得对象的属性
function getValue<T extends Object, K extends keyof T>(o: T, key: K): T[K] {
  return o[key]
}

const a = getValue(objectB, 'age')

泛型

let lastInArray = <T, >(arr: Array<T>) => {
  return arr[arr.length - 1]
}
const line1 = lastInArray([1, 2, 3, 4])

函数重载

//字符串split， 数组slice, 都不改变原数据
function reverse(string: string): string
function reverse(Array: string[]): string[]
function reverse(stringOrArray: string | string[]) {
  if (typeof stringOrArray == 'string') {
    return stringOrArray.split('').reverse().join('')
  } else {
    return stringOrArray.slice().reverse()
  }
}

//声明一个对象类型
const userInfo = {
  name: 'yin',
  age: 27,
  address: {
    city: 'Suzhou',
  }
}
type UserInfo = typeof userInfo;
// 此时的 UserInfo 类型 如下：
// type UserInfo = {
//   name: string,
//   age: number,
//   address: {
//     city: string,
//   }
// }

//只读数组
let arr: readonly number[] = [1, 2, 3];

// ?:  y也可以是不传
function echo(x: number, y ?: number) {
}

//es内置对象
let b: Boolean = Boolean(1)
let e: Error = new Error('Error occured')
let d: Date = new Date()
let r: RegExp = /[a-z]/

//DOM BOM 内置对象
let body: HTMLElement = document.body
let allDiv: NodeList = document.querySelectorAll('div')
document.addEventListener('click', function (e: MouseEvent) {
  console.log(e)
})
//使用type创建类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
  if (typeof n === 'string') {
    console.log('n')
    return n;
  } else {
    console.log('n()')
    return n();
  }
}

let aa = () => {
  return 'ss'
}
let ww = 'sasd'
getName(ww)     // n
getName(aa)     //n()

//字符串变量类型约束
type EventNames = 'click' | 'scroll' | 'mousemove'

function handleEvent(ele: Element, event: EventNames) {
}

handleEvent(document.getElementById('hello'), 'scroll')


const member = {
  userName: 'thinking',
  blog: 'www.baidu.com',
  children: {
    username: 'me',
    blog: 'mine',
    address: 'Suzhou'
  }
}
/*ES6 中的解构赋值*/
const {userName, blog, children: {address}} = member

function sum(x: number, y: number): number {
  return x + y
}

// mySum的类型是number，=> 表示函数的定义
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
  return x + y
}

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

let tomcat = buildName('Tom')

function push(array: any[], ...items: any[]) {
  items.forEach(function (item) {
  })
}

//元祖: 不同类型
let tom: [string, number] = ['Tom', 26]

//枚举
enum Days {Sun, Mon, Tue}

console.log(Days["Sun"] === 0) // true

// 先通过class定义类，通过constructor定义构造函数
// 然后通过new生成实例的时候，自动调用构造函数

class Animal {
  name: string;

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

  sayHi(): string {
    return `My name is ${this.name}`
  }
}

let a: Animal = new Animal('Jack')
console.log(a.sayHi())

//类实现 （implements）
interface Alarm {
  alert(): void
}

interface Light {
  lightOn(): void

  lightOff(): void
}

class Car implements Alarm, Light {
  alert() {
    console.log('car alert')
  }

  lightOn() {
    console.log('car lightOn')
  }

  lightOff() {
    console.log('car lightOff')
  }
}

// 接口继承接口
interface Alarm {
  alert(): void;
}

interface LightableAlarm extends Alarm {
  lightOn(): void;

  lightOff(): void;
}

// 泛型：T
function createArray<T>(length: number, value: T): Array<T> {
  let result: T[] = []
  for (let i = 0; i < length; i++) {
    result[i] = value
  }
  return result
}

createArray<number>(3, 22)
createArray<string>(3, 'stringTEXT')

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]]
}

swap([7, 'seven'])

// 接口的形状必须符合个数和类型
interface Lengthwise {
  length: number;
}

// 约束了这个泛型 T 必须符合 Lengthwise的形状（包含length属性）
function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length)
  return arg;
}
let demo : Lengthwise = {
  length: 12
}
loggingIdentity(demo)