TypeScript入坑

TypeScript

菜鸟教程

ts官网

安装

$ npm i -g typescript

安装完毕后，可在命令行中使用 tsc 命令测试是否安装成功：

$ tsc --version

可查看到版本信息，则说明安装成功

TypeScript 基础语法

类型注解：在变量定义时，需要声明变量的数据类型

const 变量名: 数据类型 = 变量值

监视模式：

tsc 文件名–watch

在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译成js文件，避免重复手动操作。

ts => js

tsc 文件名

TypeScript 基础类型

• string
• number
• boolean
• 数组

  // 数组
  let arr: number[] = [3, 2, 4, 1]
  let array: Array<string> = ['a', 'b', 'c']

• 元组：元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同

  // 元组
  let arr3: [number, string, boolean] = [1, 'a', true]

• enum：枚举

  // 枚举：枚举类型用于定义数值集合
  enum Color {Red, Green, Blue}
  let color1: Color = Color.Red
  let color2: Color = Color.Green

• any: 声明为 any 的变量可以赋予任意类型的值

  // any
  let v: any = 1
  v = 'abc'
  v = true

类型断言

语法：

<类型>值
// 或
值 as 类型

  // 类型推断
  let str = '1' // string
  // 类型断言
  let str2: number = <number> <any> str
  console.log(str2)  //string '1'

类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

函数

语法：

function fnName(
	param1: datatype,
    param2: datatype = defaultValue,
    param3?: datatype,
): returntype {
    // return '表达式'
}

剩余参数：

函数体内部 …args剩余运算符

展开运算符 …

联合类型

类型1|类型2|类型3

接口、类、对象

相当于是定义类时使用到的模板

  // 接口
  interface IPerson {
    name: string,
    age: number,
    sex: string,
    eat: (food: string) => string,
    sleep: () => void,
  }
  // class
  class Student implements IPerson {
    name: string;
    age: number;
    sex: string;

    constructor(name: string, age: number, sex: string) {
      this.name = name
      this.age = age
      this.sex = sex
    }

    eat(food: string): string {
      return '吃东西：' + food
    }

    sleep(): void {
      console.log(this.name + ' 睡觉')
    }
  }
  // 对象
  let stu: IPerson = new Student('张三', 18, '男')
  stu.sleep()
  let food: string = stu.eat('土豆丝')

泛型

主要是实现重用

例：

function identity<T>(arg: T): T {
    return arg;
}

实现功能：定义一个函数，要求参数类型与返回值类型一致。

<T> 的定义就是一个泛型的结构。

T 可看作是一个类型变量

调用：

const val = identity<number>(35)
// 注意，参数是 number 类型，返回值也是 number 类型