typeScript 基础

part1

1. 函数参数只能对照形参个数，不能多也不能少
2. 数组定义方式：

let arr: number[] = [1, 23, 4, parseInt('1')]
let arr2: Array<number> = [1, 2, 3]

3. 枚举类型 enum

enum Gender {
    Male,
    Female
}

let man: number = Gender.Male
let woman: string = Gender[1]

console.log(man)
console.log(woman)

4. 使用any声明的变量，会关闭这个变量的自动类型检查
   • let a; 隐式的any，需要注意
   • let a:any = 30
   • 函数的参数如果不指定类型，也是隐式的any
5. void声明的变量没啥用，只能用undefined,null赋值；函数如果没有返回值，那么返回值类型是void
6. null和undefined，可以复制给任何一个类型
   • 如果有--strictNullChecks标记，则只能赋值给各自本身和void
7. Never 可以用与函数报错，但不能有返回值
8. 类型断言，告诉编译器你已经做了类型检查，可以不用担心赋值的类型问题了。
   • s = x as number
   • s = <number>x

part2

1. $ tsc filename -wts文件改变时，自动编译为js
2. 在当前目录创建tsconfig.json，运行$ tsc -w，即可监视所有ts文件的变化
3. tsconfig.json

{
  //编译文件的路径，**表示任意目录，*表示任意文件
  "include": [
    "./src/**/*"
  ],
  //不编译文件的目录
  //  "exclude": [
  //    "./02 编译配置.ts"
  //  ],
  "compilerOptions": {
    //编译版本
    "target": "ES6",
    //模块化语法的版本
    "module": "ES6",
    //用到的库，基本不用动
    //"lib": []
    //编译后js文件的输出路径
    "outDir": "./dist",
    //把所有ts文件合并成一个js文件
    //"outFile": ""
    //是否编译js文件，默认为false
    "allowJs": false,
    //是否以ts语法检查js文件，默认是false
    "checkJs": false,
    //是否移除注释，默认是false
    "removeComments": false,
    //是否生成变异后的文件，默认是false
    "noEmit": false,
    //如果ts报错，则不生成编译后的文件，默认是false
    "noEmitOnError": false,
    //所有的严格检查开关
    "strict": false,
    //编译后的文件是否是严格模式，默认是false
    "alwaysStrict": true,
    //不允许隐式的any
    "noImplicitAny": true
  }
}

4. 暂时跳过webpack打包ts教程

part3

1. class

abstract class Animal {
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }

    name: string
    age: number

    //抽象方法，只能在抽象类中定义，它必须被子类重写，只声明，不定义
    abstract sayHello(): void
}

class Cat extends Animal {
    constructor(name: string, age: number, type: number) {
        super(name, age);
        this.type = type
    }

    type: number

    sayHello() {
        console.log(`喵~${this.type}`)
    }
}

class Dog extends Animal {
    sayHello() {
        console.log(`汪~`)
    }
}

const dog = new Dog('jeff', 5)
const cat = new Cat('mimi', 3, 0)
dog.sayHello()
cat.sayHello()

2. interface
   • 用来定义一个类的结构，是对类的一个限制
   • 接口也可以当做类型声明来使用
   • 可重复声明
   • 接口中的属性不能有值，方法不能在本身被定义
   • 实现接口就是使类满足接口的要求

interface myPerson {
    name: string
    age: number
    gender: number

    sayHello(): void

    introduce(time: Date): void
}

interface myPerson {
    addr: string
    isMarried: boolean
}

class Person implements myPerson {
    constructor(name: string, age: number, gender: number, addr: string, isMarried: boolean) {
        this.name = name
        this.age = age
        this.gender = gender
        this.addr = addr
        this.isMarried = isMarried
    }

    name: string
    age: number
    gender: number
    addr: string
    isMarried: boolean

    sayHello() {
        console.log(`${this.name}对你说：hello~`)
    }

    introduce(time: Date) {
        console.log(
            `现在是${time}，我叫${this.name}，
            我今年${this.age}岁了，性别${this.gender === 1 ? '男' : '女'}，
            居住在${this.addr}，${this.isMarried ? '已' : '未'}婚`
        )
    }
}

const zed = new Person('zed', 18, 1, 'Dalian', false)
zed.sayHello()
zed.introduce(new Date())

3. 属性的封装

class Person {
    constructor(private _name: string, private _age: number, protected _gender: number) {
    }

    get name() {
        return this._name
    }

    get age() {
        return this._age
    }

    set age(val) {
        val >= 0 ? this._age = val : ''
    }
}

class Stud extends Person {
    constructor(private _id: string, name: string, age: number, gender: number) {
        super(name, age, gender);
    }

    sayGender() {
        console.log(`${this._gender}`)
    }
}

const per = new Person('zed', 11, 1)
const stu = new Stud('01', 'zed', 12, 0)
per.age = 3
stu.sayGender()
console.log(per)

4. 泛型

function f<T>(a: T): T {
    return a
}

console.log(f(10)) //自动推断类型
console.log(f<string>('10')) //手动指定类型

function f1<T, K>(a: T, b: K): K {
    return b
}

console.log(f1(2, '111'))
console.log(f1<number, string>(2, '222'))

interface Inter {
    length: number
    name: string
}

function f2<T extends Inter>(a: T): string {
    return `${a.name}的length为${a.length}`
}

console.log(f2({length: 3, name: 'zed'}))

class MyClass<T> {
    constructor(private name: T) {
    }

    sayName() {
        console.log(this.name)
    }
}

const c = new MyClass<string>('zed')
c.sayName()