TypeScript-基本类型

基本类型

和js中基本类型一致，不记录，只简单表述写法

 let num: number = 12
 let numbers: number[] = [1, 2, 3] //推荐
 let strings: Array<string> = ['1', '2', '3']  //了解

联合类型

由两个或者多个其他类型组成的类型，表示可以是这些类型中的其中一种

let arrNS: (number | string)[] = [1, '2', 3]

类型别名

为任意类型起别名
当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

 type OtherStringNumber = (string | number)[]
 let arr1: OtherStringNumber = ['1', 2, '3']

函数类型

1. 为参数和返回值的类型

两种方式
1.单独指定参数返回值类型
2.同时指定参数返回值类型

 function add(num1: number, num2: number): number {
     return num1 + num2
 }

 // 以下形式只适用于函数表达式

let addNum = (num1, num2)=>{}
 (num1: number, num2: number) => number

 let addNum: (num1: number, num2: number) => number = (num1, num2) => {
     return num1 + num2
 }

2. 函数类型

可选参数
可选参数只能出现在参数列表的最后

 function slice(index: number, index2?: number): void {
    console.log(index, index2)
 }

对象类型

描述对象的结构
注意对象类型用{}来表示，其中用;分割 多行用换行分割

{ name: string; age: number; sayhi(): void }
{
  name: string
  age: number
  sayhi(): void
  }
 //  方法可以使用箭头函数的方式来表示sayhi():void   ---  sayhi=>void

 let person: { name: string; age: number; sayhi(): void } = {
    name: 'yiyi',
    age: 18,
    sayhi() {
       console.log('hi')
   }
 }

1.对象类型的 可选属性

 function myfun(params: { name: string; age?: number }): void {}

接口

对象类型被多次使用时，会使用接口来描述对象类型，从而达到复用

可以直接使用接口名作为变量的类型

接口(interface)和类型别名(type)的对比

相同点:都可以给对象指定类型
不同点:接口只能给对象指定，类型别名可以为给任意类型指定

interface IPerson {
     name: string
     age: number
     sayHi(): void
}
 let person1: IPerson = {
     name: 'ss',
    age: 19,
     sayHi() { }
 }

1.接口继承 extends

两个接口中有相同的部分，可以抽离出来，通过继承复用

interface PPerson extends IPerson {
    sex: string
}
let person2: PPerson = {
    name: 'ss',
     age: 19,
     sex: '女',
     sayHi() { }
 }

元组

元组是另一种类型的数组，确切的知道要包含多少个元素，以及特定索引对应的类型

 let position: [number, number] = [23.3434, 12.2343]

类型推论

ts中没有明确指出类型的地方，类型推论机制会提供帮助
常见场景 变量声明以及初始化 函数返回值
存在类型推论 类型注解可以不写

let age = 18 //自动推论为Number

类型断言

非常明确一个值的类型时，可以使用类型断言来指定更具体的的类型

使用as关键字实现类型断言 as后面的类型是一个更加具体的类型
常用语法 a as Type
不常用语法<> let a = <类型> xxxx

console.dir()
//  打印dom元素，再属性列表的最后，可以看到该元素的类型
//  * 一般用于获取元素的dom结构，有些dom元素的类型太过于广泛里面没有想要的属性，就要指定一个更具体的类型来获取想要的属性
//  */

字面量类型

使用模式：字面量类型配合联合类型一起使用
使用场景，用来表示一组明确的可选值列表

例子1

 const str2 = 'aaa'
let str3: 'aaa' = 'aaa'

str2是一个常量，他的值不能变化只能是aaa，所以他的类型也是aaa
所以这个str2就是一个字面量类型了，就是说一个滕鼎的字符串也能作为ts中的类型
除字符串外，任意的js字面量（比如对象、数字等）都可以作为类型使用
字面量类型只能类型和值一样 let str3: ‘aaa’ = ‘bbb’ ❌ let str3: ‘aaa’ = ‘aaa’ ✔

例子2

配合联合类型使用，可选值只有’top’|‘bottom’|‘left’|'right’这四个 相比于string使用字面量类型更加精确严谨

function changePositon(position: 'top' | 'bottom' | 'left' | 'right') {
     console.log(position)
 }

枚举

枚举类似字面量类型+联合类型组合的功能，同样表示一组明确的可选值
定以一组命名常量

enum关键字

约定枚举名称，以及枚举中的值都是以大写字母开头
枚举中的多个值通过逗号分割
定以号枚举后，直接使用枚举名称作为类型注解
访问枚举成员，直接枚举.

 enum Direction {
     Top, Bottom, Left, Right
 }
 function changeDirection(Direction:Direction) {
     console.log(Direction)
 }
changeDirection(Direction.Bottom) // 1

枚举成员的值默认是从0开始自增的数值
数字枚举 是枚举成员的值为数字的枚举
可以对枚举成员进行赋值

enum Direction {Top=12, Bottom=14, Left, Right}
//  字符串枚举  就是枚举成员的值为字符串，字符串没有自增，所以必须赋值

any 任意类型

不推荐使用

隐式具有any的情况：=声明变量不提供类型也不提供默认值 - let a =函数参数不加类型

typeof操作类型

可以再类型上下文中引用变量或属性的类型（类型查询）

typeof 只能用来查询变量或者属性的类型！！ 无法查询其他形式的类型（比如，函数调用的类型）

 let p = {x:1,y:2}
 // 指定point的类型为p的类型即 {x: number;y: number;}
function formatPoint(point: typeof p) { }