TS 学习笔记

1、变量的声明

声明了类型后TypeScript就会进行类型检测,声明的类型可以称之为类型注解

var/let/const 标识符:数据类型 = 赋值;
 eg: let message:string = "xueyagang"

2、数据类型

1、number-类型

let num:number = 10;

2、boolean-类型

let flag:boolean = true;

3、string-类型

let message:string = "xueyagang"

4、Array-类型(两种方式)

1、 const names : string[] = ["abc","cba","aaa"] // 常见
2、 const names2 : Array<string> = ["abc","cba","aaa"]

5、Object-类型

const myInfo:object = {
    name:"xue",
    age:18,
    height:1.82
} // 但是从该对象中我们不能获取数据,也不能设置数据

6、Symbol-类型

const s1: symbol = Symbol("title")
const s2: symbol = Symbol("title")
​
const person = {
    [s1]: "程序员",
    [s2]: "老师"
}

7、null和undefined类型

let n:null = null
let u:undefined = undefined

8、any-类型

let a : any = "why" //a 可以是任意类型

9、unknown-类型

unknown是TypeScript中比较特殊的一种类型,它用于描述类型不确定的变量

10、void-类型

void通常用来指定一个函数是没有返回值的,那么它的返回值就是void类型:

这个函数我们没有写任何类型,那么它默认返回值的类型就是void的,我们也可以显示的来指定返回值是void

function sum (num1:number,num2:number):void {
    console.log(num1+num2)
}

11、never-类型

never表示永远不会发生值的类型,比如一个函数

如果一个函数中是一个死循环或者抛出一个异常,那么我们就可以使用never类型

function loopFun():never {
    wthile(true) {
        console.log("123")
    }
}

12、tuple-类型

tuple是元组类型,很多语言中也有这种数据类型

const info:[string,number,number] = ["xueyg",18,1.82]; // 一定是对应的类型
​
const info:(string|number)[] =  ["xueyg",18,1.82] // 不能确定类型

13、函数的参数类型

参数的类型注解

function great(name:string) {
    console.log(name.toUpperCase())
}

14、函数的返回值类型

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

15、匿名函数的参数

匿名函数与函数声明会有一些不同:

当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时,该函数的参数会自动指定类型

names.forEach(item => {
    console.log(item.toUpperCase())
})

我们并没有指定item的类型,但是item会自动推断出自己的类型,这个过程称之为上下文类型,因为函数执行的上下文可以帮助确定参数和返回值的类型。

16、对象类型

function printCoord(point:{x:number,y:number}) {
    console.log("x坐标是",ponit.x)
    console.log("y坐标是",ponit.y)
}

每个属性的类型部分也是可选的,如果不指定,那么就是any类型;

17、可选类型

可选类型可以看做是类型和undefined 的联合类型:

function printCoord(point:{x:number,y:number,z?:number}) {
    console.log("x坐标是",ponit.x)
    console.log("y坐标是",ponit.y)
    if(point.z) {
        console.log("z坐标是",ponit.z)
    }
}

18、联合类型

function printMore(id:number|string) {
        console.log("你的id是",id)
}
printMore(123)
printMore("xueyg")

19、类型别名

type Point = {
    x:number
    y:number
}
function printPoint(point:Point) {
    console.log(point.x,point.y)
}

20、类型断言as

有时候TypeScript无法获取具体的类型信息,这个我们需要使用类型断言

const myEl = document.getElementById("my-img") as HTMLImageElement

TypeScript只允许类型断言转换为更具体或者不太具体的类型版本,此规则可防止不可能的强制转换:

const name = ("xueyg" as unknown) as number

21、非空类型断言!

非空断言使用的是!,表示可以确定某个标识符是有值的,跳过ts在编译阶段对它的检测;

function printMessaeg(message?:string) {
    console.log(message!.toUpperCase())
}

22、可选链的使用

它的作用是当对象的属性不存在时,会短路,直接返回undefined,如果存在,那么才会继续执行

console.log(info?.name?.age)

23、??和!!的作用

!!操作符:将一个其他类型转换成boolean类型

const message = ""
let flag1 = Boolean(message)
let flag2 = !!message

??操作符:空值合并操作符(??)是一个逻辑操作符,当操作符的左侧是null 或者undefined 时,返回其右侧操作数,否则返回左侧操作数;

const message = "321"
const result = message ?? "123"

3、类型缩小

我们可以通过类似于typeofpadding === "number" 的判断语句,来改变TypeScript的执行路径,在给定的执行路径中,我们可以缩小比声明时更小的类型,这个过程称之为缩小。

而我们编写的typeofpadding === "number 可以称之为类型保护

常见的类型保护有如下几种:1、typeof 2、平等缩小(比如===、!==) 3、instanceof 4、in ...

1、typeof

type ID = number | string;
​
function printId(id: ID) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

2、平等缩小

我们可以使用Switch或者相等的一些运算符来表达相等性(比如===, !==, ==, and != )

type Direction = "left" | "right" | "top";
function typeDirection(direction: Direction) {
  switch (direction) {
    case "left":
      console.log("left");
      break;
    case "right":
      console.log("right");
      break;
    case "top":
      console.log("top");
      break;
    default:
      console.log('默认'); 
  }
}

3、instanceof

function printValue(date: Date | string) {
  if (date instanceof Date) {
    console.log(date.toLocaleString());
  } else {
    console.log(date);
  }
}

4、in

如果指定的属性在指定的对象或其原型链中,则in 运算符返回true;

type Fish = { swim: () => void };
type Dog = { run: () => void };
​
function move(animal: Fish | Dog) {
  if ("swim" in animal) {
    animal.swim();
  } else {
    animal.run();
  }
}

4、TypeScript函数类型

type CalcFunc = (num1: number, num2: number) => void;
​
function calc(fn: CalcFunc) {
  console.log(fn(20, 30));
}
​
function sum(num1: number, num2: number) {
  console.log(num1 + num2);
}
calc(sum);

参数的可选类型

function foo(x:number,y?:number) {
    console.log(x,y)
}

默认参数

function foo(num1: number, num2: number = 20) {
  console.log(num1, num2);
}
foo(10);

剩余参数

function sum(...nums: number[]) {
  let total = 0;
  for (const num of nums) {
    total += num;
  }
  return total;
}
​
const result = sum(10, 20, 30);

5、函数的重载

如果我们编写了一个add函数,希望可以对字符串和数字类型进行相加,应该如何编写

在TS中,我们可以编写不同的重载签名来表示函数可以以不同的方式进行调用,一般在两个或者两个以上的重载签名,再去编写一个通用的函数实现

// 函数重载
function sum(a1: number, a2: number): number;
function sum(a1: string, a2: string): string;
function sum(a1: any, a2: any): any {
  return a1 + a2;
}
​
console.log(sum(20, 30));

6、interface和type区别

如果是定义非对象类型,通常推荐使用type,比如Direction、Alignment、一些Function;

如果是定义对象类型,那么他们是有区别的:

interface 可以重复的对某个接口来定义属性和方法

而type定义的是别名,别名是不能重复的

7、TypeScript枚举类型

枚举类型是为数不多的TypeScript特性有的特性之一:

枚举其实就是将一组可能出现的值,一个个列举出来,定义在一个类型中,这个类型就是枚举类型;

枚举允许开发者定义一组命名常量,常量可以是数字、字符串类型;

猜你喜欢

转载自blog.csdn.net/znhyXYG/article/details/127630439