前言

此文档是根据b站视频所记

浏览器是不认识ts语言的，写的ts代码也会编译成js让浏览器识别

ts官网：在线写ts

安装

npm i typescript -g
Cmd

1.类型判断

let str = "abc"; // 推断 str 为字符串类型
str = 10; //报错，str已经被初始值字符串给类型限定了，所以str只能存储字符串类型
TypeScript

2.类型注解

let str : string; // 推断 str 为字符串类型
str = 10; //报错，str已经被初始值字符串给类型限定了，所以str只能存储字符串类型
str = "abc";  //正确
TypeScript

3.类型断言

//错误 ↓
let numArr = [1, 2, 3];
const result = numArr.find(item => item > 2);
result * 5; //程序推断item可能会是undefined
//正确（在自己十分确定该业务不会出现undefined使用）↓
let numArr = [1, 2, 3];
const result = numArr.find(item => item > 2) as number; //进行类型断言
result * 5;
TypeScript

4.基础类型和联合类型

let v1: string = "abc";
let v2: number = 10;
let v3: boolean = true;
let nu: null = null;
let un: undefined = undefined;
//联合类型：v4 只能被分配 string 和 null 类型(理论上null可以给任何类型，开启配置项中的strictNullChecks后null不能再随意分配给其它类型)
let v4: string | null = null;
// v5 只能分配这1，2，3其中的一个值
let v5: 1 | 2 | 3 = 2; //正确
let v5: 1 | 2 | 3 = "2"; //错误
TypeScript

5.数组、元组、枚举

//数组
let arr1 = [1, 2, 3, "4"]; //正确，但在实际开发中不建议这样使用
//写法一：
let arr2: number[] = [1, 2, 3]; //该数组只能存储number类型的数据
//写法二：
let arr3: Array<string> = ["a", "b", "c"]; //该数组只能存储string类型的数据

//元组：可以存储多个数据，但限定了存储数据的个数以及每个数据的类型
let t1: [number, string, number?] = [1, "a", 2];//加?为可选项

//枚举 （会自动分配值，默认从0开始）
enum MyEnum {
  A,
  B,
  C,
}
console.log(MyEnum.A); //输出 0
console.log(MyEnum[0]); //输出 A
TypeScript

6.函数

//以下两种同理，只不过第二种加了返回值类型的限定
function MyFn1(a: number, b: string) {
  return a + b;
}
function MyFn1(a: number, b: string): string {
  return a + b;
}
//void 表示没有返回值，下方代码出现了return返回值，故是错误的
function MyFn1(a: number, b: string): void {
  return a + b;
}
//b是可选参数，可选参数要书写在必选参数的后面
function MyFn1(a: number, b?: string): string {
  return a + b;
}
//a 如果不传参数便是默认值10，...rest是剩余参数
function MyFn1(a = 10, b: string, c?: string, ...rest:number[]): string {
  return a + b + c + rest;
}
const f: string = MyFn1(20, "楠笙", "1", 2, 3, 4, 5);
console.log(f); //输出 20楠笙12,3,4,5
TypeScript

7.接口

//正常定义对象类型
const obj = {
  name: "xiaomin",
  age: 15,
};

//使用接口
interface obj {
  name: string;
  age: number;
};

//使用该接口来定义对象
const obj: obj = {
  name: "a",
  age: 10,
};

//错误示例
const obj: obj = {
  name: 10,//参数类型错误
  ago: 10,//字段名错误
};
TypeScript

类型别名

//若很多参数都需要定义约束类型
let a: string | number = 10;
let b: string | number = 20;
let c: string | number = 30;

//则使用类型别名
type MyType = string | number;
let a: MyType = 10;
let b: MyType = 20;
let c: MyType = 30;
TypeScript

泛型

//类型限定死了，只能是number类型
function muFn(a: number, b: number): number[]{
    return [a,b]
}

//T为泛型变量名，可以为任何字母
function muFn1<T>(a: T, b: T): T[]{
    return [a,b]
}

// 调用
myFn1(1,"a") // 错误，ts将根据第一个参数类型来决定该泛型是什么类型
myFn1(1,2)	// 正确
myFn1<number>(1,2) // 正确
TypeScript