学习TS的基础知识，个人总结，附带栗子（二）

接口

让我们继续扩展这个示例应用。这里我们使用接口来描述一个拥有 firstName 和 lastName 字段的对象。 在 TypeScript 里，只在两个类型内部的结构兼容，那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements 语句。

interface Person {
  firstName: string
  lastName: string
}

function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = {
  firstName: 'Yee',
  age: 'Huang'
}

console.log(greeter(user))

可选符的使用

interface Person {
  name: string   // readonly
  age?: number
}

function greeter (person: Person): void {
  console.log(person)
}

let user = {
  name: 'Yee',
  age: 18
}

console.log(greeter(user))

只读

interface Person {
  readonly name: string  
  age?: number
}

function greeter (person: Person): void {
  console.log(person.name)
//   person.name = 1
    person.age =2
}

let user = {
  name: 'Yee',
  age: 18
}

console.log(greeter(user))

字面量传值 (强校验)

interface Person {
  name: string
  age?: number
}

function greeter (person: Person): void {
  console.log(person)
}

let user = {
  name: 'Yee',
  sex: 'male'
}

console.log(greeter(user))
// console.log(greeter({
//   name: 'Yee',
//   sex: 'male'
// }))

接收额外参数

interface Person {
  name: string
  age?: number
  [propName:string]: any
}

function greeter (person: Person): void {
  console.log(person)
}

let user = {
  name: 'Yee',
  sex: 'male',
  test: 123
}

console.log(greeter(user))
console.log(greeter({
  name: 'Yee',
  sex: 'male',
  test: false
}))

接收函数类型

interface Person {
  name: string
  age?: number
  [propName:string]: any
  say(): string
}

function greeter (person: Person): void {
  console.log(person)
}

let user = {
  name: 'Yee',
  sex: 'male',
  test: 123,
  say(){
      return '1'
  }
}

console.log(greeter(user))
console.log(greeter({
  name: 'Yee',
  sex: 'male',
  test: false,
  say(){
      return '1'
  }
}))

接口继承

interface Person {
  name: string
  age?: number
  [propName:string]: any
  say(): string
}

interface Teacher extends Person {
    teach():string
}

function greeter1 (person: Person): void {
  console.log(person)
}


function greeter2 (teach: Teacher): void {
  console.log(teach)
}


let user = {
  name: 'Yee',
  sex: 'male',
  test: 123,
  say(){
      return '1'
  }
}

let teach = {
  name: 'Yee',
  sex: 'male',
  test: 123,
  say(){
      return '1'
  },
  teach(){
      return 'tea'
  }
}


console.log(greeter1(user))
console.log(greeter2(teach))

class 应用接口

interface Person {
  name: string
  age?: number
  [propName:string]: any
  say(): string
}

class User implements Person {
    name = 'lpx'
    say(){
        return 'hahaha'
    }
}

函数类型接口

interface SayHi {
  (val:string):string
}
let val = '1'
const say: SayHi = (val:string)=> {
    return  val
}

say(val)

interface VS type

相同点

• 都可以描述一个对象或者函数

interface

interface User {
  name: string
  age: number
}

interface SetUser {
  (name: string, age: number): void;
}

type

type User = {
  name: string
  age: number
};

type SetUser = (name: string, age: number)=> void;

• 都允许拓展（extends）

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

interface extends interface

interface Name { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

type extends type

type Name = { 
  name: string; 
}
type User = Name & { age: number  };

interface extends type

type Name = { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

type extends interface

interface Name { 
  name: string; 
}
type User = Name & { 
  age: number; 
}

不同点

• type 可以而 interface 不行

type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type foo1 = string
interface foo2 = string

// 联合类型
interface Dog {
    wong():void
}
interface Cat {
    miao():void
}

type Pet = Dog | Cat


function test(val:Pet) {
    console.log('123')
}
let val = {
    wong(){
        console.log(1)
    },
    miao(){
        console.log(2)
    },
    add(){
        console.log(3)
    }
}
test(val)

// 具体定义数组每个位置的类型
type PetList1 = [string, number]
interface PetList2 = [string, number]

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

• interface 可以而 type 不行

interface 能够声明合并

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

let bar: User = {
    name: '1',
    age: 2,
    sex:'3'
}

/*
User 接口为 {
  name: string
  age: number
  sex: string 
}
*/


// type User {
//   name: string
//   age: number
// }

// type User {
//   sex: string
// }

联合类型 类型保护

类型断言的方法

interface A {
    fly: boolean
    add:()=>{}
}
interface B {
    fly: boolean
    edit:()=>{}
}
 
function foo (val: A | B){
    console.log(val.fly)
    console.log((val as A).add)
    console.log((val as B).edit)
}

in语法的方法

interface A {
    fly: boolean
    add:()=>{}
}
interface B {
    fly: boolean
    edit:()=>{}
}
 
function foo (val: A | B){
    console.log(val.fly)
   if('add' in val){
    console.log((val as A).add)
   }else{
    console.log((val as B).edit)
   }
}

typeof 的方法

function add(first:string| number, second: string |number): string | number{
    if(typeof first  === 'string' || typeof second ==='string'){
        return  first + '' + second
    } else {
        return first + second
    }
    
}