Ts第一天学习总结

TypeScript学习网站 www.typescriptlang.org/zh/docs/han…

1、含义

TypeScript 是一种带有 类型语法 的 JavaScript 语言，在任何使用 JavaScript 的开发场景中都可以使用。TS 是 JS 的超集，支持了JS 语法和扩展了类型语法。

2、Ts优势

• 更早发现错误，提高开发效率
• 随时随地提示，增强开发体验
• 强大类型系统，代码可维护性更好，重构代码更容易
• 类型推断机制，减少不必要类型注解，让编码更简单
• 最后：Vue3源码TS重写，React和TS完美配合，Angular默认支持TS，大中型前端项目首选。

3、Ts编译

// 安装
num.toLowerCase()

// 查看版本
tsc -v

// 编译Ts

-   新建 `hello.ts` 文件
-   当前目录打开命令行窗口，执行 `tsc hello.ts` 命令，同级目录生成 `hello.js` 文件
-   执行 `node hello.js` 验证一下

4、Ts + Vue创建项目

    npm create vite@latest my-vue-ts-app --template vue-ts
    
    在基于 vite 的项目中可以直接验证 ts 代码结果，因为已经配置好了 ts 环境。

5、类型注解

• 什么是类型注解？
  • 变量后面约定类型的语法，就是类型注解
• 类型注解作用？
  • 约定类型，明确提示

6、原始类型

TS 常用类型：

-   JS 已有类型
    -   简单类型，`number` `string` `boolean` `null` `undefined`
    -   复杂类型，对象 数组 函数

-   TS 新增类型
    -   联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型 等
    
    let age: number = 18;
    let myName: string = '黑马程序员';
    let isLoading: boolean = false;
    let nullValue: null = null;
    let undefinedValue: undefined = undefined;

7、数组类型

// 写法一：
let numbers: number[] = [1, 3, 5];

// 写法二：
let strings: Array<string> = ['a', 'b', 'c'];

// 推荐使用
number[] 写法

8、联合类型

将多个类型合并为一个类型

• 类型与类型之间使用 | 连接，代表类型可以是它们当中的其中一种，这种类型叫：联合类型

    let arr: (number | string)[] = [1, 'a', 2, 'b']
    
    // 给定时器ID加类型
    let timer: number | null = null
    timer = setInterval(() => {}, 1000)

9、类型别名

• 是什么：给类型取别名
• 怎么用： type 类型名字 = 类型（单个类型或者联合等都可以）
• 为什么要用：代码复用、简化代码

    type Customer = (number | string)[]
    let arr:Customer = [1, 'a', 4];
    let arr2:Customer = [1,2,'b',6]

10、函数类型

基本使用

给函数指定类型：其实是给参数和返回值指定类型
-   给函数指定类型，其实是给 `参数` 和 `返回值` 指定类型。

• 两种写法：
  • 在函数基础上 分别指定 参数和返回值类型
  • 使用类型别名 同时指定 参数和返回值类型

    // 分别指定：
       //函数声明
       function add(num1: number, num2: number): number {
           return num1 + num2
       }
       
       //箭头函数
       const add = (num1: number, num2: number): number => {
           return num1 + num2
       }
       
    // 同时指定
        type AddFn = (num1: number, num2: number) => number;
        const add: AddFn = (num1, num2) => {
            return num1 + num2
        }

void类型

    //若函数没有返回值，定义函数类型时返回值类型为 void
    const say = ():void => {
        console.log('hi')
    }
    
    //若函数没有返回值，且没有定义函数返回值类型的时候，默认是viod
    const say = () => {
        console.log('hi')
    }

可选参数

使用 ? 将参数标记为可选

const fn = (n?: number) => {
  // ..
};
fn();
fn(10);

const mySlice = (start?: number, end?: number) => {
  console.log('起始Index:', start, '结束Index:', end);
};
mySlice();
mySlice(1);
mySlice(1, 2);

注意：必选参数不能位于可选参数后 (start?: number, end: number) 这样是不行的

11.对象类型

基本使用

TS的对象类型，就是描述对象中属性和方法。因为对象是由属性好多方法组成的

    // 空对象
    let person: {} = {};

    // 有属性的对象
    let person: { name: string } = {
      name: '同学',
    };

    // 有属性和方法，一行书写多个属性 ; 分隔
    let person: { name: string; sayHi(): void } = {
      name: 'jack',
      sayHi() {},
    };

    // 换行写可以省略 ; 符号
    let person: {
      name: string;
      sayHi(): void;
    } = {
      name: 'jack',
      sayHi() {},
    };

扩展用法

对象类型中，函数使用箭头函数类型，属性设置可选，使用类型别名。

    // 函数使用箭头函数类型
    let person: {
      name: string
      sayHi: () => void
    } = {
      name: 'jack',
      sayHi() {},
    };
    
    // 对象属性可选
    // 例如：axios({url,method}) 如果是 get 请求 method 可以省略
    const axios = (config: { url: string; method?: string }) => {};

    // 使用类型别名
    // {} 会降低代码可阅读性，建议对象使用类型别名
    // const axios = (config: { url: string; method?: string }) => {};
    type Config = {
      url: string;
      method?: string;
    };
    const axios = (config: Config) => {};

• 对象的方法使用箭头函数类型怎么写？{sayHi:()=>void}
• 对象的可选参数怎么设置？{name?: string}
• 对象类型会使用 {} 如何提供可阅读性？类型别名

练习

创建一个学生对象，该对象中具有以下属性和方法：

• 属性：必选属性：姓名、性别、成绩，可选属性：身高
• 方法：学习、打游戏（可选）

    {
      type Student = {
        name: string,
        gender: string,
        score: number,
        height?: number,
        study(): void,
        play?: (game: string) => number
      }

      const student: Student = {
        name: 'zjx',
        gender: '1',
        score: 12,
        study() {},
        play(game) {
          return 12
        }
      }

       // 方法一（类型守卫）
      if(student.play) {
        student.play('英雄联盟')
      }
      
      // 方法二
      student.play?.()
      
      // 方法三
      student.play && student.play('111')
    }

13、接口interface

基本使用

接口声明是命名对象类型的另一种方式

    interface Person {
        name: string;
        age: number;
        sayHi: () => void;
    }
    
    let person: Persion = {
        name: 'jack',
        age: 19,
        sayHi() {},
    }
    

interface继承

interface使用extends实现接口继承，达到类型复用

    interface Point2D {
        x: number;
        y: number;
    }
    
    interface Point3D {
        x: number;
        y: number;
        z: number;
    }
    
    //继承
    interface Point2D {
        x: number;
        y: number;
    }
    
    interface Point3D extends Point2D {
        z: number;
    }

• 接口继承的语法：interface 接口A extends 接口B {}
• 继承后 接口A 拥有 接口B 的所有属性和函数的类型声明

14、type交叉类型

基本使用

掌握：使用交叉类型实现接口的继承效果

   // 实现Point2D与 {z:number} 类型合并得到Point3D类型
   type Point2D = {
       x: number;
       y: number;
   }
   
   type Point3D = Point2D & {
       z: number;
   }
   
   let o: Point3D = {
       x: 1,
       y: 2,
       z: 3
   }

使用 & 可以合并连接的对象类型，也叫：交叉类型

interface vs type