学习TypeScript（一）

Ts静态类型 可以直接在编译器进行类型检查

js动态类型 在代码执行期的时候才会进行类型检查

好处

优势

程序中任何位置的代码都会有错误提示，避免浪费时间

提高维护性 让代码重构更容易 只需要修改类型就可以

全局安装

打开cmd电脑全局安装 npm i -g typescript

检查是否安装成功 tsc -v

TypeScript 入门教程

1. 安装TypeScript

npm install -g typescript

---

2.创建TypeScript文件

创建一个新的文件并设置扩展名为 .ts

---

3.TypeScript基本

// 基本类型
  let num: number = 5;
  let str: string = "Hello, TypeScript";
  let bool: boolean = true;
  let arr: number[] = [1, 2, 3];
  let tuple: [string, number] = ["hello", 5];

  // 函数
  function add(a: number, b: number): number {
  return a + b;
  }

  // 接口  定义参数类型
  interface Person {
  name: string;
  age: number;
  }

  function greet(person: Person): string {
  return `Hello, ${person.name}! You are ${person.age} years old.`;
  }

  let john: Person = { name: "John", age: 30 };
  console.log(greet(john));

4. 类型注解和类型推断

在上面的例子中，我们在变量后面用 : 来显式地注解类型。这称为类型注解。TypeScript还可以进行类型推断，根据上下文自动推断变量的类型，这在上面的示例中是可行的。

---

5. 基础数据类型加强

1. 数组（array） ： 一组相同类型的元素的有序集合。可以指定元素的类型。

let number: number[] = [1, 2, 3] //推荐使用
let strings: string[] = ["apple", "banana", "cherry"];
let number3: boolean[] = [true, false, true];

添加了括号代表是number的数组 或者 string的数组
let number4: (number | string)[] = [1, "2", 2]; //联合类型
不添加括号代表是number类型 或者 string的数组
let number4: number | string[] = ["2","3"]; //联合类型

或者使用泛型来定义数组类型：（不推荐）

typescript
let anyArray: Array = ["a", "b", "c"];

1.1. 类型别名 如果有多个需要设置同样的类型 会很麻烦 下面有简单的方式可以通用

// 类型别名 type xxx = 类型
type PersonType = (number | string)[]
let number5: PersonType = [1, "2", 3]; //类型别名

2. 元组类型（tuple） ： 一种特殊的数组，其中的元素可以是不同类型的，并且每个元素都有自己的类型。

允许表示一个已知元素数量和类型的数组，各元素的类型不必相同（前提是知道）

let str: [string, number] = ["hello", 10]; 

3. 枚举（enum） ： 定义了一组命名的常量。枚举成员默认从0开始编号，也可以手动指定成员的数值。

enum Color {Red, Green, Blue}
let color: Color = Color.Green;

4. 任意类型（any） ： 允许赋值和操作任何类型的数据。

let anyValue: any = "This is a string";
anyValue = 42; // Now it's a number

5. 空值和未定义（void） ： 表示没有任何类型。通常用于函数没有返回值的情况。

void 类型表示没有任何返回值的函数，如果你确定没有返回值 return语句 可以直接定义为void 类型

function sayHello(): void {
  console.log("Hello!");
  // 也就是这个函数里面明确没有return 返回值 就可以直接使用void
}

6. 暂时未知类型（unkonw ）：暂时未知类型（之后会知道），仍然会进行ts的类型检查

// unkonw类型是暂时未知类型（之后会知道），仍然会进行ts的类型检查
const divide = (param: unknown)=> {
  return param as number / 2;
}
console.log(divide(2));

7. 永不存在类型 （never）

如果一个函数执行时抛出了异常，那么这个函数永远不存在返回值，因为抛出异常会直接中断程序运行。函数中执行无限循环的代码，使得程序永远无法运行到函数返回值那一步。

// never类型表示的是那些永不存在的值的类型。
// 如果一个函数执行时抛出了异常，那么这个函数永远不存在返回值，因为抛出异常会直接中断程序运行。
// 函数中执行无限循环的代码，使得程序永远无法运行到函数返回值那一步。
const fn = (msg: string): never => { 
  throw new Error(msg)
}

8. 函数类型

TS 定义函数类型需要定义输入参数类型和输出类型。

// 函数类型
// TS 定义函数类型需要定义输入参数类型和输出类型。
const fun = (参数1: 类型1, 参数2: 类型2): 返回值类型 => {
  // 函数体
  return 返回值;
}

// 如果函数没有明确返回值，默认返回 Void 类型
const fun1 = ():void => {
  console.log('hello');
}

const add = (x: number, y: number):number =>{
  return x + y;
}
console.log(add(2,1));

9. 函数可选参数

参数后加个问号，代表这个参数是可选的

注意可选参数要放在函数入参的最后面，不然会导致编译错误。

const str = (x: number, y?: number, z?: number): number => {  
  // 如果 y 是 undefined，则使用 0 或其他默认值  
  const defaultY = y ?? 0; // 使用逻辑空值合并操作符 (??) 来提供一个默认值  
  if(z !== undefined){
    return x + z;
  }else{
    return x + defaultY;  
  }
}  
  
console.log(str(1)) // 返回 1  
console.log(str(1,2)) // 返回 3
console.log(str(1,2,3)) // 返回 4

10. 函数默认值

如果带默认值的参数不是最后一个参数，用户必须明确的传入 undefined值来获得使用默认值。

// 默认值
// 如果带默认值的参数不是最后一个参数，用户必须明确的传入 undefined值来获得使用默认值。
const res = (str:number = 200, num:number):any=>{
  return str + num;
}

console.log(res(undefined,2));

11. 函数赋值

// 函数赋值
let add2 = (x: number, y: number): number => {
    return x + y
}
// 有点像 es6 中的箭头函数，但不是箭头函数，TS 遇到 : 就知道后面的代码是写类型用的。
// 当然，不用定义 add3 类型直接赋值也可以，TS 会在变量赋值的过程中，自动推断类型，
const add3:(x: number, y: number) => number = add2

console.log(add3(1,2));

12. 函数重载

个人理解 简洁了代码 封装通用函数

// 函数重载
// 函数重载是指两个函数名称相同，但是参数个数或参数类型不同，他的好处显而易见，不需要把相似功能的函数拆分成多个函数名称不同的函数。
// 不同参数类型
// 比如我们实现一个 add 函数，如果传入参数都是数字，就返回数字相加，如果传入参数都是字符串，就返回字符串拼接，
function add(x: number[]): number
function add(x: string[]): string
function add(x: number[], y: number[]): number
function add(x: string[], y: string[]): string
function add(x: any[], y?: any[]): any {
  if (Array.isArray(y) && typeof y[0] === 'number') {
    return x.reduce((acc, cur) => acc + cur) + y.reduce((acc, cur) => acc + cur)
  }
  if (Array.isArray(y) && typeof y[0] === 'string') {
    return x.join() + ',' + y.join()
  }
  if (typeof x[0] === 'string') {
    return x.join()
  }
  if (typeof x[0] === 'number') {
    return x.reduce((acc, cur) => acc + cur)
  }
}


console.log(add([1,2,3]))      // 6
console.log(add(['lin', '18']))  // 'lin,18'
console.log(add([1,2,3], [1,2,3])) // 12
console.log(add(['lin', '18'], ['man', 'handsome'])) // 'lin,18,man,handsome'

---

参考文献

「1.9W字总结」一份通俗易懂的 TS 教程，入门 + 实战！-CSDN博客