前端文档

# TypeScript

文档简介 (opens new window)

# ts 配置文件说明

  1. 创建配置文件
tsc --init

  1. 设置配置项

    • target: 指的就是将 ts 代码要转换成哪个版本的 js 代码 es5 es3
    • module: 指的就是将 ts 代码转换成 js 代码之后，使用的模块化的标准是什么
    • outDir: 指的就是将 ts 代码转换成 js 代码之后，js 代码存放的文件夹路径
    • rootDir: 指的就是要将哪个目录中的 ts 代码进型转换，ts 代码的存放路径
    • strict: 是否要将 ts 代码转换为严格模式的 js 代码！

  2. 使用配置文件

tsc -p ./tsconfig.json

# interface 和 type 区别

type:类型别名；interface:接口，主要用于类型检查

  1. 定义类型范围

interface 只能定义对象类型。 type 可以声明任何类型，基础类型、联合类型、交叉类型。

// 基础类型（相当于起别名）
type person = 'string'
// 联合类型
interface Dog {
  name: string;
}
interface Cat {
  age: number;
}
type animal = Dog | Cat
// 元祖（指定某个位置具体是什么类型）
type animal = [Dog, Cat]
//交叉类型（多种类型的集合）
type animal = Dog & Cat
  1. 合并声明

定义两个同名的 type 会报异常； 定义两个同名的 interface 会合并；

interface Dog {
  name: string;
}
interface Dog {
  age: number;
}
// 合并为
interface Dog {
  name: string;
  age: number;
}
  1. 扩展性

interface 可以使用 extends 和 implements 进行扩展

// interface extends interface
interface Dog {
  name: string;
}
interface Cat extends Dog {
  age: number;
}
// interface extends type
type Dog = {
  name: string
}
interface Cat extends Dog {
  age: number;
}

但 type 可以使用交叉类型&进行合并

// type & type
type Dog = { name: string }
type Cat = { age: number } & Dog
// tyep & interface
interface Dog {
  name: string
}
type Cat = { age: number } & interface
  1. 可以使用 typeof 获取实例对象类型
const div = document.createElement('div')
type B = typeof div

# 类型使用

// 类型使用
function useType() {
  // 对象类型
  const obj: {
    name: string
    age: number
  } = {
    name: '小小',
    age: 18
  }
  console.log(obj)
  // 数组类型
  const arr1: string[] = ['小小', '小影', '小红']
  const arr2: (number | string)[] = [1, 'string', 2]
  type Lady = {
    name: string
    age: number
  }
  const arr3: Lady[] = [
    { name: '小影', age: 18 },
    { name: '小小', age: 28 }
  ]
  // 类类型
  class Person {}
  const obj2: Person = new Person()
  // 函数类型
  const obj3: () => string = () => {
    return '小小'
  }
  // 元组
  const obj4: [string, string, number][] = [
    ['a', 'teacher', 28],
    ['b', 'teacher', 18],
    ['c', 'teacher', 25]
  ]
}

# 类型注解

// 类型注解
function useTypeAnnotation() {
  // 简单类型定义
  function getTotal(one: number, two: number): number {
    return one + two
  }
  const total = getTotal(1, 2)

  // 函数参数为对象（解构）时
  function getNumber({ one }: { one: number }): number {
    return one
  }
  const one = getNumber({ one: 1 })

  // 函数无返回值时定义方法
  function sayHello(): void {
    console.log('hello world')
  }

  // 如果一个函数是永远也执行不完的，就可以定义返回值为never
  function forNever(): never {
    while (true) {}
    console.log('hello world')
  }

  // 多泛型
  function join<T, P>(first: T, second: P) {
    return `${first}${second}`
  }
  console.log(join < number, string > (1, '2'))
}

# 接口

// 接口
function useInterface() {
  interface Girl {
    name: string
    age: number
    bust: number
    waistline?: number
    [propname: string]: any
    say(): string
  }

  const girl = {
    name: '小小',
    age: 18,
    bust: 94,
    waistline: 21,
    sex: '女',
    say() {
      return '欢迎光临'
    }
  }
  const getResume = (girl: Girl) => {
    console.log(girl.name + '年龄是：' + girl.age)
    console.log(girl.name + '胸围是：' + girl.bust)
    girl.waistline && console.log(girl.name + '腰围是：' + girl.waistline)
    girl.sex && console.log(girl.name + '性别是：' + girl.sex)
  }
  // getResume(girl)
}

# 枚举

// 枚举
function useEnum() {
  enum Status {
    MASSAGE,
    AA,
    CF
  }
  function getServe(status: any) {
    if (status === Status.MASSAGE) {
      return 'massage'
    } else if (status === Status.AA) {
      return 'aa'
    } else if (status === Status.CF) {
      return 'CF'
    }
  }
  const result = getServe(Status.CF)
  console.log(`我要去${result}`)
}

# 访问类型

// 访问类型
function useVisitType() {
  class Person {
    public name?: string
    private _age = 18
    protected _sex = '无'

    public sayHello() {
      console.log(this.name + 'say Hello')
      console.log('年龄是：' + this._age)
      console.log('性别是：' + this._sex)
    }
  }
  class Teacher extends Person {
    public sayBye() {
      console.log('继承protected属性：' + this._sex)
    }
  }

  // -------以下属于类的外部--------
  const person = new Person()
  person.name = 'aa.com'
  // person.sayHello()
  // console.log(person.name)
  const teacher = new Teacher()
  // teacher.sayBye()
}
``

← 前端路线 →