• 作者:老汪软件技巧
  • 发表时间:2024-09-09 00:06
  • 浏览量:

TypeScript 是一种由 Microsoft 开发的编程语言,是 JavaScript 的超集。Typescript是强类型语言,主要添加了静态类型系统,这使得开发大型应用程序时可以更容易地发现和修复错误。对于我们初学者来说,首先来了解下 TypeScript 的基本概念和示例:

类型基础类型:any、unknow与never

any 类型:

unknown 类型:

对 unknown 类型的变量进行属性访问:

unknown 更注重类型安全,需要进行显式的类型检查,而 any 是一种更加宽松的类型,但它会降低类型安全性。

never类型

never是TypeScript中的一个特殊类型,用来表示永远不会有值的类型。绝大多数用在函数上。

使用场景:

==>1. 函数不返回任何值

如果一个函数永远不会返回(抛出异常),我们就可以将它的返回类型指定为never

function throwError(message: string): never {
  throw new Error(message);
}

==> 2. 函数无法正常完成

如果一个函数执行了一个无限循环或类似的操作,导致它无法正常结束,它的返回类型也可以是 never

`function infiniteLoop(): never {
    while (true) {
    // 无限循环 
       } 
}`

字面量类型

比如,在TS中,let x: 'hello' 就是一种字面量类型的用法。表示变量 x 的值只能是字符串 'hello'。

例子及解释:

let x: 'hello' = 'hello'; // 合法,'hello' 是变量 x 的唯一允许值

如果我们将 x 赋值为其他字符串或任何其他类型的值,TypeScript 会报错:

x = 'world'; 
x = 42; 

这种类型的定义创建了一个字面量类型,是一种更为具体的类型,限制变量只能取特定的值。字面量类型可以用于各种场景,例如:

函数参数和返回值:

创建常量枚举:

作为类型的一部分:

类型推断:

ps:TS类型检查发生在编译阶段

联合类型:类型别名:函数函数类型:

当我们声明函数时,如果函数中没有返回值,则为空

如果有返回值,则类型为返回值的类型

_抛出异常还是返回错误信息_该函数返回了一个值

如果我们已经声明此函数的类型为void,则不能有返回值:

参数为函数

我们看这个例子:

这里给出了提示,说参数的类型可以更精确,如果是在JS当中,我们直接这样写没有任何问题,但在TS中,类型的定义必须明确,所以这里补上:

function foo(f:Function){
}
function bar(){
}
foo(bar)

参数不确定

如果我们定义的函数,不确定是否有参数的传入,我们可以加上?代表不确定。

其他例子:

例子 1

function foo(x: number = 1, y?: number): [number, number?] {
  return [x, y];
}
foo(1, 2);

解释:

例子 2

function foo({a, b, c}: {a: number, b: number, c: number}) {
}
foo({a: 1, b: 2, c: 3});

解释:

例子 3

function foo(...arg: [number, number, number]) {
}
foo(1, 2, 3);

解释:

例子 4

解释:

函数重载

在 TypeScript 中,函数重载是一种为同一个函数定义多个签名的技术,允许函数根据不同的参数类型执行不同的逻辑。你提供的代码可以通过函数重载来更明确地表达参数和返回类型的关系。

下面是基于简单的 reverse 函数的重载实现:

// 函数签名:用于声明重载
function reverse(str: string): string;
function reverse(arr: number[]): number[];
// 实现函数逻辑
function reverse(strOrArr: string | number[]): string | number[] {
  if (typeof strOrArr === 'string') {
    return strOrArr.split('').reverse().join(''); // 处理字符串
  } else {
    return strOrArr.slice().reverse(); // 处理数组
  }
}
// 调用函数
const reversedString = reverse('abcdefg'); // 返回 'gfedcba'
const reversedArray = reverse([1, 2, 3]); // 返回 [3, 2, 1]

解释:

重载签名:可以为 reverse 函数定义多个重载签名:

实现逻辑:实际的 reverse 函数实现接受一个 string 或 number[] 类型的参数,通过类型检查(typeof)决定处理方式。

调用:

通过这种方式,TypeScript 能更好地推断返回值的类型,从而在调用时提供更精确的类型提示和检查。