一.TypeScript介绍
对于TypeScript介绍,我会遵循star法则从四个方面阐述(情景,任务,行动,结果)。
TypeScript的出现主要解决在大型项目开发过程中遇到的一些问题,因为js是一门弱类型语言,对变量没有多加约束,所以才会导致更多的bug发生率,这么说你或许不太理解,举例了一些代码帮你理解。
没有使用TypeScript,出现类型错误,在一些大型项目中这种错误会难易追踪
let age; // 弱类型声明,没有指定类型
// 假设我们打算存储一个年龄,但不小心存储了一个字符串
age = "thirty two";
// 稍后在某处我们尝试使用这个值进行数学运算
let totalYears = age * 10; // 这里会进行字符串拼接,而不是数学乘法
console.log(totalYears); // 输出 "thirty two10" 而不是预期的 320
而如果我使用了TypeScript
let age: number; // 显式类型声明为number
// 尝试给一个number类型的变量赋一个字符串值会导致编译错误
age = "thirty two"; // TypeScript编译错误:Type 'string' is not assignable to type 'number'.
// 如果我们正确地为age赋一个数字值,那么接下来的数学运算将按预期进行
age = 32;
let totalYears = age * 10; // 正确执行数学乘法,输出 320
console.log(totalYears); // 输出 320
TypeScript在开发过程中是经过编译成js之后才会执行,会让程序在执行前便就会发生错误
二.TypeScript基本类型
1. 任意值类型:any类型,声明为any的变量可以赋予任何类型的值,它允许你在编译时绕过类型检查。
let value: any;
value = "Hello, World!"; // OK
value = 42; // OK
value = true; // OK
value = { key: "value" }; // OK
2.数字类型:number双精度 64 位浮点值。它可以用来表示整数和分数
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制
let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制
3.字符串类型:string一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。
let name: string = "Runoob";
let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
4.布尔类型:boolean表示逻辑值:true 和 false。
let flag: boolean = true;
5.数组类型:
//1.数组中存在单个或者同类型的数组
const arrA: number[] = [1, 2, 4];
const arrC: boolean[] = [true, false]
const arrD: string[] = ['1', '3']
const arrE: void[] = [undefined, null, null]
const arrF: undefined[] = [undefined, undefined]
//2.如果说数组中可能会出现不同类型
const arrG: (number | string | number[] | boolean)[] = [1, '4', true, [1, 2, 4]]
//3.ts中元祖的使用:如果数组中的元素时不同类型,并且必须规定顺序,那么这样的数组应该应用中元组类型定义
const arrH: [string, boolean, number] = ['666', true, 666]
const arrI: [string, boolean, number][] = [['666', true, 666]]
//4.数组中同类型对象不同属性类型该如何定义呢
type typeA = { unname: string, age: number }
const arrTypeA: typeA[] = [{ unname: '小刘', age: 24 }]
6.元组:Tuple元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。和上述数组类型第三点一样
let x: [string, number];
7.枚举enum:
//先来看看什么是枚举类型
enum Country {
China,
USA,
Russia
}
//上述定义了一个枚举类型,如果不做修改的话Country.China的值为0,1,2
//如果我们定义了
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green; //2
let d: Color = Color [2];//Green
//关于这个枚举这个类型,我查阅了大部分资料得出结论,没有太大的实用价值,对于js对象区别来说不大,可能语意化更好吧
8.void用于标识方法返回值的类型,表示该方法没有返回值。
function hello(): void {
alert("Hello Runoob");
}
9.null:表示对象值缺失。
10.undefined:用于初始化变量为一个未定义的值。
11.never:never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。
三.TypeScript特殊类型声明
1.接口:(Interface)是一种定义对象结构的方式,它指定了一个对象必须具有的形状(shape),即对象的属性和方法。
interface Person {
readonly id: number; // 只读属性
name: string;
age?: number; // 可选属性
greet(message: string): void; // 方法
}
//类实现上述接口 implements表示一个类实现某个接口,意味着该类必须得提供该接口的所有属性和方法
class Employee implements Person {
id: number;
name: string;
age?: number; // 可选属性在类实现时也是可选的
constructor(id: number, name: string, age?: number) {
this.id = id;
this.name = name;
this.age = age;
}
greet(message: string): void {
console.log(`${this.name} says: ${message}`);
}
}
2.类型断言:类型断言在于告诉编译器,我们比他更确定某个值的类型。
//两种写法,在 tsx 语法中必须使用 值 as 类型。因为形如 <Foo> 的语法在 tsx 中表示的是一个 ReactNode,在 ts 中除了表示类型断言之外,也可能是表示一个泛型。
1.值 as 类型
2.<类型>值
let foo: any = 'hello';
let bar = <string>foo;
let res = foo as String;
联合类型断言
interface Circle {
kind: "circle";
radius: number;
}
interface Rectangle {
kind: "rectangle";
width: number;
height: number;
}
//使用类型别名
type Shape = Circle | Rectangle;
function draw(shape: Shape) {
// ... 根据 shape 的类型执行不同的绘制逻辑
}
3.联合类型:可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。
var val:string|number
val = 12
console.log("数字为 "+ val)
val = "Runoob"
console.log("字符串为 " + val)
4.泛型:允许在定义函数、类、接口等时使用占位符来表示类型,而不是具体的类型。
//假设我们用一个函数,它可接受一个 number 参数并返回一个number 参数,如下写法:
function returnItem (para: number): number {
return para
}
function returnItem (para: string): string {
return para
}
//上述两种编写方式,存在最明显的问题就是代码重复度高
//虽然可以使用 any类型去替代,但这也并不是很好的方案,因为我们的目的是接收什么类型的参数返回什么类型的参数,即在运行时传入参数我们才能确定类型
//这样的情况下,我们就可以使用泛型
function returnItem<T>(para: T): T {
return para
}
//定义多个参数泛型
function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]];
}
swap([7, 'seven']); // ['seven', 7]
//与联合类型合用
function processArray<T extends string | number>(arr: T[]): void {
// 遍历数组并处理每个元素
for (const item of arr) {
// 由于T是string或number的联合类型,我们需要进行类型守卫来安全地处理每个元素
if (typeof item === 'string') {
// 处理字符串
console.log(`String item: ${item}`);
} else if (typeof item === 'number') {
// 处理数字
console.log(`Number item: ${item}`);
}
}
}