TS简单使用

中文官网

在中文网(官网也可以)点击立即试用->在浏览器中运行->在这里可以演示本篇博客内的内容

在这个页面右边点击 js 就是 ts 编译后的 js 内容,也可以点击左上角进行版本设置和一些配置,这个看个人意愿,我本人打开网站直接用了

类型推断

不加类型时,TS 会进行类型推断,以默认赋值的值类型作为变量类型,如下默认赋值为 String 类型的数据,因此再次赋值为 number 类型则会报错

let str = "abc";
str = 10;

类型注解

相比较类型推断,类型注解本质就是给变量加个类型限制,这样就会把原有的默认的类型推断给覆盖使用我们定义的类型,如下

// let str: string = 'abc'

// 或者可以初始不给值
let str: string;
str = "abc";

类型断言

如下代码

let arr = [1, 2, 3];
const result = arr.find((item) => item > 2);
result * 5;

这里可以发现我们得到的值肯定是 3 的,但是 ts 不知道,它会以为有 undefined 情况,所以这里报错了,因此这里我们要告诉 ts 这个会得到值并且是 number 类型的,因此代码改造如下:

let arr = [1, 2, 3];
const result = arr.find((item) => item > 2) as number;
let a = result * 5;
console.log(a);

这样声明后就是相当于告诉 ts 返回值是 number 类型,这样就能过了 ts 的编译,但实际在运行中即使值为 undefined 也不会有问题

基础类型和联合类型

// 基础类型
let v0: any = "abc"; // 任意类型
let v1: string = "abc";
let v2: number = 123;
let v3: boolean = true;
let nu: null = null;
let un: undefined = undefined;

// 联合类型
let v4: string | null = null;
v4 = "1234";
// v4 = 1234 // 报错,number类型不在联合类型范围之内

let v5: 1 | 2 | 3 = 1;
v5 = 2;
v5 = 3;
// v5 = 4 // 报错,4不在限制的联合类型范围之内

数组元祖和枚举

// 数组
let arr: number[] = [1, 2, 3]; // 限制数组内容为数字类型
let arr2: Array<number> = [1, 2, 3]; // 限制数组内容为数字类型

let arr3: string[] = ["1", "2", "3"]; // 限制数组内容为字符串类型
let arr4: Array<string> = ["1", "2", "3"]; // 限制数组内容为字符串类型

// 元组
// 元组可以限制数组类型和数组个数,类似数组结构
let t1: [number, string, number] = [1, "2", 3];
// t1[0] = '1' // 报错,元组第一个数值限定了number类型,不能赋值为string类型

// ?设置可选
let t2: [number, string?, number?] = [1]; // 这样后面两个值写不写都行,为可选值

// 枚举
enum MyEnum {
  A,
  B,
  C,
}
console.log("MyEnum.A", MyEnum.A); // 0
console.log("MyEnum[0]", MyEnum[0]); // "A"

函数

// 设置返回值类型为void代表不需要返回值
function MyFn1(a: number, b: number): void {
  console.log(a + b);
}

// 设置返回值类型为number
function MyFn2(a: number, b: number): number {
  return a + b;
}

// 使用?设置可选参数,建议必选参数放到可选参数前面
function MyFn3(a: number, b?: number): number {
  // return a+b // 直接写a+b会报错,因为b是可选参数,ts不确定有没有传入b
  if (b) {
    return a + b;
  }
  return a;
}

// 设置默认值
function MyFn4(a: number = 10): void {
  console.log(a); // 10
}
MyFn4();

// 获取剩余参数
function MyFn5(a: number, ...rest: number[]): void {
  console.log("a", a); // 1
  console.log("rest", rest); // [2, 3, 4, 5]
}
MyFn5(1, 2, 3, 4, 5);

接口

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

const obj: Obj = {
  name: "萧寂",
  age: 10,
};

类型别名

type MyUserName = string | number;

let a: MyUserName = 10; // a可以为number也可以为string
a = "hello";

泛型

function myFn(a: number, b: number): number[] {
  return [a, b];
}

// 如果上面的函数为通用型函数的话,就不能写死类型了,可以使用泛型传入类型,如下
function myFn1<T>(a: T, b: T): T[] {
  return [a, b];
}

let m = myFn1<number>(1, 2);
console.log("m", m);
let m2 = myFn1<string>("A", "B");
console.log("m2", m2);

收尾