TypeScript常用知识点

之前很少使用ts，现在vue3.0出来了，是时候补一波ts知识点了哦

要使用 TypeScript 先要在你的系统中全局安装一下TypeScript

npm install typescript -g

编译ts文件时，不能直接编译。需要使用“tsc deme.ts”将ts文件转换为js文件。若想直接编译ts文件，可以安装ts-node进行编译
安装命令

npm install -g ts-node

使用命令

ts-node demo.ts

一、静态类型

即给变量、数组或对象规定值的类型。

// 基础变量
const num : number = 1
const str : string = '1'
const bol : boolean = true
const _null : null = null
const und : undefined = undefined
const _any : any = '' // 可以为任何类型
// 对象
const obj : { name: string } = { name: '1' }
// 数组
const strArr : string[] = ['1', '2'] // 字符串数组
const numArr : number[] = [1, 2] // 数字数组
const strNumArr : (number | string)[] = [1, '2'] // 包含数字和字符串的数组
const objArr : {name: string}[] = [ // 对象数组
  { name: '1' },
  { name: '2' }
]

二、函数参数和返回类型定义

/**
* 参数类型与静态类型一致
* 
* 返回类型定义与静态类型基本一致，除此之外还有以下类型
* void 返回空值
* never 不返回值（常用于执行过程抛出异常时）
*/
// 常用函数
function fn(one: number, two: number): number {
  return one + two
}
// 参数使用解构时
function fn1({ one, two } : { one:number, two:number }): number {
  return one + two
}

三、元组

元组就是分别确定数组中的每个元素的类型。顺序固定，即类型与元素的位置一一对应。

const yz : [string, number] = ['1', 2]

四、类型别名

通过关键字“type”实现对类型的定义。

type objType = { name: string }
type strType = string
const objTypeArr : objType[] = [{ name: '张三' }]
const strType : strType = '张三'

五、接口

通过关键字“interface”实现对类型的定义。

interface _interface {
  name: string;
  age: number;
  sex ?: string; // ?: 表示非必须，即可以不存在该字段
  [customName: string] : any; // 可自定义key值，并规定该key的类型。并且自定义的字段也是非必须的
  say(): string; // 定义方法并规定返回值
}
// 在变量中使用
const inf : _interface = {
  name: '张三',
  age: 20,
  sex: '男',
  littleName: '三儿',
  say() {
    return 'hello word'
  }
}
const inf1 : _interface = {
  name: '张三1',
  age: 21,
  say() {
    return 'hello word1'
  }
}
// 在函数中使用
function infFn(params : _interface) : void {
  console.log(params.name)
}

接口和类型别名的区别：
类型别名是直接给类型，既可以是对象，也可以是其他类型。

type objType = { name: string }
type strType = string

接口必须代表对象。

interface _interface {
  name: string;
  age: number;
}

六、联合类型展示

联合类型，规定一个变量可能有两种或两种以上的类型，满足其中一个即可。

type allianceType = string
type allianceType1 = number
interface allianceInf {
  name: string
}
interface allianceInf1 {
  age: number
}
// 在变量中使用
const allianceBasics : (string | number) = 1 // 基础类型
const allianceArr : (string | number)[] = ['1', 2] // 数组
const allianceObj : { age: (string | number) } = { // 对象
  age: 1
}

// 在变量中使用 -- 使用类型别名和接口
const allianceBasics1 : (allianceType | allianceType1) = 1 // 基础类型
const allianceArr1 : (allianceType | allianceType1)[] = ['1', 2]// 数组
const allianceObj1 : { name: (allianceType | allianceType1) } = { // 对象
  name: '张三'
}
const allianceObj2 : (allianceInf | allianceInf1) = { // 对象
  name: '张三'
}
// 在函数中使用
function allianceFn(params : (string | number)) : void {
  console.log(params)
}
// 在函数中使用 -- 使用类型别名和接口
function allianceFn1(params : (allianceType | allianceType1)) : void {
  console.log(params)
}

七、泛型

可以简单理解成类似于函数的形参，类型由传入的决定。

// 单个泛型的定义
function genericityFn<T>(one: T, two: T) : void {
  // 使用泛型的形参不能直接使用运算符进行运算，如：one + two 会报错
  // 要进行运算需对形参深拷贝
  console.log(one, two)
}
genericityFn<number>(1,2)

// 多个泛型的定义
function genericityFn1<T, P>(one: T, two: P) : void {
  console.log(one, two)
}
// 定义多少个泛型就必须的传入多少个
genericityFn1<number, string>(1, '2')

// 泛型约束：即只能使用定义的类型。通过关键字 extends 实现
interface info {
  name: string
}
function genericityFn2<T extends info>(one: T) : void {
  console.log(one.name)
}
genericityFn2({
  name: '张三'
})

// 泛型约束结合联合类型
function genericityFn3<T extends string | number>(one: T) : void {
  console.log(one)
}
genericityFn3<number>(3)