1. 什么是 TS
TS 的唯一作用就是确定变量类型。
TS 可确定的类型有:string,number,boolean,字面量,any(不建议使用),unknown,void,never,object,array,tuple,
2. TS 怎么用
TS 变量限制
// str 只能是 string 类型
let str: string;
// 联合类型
let str = string | number;
// 字面量
let str = "male" | "female";
TS 函数限制
// 定义 fn,参数必须是number,返回值必须是number
let fn: (agr1: number, agr2: number) => number;
// 参数1,参数2,返回值,都被 TS 确定为必须是 number 类型,不然报错。
function fn(arg: number, arg2: number): number {
return arg + arg2;
}
// void 表示空,表示没有返回值
function fn1(): void {}
// never 表示永远不会返回结果
function fn2(): never {
throw new Error("报错了");
}
TS 对象限制
// 对象属性必须有 name,age,且类型必须匹配
let obj = {
name: string,
age: number,
};
// [propName: string]: any 表示任意类型的属性,如下表示,obj1 必须有 string类型的 name,还有其他类型随便
let obj1 = {
name: string,
[propName: stirng]: any
}
TS 数组限制
// arr 只能是字符串数组
let arr: string[];
let arr: Array<string>;
// 元组:固定长度的数组
let arr: [string, string];
TS 类限制
class Person {
name: string;
}
3. TS 语法糖
TS 类型断言
// 语法:变量 as 类型
// <类型>变量
let str = unknown;
str as string;
<stirng>str;
TS 枚举
enum Gender {
Male = 1,
Female = 2,
}
let people: { name: string; gender: Gender };
people: {
name: 'qcoder',
gender: Gender.Male
}
TS 类型别名
// a 的类型可以是
type myType = string | number | boolean;
let a: myType;
TS 接口
// 接口就是一个规范,满足这个规范,就可以在这个场景中使用
// 接口定义类的结构,所有属性和方法都没有值
interface myInterface {
name: string;
sayHi(): void;
}
// 类 实现接口
class MyClass implements myInterface {
name: string;
constructor(name: string) {
this.name = name;
}
sayHi() {}
}
TS 属性封装
class Person {
// public 默认时 public 公有属性,可以在
name: string;
// private 只能在类内部进行修改访问,实例对象不能访问,子类也不能访问
private age: number;
// protected 可以在当前类,和子类中可以访问
protected gender: string;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// get,set 是 TS 的语法糖,就可以在外部对private属性进行访问和修改了
get name() {
return this.name;
}
set name(value: string) {
return (this.age = value);
}
}
TS 泛型
// 类型不确定时,可以使用泛型
function fn<T>(a: T): T {
return a;
}
fn(10); // 不指定泛型,TS自动推断
fn<string>("hi"); // 指定泛型
// 多个泛型
function fn<T, K>(a: T, b: K): T {
return a;
}
fn<number, string>(10, "hi");
// 限定泛型类型
interface Inter {
length: number;
}
// T 泛型必须时继承了 Inter 的对象,里面必须有 length 属性
function fn<T extends Inter>(a: T): number {
return a.length;
}