TypeScript自学笔记-常用类型

1、类型注解

        代码中的：number就是类型注解

        作用：为变量添加类型约束。

        如下代码中约束age类型为number，赋值时只能给变量赋值为number。

let age: number=20

2、常用基础类型

        JS已有类型

• 原始类型：number、string、boolean、null、undefined、symbol
• 对象类型：object（数组、对象、函数等）

        TS新增类型

• 联合类型、自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void、any等。

3、原始类

let age: number = 18
let name: string = '张三'
let state：boolean = false
let a:null = null
let b:undefined = undefined
let c:symbol = Symbol()

4、数组类型

        两种写法：推荐使用number[]写法。

let numbers: number[] = [1, 2, 3]
let numbers2: Array<number> = [1, 2, 3]//<>中写什么 数组内就是什么类型的数据
let numbers2: Array<string> = ['1', '2', '3']

        数组既可以有number类型的数据，既要有string类型的数据，可以用联合类型 | （竖线）。

5、联合类型    

        由两个或多个其他类型组成的类型，表示可以试这些类型中的任意一种。

        写法：

let arr: (number | string)[] = [1, '2', '4']

 6、类型别名

        使用 type 关键词创建，可以是任意合法的别名，直接使用创建好的类型别名代替类型注解即可。

        写法：

type CustomArray = (number | string)[]//使用type创建类型别名
let arr1: CustomArray = [1, '2', '5']

7、函数类型

• 函数的类型实际上指的是：函数参数和返回值的类型。
•  为函数指定类型的两种方式：单独指定和同时指定
• 参数指定类型： 参数名后+ ：类型
•  返回值指定类型：{} 前+：类型

(1).单独指定

//声明函数
function add(num1: number, num2: number): number {
    return num1 + num2
}
//函数表达式
const add2 = (num1: number, num2: number): number => {
    return num1 + num2
}

(2).同时指定 （只适用于函数表达式）

        当函数为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型。

        箭头函数：const add: (参数：类型) => 返回值类型 = （函数参数）=>{}

const add3: (num1: number, num2: number) => number = (num1, num2) => {
    return num1 + num2
}

        不需要返回值时：void

//函数返回值类型 void=>没有返回值
function greet(name: string): void {
    console.log('Hello', name)
}

(3).可选参数：在可传可不传的参数名称后面添加 ？(问号)

        注意：必选参数必须在第一个

function mySlice(start?: number, end?: number): void {
    console.log(start, end)
}
mySlice();
mySlice(1)
mySlice(1, 2)
//执行结果
//undefined undefined
//1 undefined
//1 2

8、对象类型

        TS中对象的类型就是在描述对象的结构。

        写法：

let person: { name: string; age: number; sayHi(): void } = {
    name: 'asd',
    age: 20,
    sayHi() { }
}
let person: { 
name: string
age: number
sayHi(): void } = {
    name: 'asd',
    age: 20,
    sayHi() { }
}

• 直接使用｛｝来描述对象结构，属性采用 “ 属性名：类型 ” 的形式。方法名采用 “方法名()：返回类型 ”的形式。
• 如果方法有参数，则在方法名后的小括号内正常指定参数。
• 拥有多个属性类型是 使用 ；(分号) 隔开。也可以换行 不适用分号

对象可选属性与之前的函数可选属性相同

9、接口

        当一个对象类型被多次使用时，一般会使用接口来描述对象的类型，达到复用的目的。 

• 使用interface 来声明接口
• 接口名称，可以是人以合法的变量名称
• 声明接口后，直接使用接口名称作为变量的类型
• 因为每一行只有一个属性类型，因此属性类型后没有 ；(分号)

//接口 使用interface 来声明接口
interface IPperson {
    name: string
    age: number
    sayHi(): void
}
//类型别名 也可以为对象指定类型
type IPperson2 ={
    name: string
    age: number
    sayHi(): void
}
let person2: IPperson = {
    name: '张三',
    age: 19,
    sayHi() { }
}

        interface 和type的区别：

        相同点：都可以给对象指定类型

        不同点：interface（接口）只能为对象指定类型；类型别名（type）不仅可以为对象指定类型，实际上可以为任意类型别名指定别名。

        继承：

        接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用。

        使用extends关键词。

interface Point2D { x: number; y: number }
// interface Point3D { x: number; y: number; z: number }
interface Point3D extends Point2D { z: number }
let p3: Point3D = {
    x: 1,
    y: 4,
    z: 8
}

10、元祖

        元祖类型是另一种类型的数组，它确切的知道包含多少个元素([]内的类型写几个就是需要几个元素)以及特定索引对应的类型。

let position: [number, number] = [3.1414926535897, 3.1415927]
let position2: [number, string] = [3.1414926, '123']

11、类型推论

        在TS中，某些没有明确支出类型的地方。TS的类型推论机制会帮助提供类型。

适用场景：

• 声明变量并且同时指定初始化值时，可以省略类型注解。

• 决定函数返回值时。

注意：省略的是 返回值的类型，参数类型按照需求填写。

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

12、类型断言      

        当你比TS更加明确的知道类型时使用。

• 使用as关键字实现
• 关键字 as 后面的类型是一个更具体的类型

 13、字面量类型

        在TS中某个特定的字符串也可以作为TS中的类型。

        字面量类型配合联合类型（‘|’）一起使用。用来表示一组明确的可选值列表。

let str1 = '123456' //类型：string
const str2 = '123456' //类型：'123456'
const str3: '123456' = '123456'
let str4: 18 = 18

        在特定的使用场景下，有一组明确的可选值时，会比指定同一类别更加精确。

function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {
    console.log(direction)
}

14.枚举 

   与字面量类型+联合类型的组合功能相似，也可以表示一组明确的可选值。

• 使用enum关键字定义枚举。
• 约定枚举名称 、枚举中的值以大写字母开头。
• 有多个值时用 ，隔开。
• 定义好枚举后，直接用枚举名称作为类型注解。

    访问枚举成员：使用 . 来访问。

enum Direction { Up, Down, Left, Right }//枚举中的可选值

function changeDirection2(direction:Direction) {
    console.log(direction)
}
changeDirection2(Direction.Down)

•  枚举成员以及数字枚举

        默认枚举成员是有值的，从0开始自增的数值。

 

        也可以给枚举成员设置初始值，当给第一个成员设置默认值时，后续成员的值也会按照设置的值开始自增。

         也可以给每个成员都设置初始值

enum Direction { Up = 1, Down = 4, Left = 7, Right = 11 }

• 字符串枚举：枚举成员的值是字符串，因为字符串枚举没有自增长的行为，所以每个成员必须都要有初始值。

enum UserName { One = '张三', two = '李四', three = '依依' }

• 枚举不仅用作类型，还提供值。枚举类型会被编译成js代码。

15、any类型

        不推荐使用any，会失去TS类型保护的优势。

        当声明的变量没有给类型时或函数参数没有给类型时，这两种情况下隐式具有any类型。

16、typeof      

        JS中提供了typeof操作符来获取数据的类型。

        TS提供的typeof操作符：可以在类型上下文中引用变量或属性的类型。

        typeof出现在类型注解的位置所处的环境就在类型上下文。

        在TS中既可以使用JS中的typeof，也可以使用TS中的typeof。

        常用场景：根据已有变量的值，获取该值的类型，来简化书写。

let p = { x: 1, y: 2 }
// function formatPoint(point: { x: number; y: number }) { }
function formatPoint(point: typeof p) { }
formatPoint({ x: 1, y: 2 })

        注意：typeof只能用来查询变量类型或对象属性的类型，不能查询其他形式的类型。