TypeScript

一、TS介绍

1、什么是TS？

        TypeScript是一种由微软开发的开源编程语言，是JavaScript的超集，为JavaScript添加了静态类型选项。TypeScript在编译时期执行类型检查，有助于发现代码中的错误，并且提供了代码补全、接口、泛型等特性，使得代码更加健壮、易于维护和扩展。TypeScript最终被编译成普通的JavaScript代码，可以在任何支持JavaScript的环境中运行。

2、为什么要使用TS？

• 是一种趋势，TS 已经快成为前端的必备技能了
•  TS可以在编译时期执行类型检查，这有助于在代码运行之前发现潜在的错误，提高代码质量，减少运行时异常的几率。
• TS提供了类型注解和类型推断，这使得代码编辑器能够提供更加准确的代码提示和补全。
• TS兼容现有的JavaScript库，任何JS代码都可以直接使用。
• TS提供了更严格的类型检查和更多的面向对象特性，这使得它适用于开发大型应用程序。

3、TS和JS的区别？

TypeScript	JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页。
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解	可以直接在浏览器中使用
支持泛型和接口	不支持泛型或接口
支持 ES3，ES4，ES5 和 ES6 等	不支持编译其他 ES3，ES4，ES5 或 ES6 功能
社区的支持仍在增长，而且还不是很大	大量的社区支持以及大量文档和解决问题的支持

二、安装TS

安装TS

pnpm i -g typescript

编译

tsc helloworld.ts

初始化

tsc --init

三、TS基础类型

1、原始类型（boolean、number 和 string）

//布尔型
const a: boolean = false;
//number
const count: number = 10;
//string
const title: string = "你好，李焕英";

2、undefined 和 null

// undefined 类型
let u:undefined = undefined
// null 类型
let n:null = null

3、数组

const list: number[] = [1, 2, 3];

const list: Array<number> = [1, 2, 3]; // Array<number>泛型语法

4、枚举类型enum

enum Gender {
  MAN,
  WOMAN
}
const gender: string = Gender[0]
console.log(gender)

5、any类型

let str: any = 666;
str = "hello";

6、元组类型Tuple

let user: [number, string] = [18, 'meng']

7、void类型

function fn(): void {
  console.log('void代表函数没有返回值');
}

8、never类型

// 异常
function fn(msg: string): never { 
  throw new Error(msg)
}

9、unknown类型

let value: unknown
value = 10            
value = "Hello World"    

二、函数

1、函数的类型签名/类型注释/类型约束

function say1(name: string, age: number): string{
    return `你好，我是${name}, 我今年${age}了`
}

function say2(name: string, age: number): void{
    console.log(`你好，我是${name}, 我今年${age}了`)
}

2、可选参数和默认参数

// 可选参数要放在最后面，默认参数和可选参数不能同时存在
function createUser(id: number, name: string = '默认姓名', age: number, score?: number) {
}
createUser(0, '蒙面大婶', 18)

3、函数重载

        使用相同函数名称和不同参数数量或类型创建多个方法。

function add(a: number, b: number): number; // 加法操作
function add(a: string, b: string): string; // 字符串拼接
function add(a: number | string, b: number | string): number | string {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  }
  return a + b;
}

4、索引签名

        有时候我们希望一个接口中除了包含必选和可选属性之外，还允许有其他的任意属性，这时我们可以使用 索引签名 的形式来满足上述要求。

interface IPerson {
    id: number
    name: string
    [prop: string]: unknown 
}
const p:IPerson = {
    id: 0,
    name: '蒙面大婶',
    sex: '女'
}

三、对象和interface接口

        接口（Interface）是一种用于定义对象形状的类型。接口指定了对象应该具有哪些属性和方法，以及这些属性和方法的类型。

1、基本使用

interface Person {
  name: string;
  age: number;
  isProgrammer: boolean;
}

let person1: Person = {
  name: '蒙面大婶',
  age: 17,
  isProgrammer: true,
};

2、泛型

        当不知道对象中的某个值是什么类型时就用泛型来传递类型

interface Persien<T>{
  name:string,
  age:number,
  document:T
}
const Persien1:Persien<string[]>={
  name:'蒙面大婶',
  age:1,
  document:['passport','bank']
}
const Persien2:Persien<string>={
  name:'蒙面大婶2',
  age:2,
  document:'passport,banl'
}

四、类

        类定义了一组具有相同属性和行为的对象。

1、基本写法

class Person {
    name: string
    constructor(name: string) {
        this.name = name
    }
    speak() {
        console.log(`${this.name} is speaking`)
    }
}
 
const p1 = new Person('蒙面大婶')   
 
p1.name                        
p1.speak()

2、类的继承

        类的继承是面向对象编程中的一个核心概念。子类继承了父类的属性和方法，并且可以添加新的属性和方法或覆盖（重写）父类中的方法。在TypeScript中，类继承是通过extends关键字来声明的。当一个类继承自另一个类时，它将自动获得父类的所有公有（public）和受保护（protected）成员，但不会继承私有（private）成员。

class Student extends Person {
    study() {
        console.log(`${this.name} needs study`)
    }
}
 
const s1 = new Student('蒙面大婶')
 
s1.study()

3、类的多态

class Student extends Person {
    speak() {
        return `Student ${super.speak()}`
    }
}

4、public（公有的）

        不写默认就是public

class Person {
    public name: string
    public constructor(name: string) {
        this.name = name
    }
    public speak() {
        console.log(`${this.name} is speaking`)
    }
}

5、private（私有的）

        只属于这个类自己，它的实例和继承它的子类都访问不到。

class Person {
    private name: string
    public constructor(name: string) {
        this.name = name
    }
    public speak() {
        console.log(`${this.name} is speaking`)
    }
}

6、protected （受保护的）

        继承它的子类可以访问，实例不能访问。

class Person {
    protected name: string
    public constructor(name: string) {
        this.name = name
    }
    public speak() {
        console.log(`${this.name} is speaking`)
    }
}

五、总结

        总的来说，TS是JavaScript的一个超集，并添加了静态类型和基于类的面向对象编程。TypeScript在解决大型项目的开发中已经必不可少，它通过提供类型系统来增强代码的健壮性和可维护性，同时仍然保持了JavaScript的灵活性。