TypeScript 基础

Typescript的好处是什么？

 TypeScript ：是JavaScript 的超集（ts是微软开发的开源编程语言，vue3的底层代码也是ts），即包含JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了JavaScript 的语法。TS 需要编译才能运行。

（ts包含了js的库和函数，ts上可以写任何的js，调用任何的js库，可以在ts中使用原生js语法）。相比于JavaScript ，它还增加了静态类型、类、模块、接口和类型注解方面的功能，更易于大项目的开发。

• TypeScript 引入了 JavaScript 中没有的“类”概念
• TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
• js没有重载概念，ts有可以重载
• ts增加了接口interface、泛型、类、类的多态、继承等
• ts对比js基础类型上，增加了 void/never/any/元组/枚举/以及一些高级类型

环境安装

## 
npm install -g typescript

## ts-node 是一个TypeScript执行引擎,能让我们在 Node.js 环境下直接运行 TypeScript 代码
npm install ts-node -g  

## 查看版本
tsc -v


## 通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。
## 然后执行以下命令将 TypeScript 转换为 JavaScript 代码
## 编译成js文件
tsc app.js

## 执行js文件
$ node app.js 


### ts 文件执行运行
ts-node-cwd.cmd .\app.ts

## linux
ts-node .\app.ts   

示例

export class DatabaseProvider {

    private static connection: Connection;
    private static configuration: DatabaseConfiguration;

    public static configure(databaseConfiguration: DatabaseConfiguration): void {
        DatabaseProvider.configuration = databaseConfiguration;
    }

    public static async getConnection(): Promise<Connection> {
        if (DatabaseProvider.connection) {
            return DatabaseProvider.connection;
        }

        if (!DatabaseProvider.configuration) {
            throw new Error('DatabaseProvider is not configured yet.');
        }

        const { type, host, port, username, password, database, ssl } = DatabaseProvider.configuration;
        DatabaseProvider.connection = await createConnection({
            type, host, port, username, password, database,
            extra: {
                ssl
            },
            entities: [
                User,
                AdminNotification,
                UserDeviceToken,
                UserRefreshToken,
                UserAccessToken,
                SysConfig,
                ReturnReason,
                ReturnType,
                ReturnRma,
                ReturnRmaReturnedItem,
                ReturnRmaRequestedItem,
                ReturnSkuPackageConfig,
                ReturnRmaPackage,
                ReturnRmaReturnedGroup,
            ],
            legacySpatialSupport: false,
            synchronize: false,
            autoSchemaSync: false,
            logging: true
        } as any); 

        return DatabaseProvider.connection;
    }
}

Tips

是否需要分号作为分隔符？

在 TypeScript 中,使用分号作为语句分隔符是一种常见的做法,但并不是必须的。TypeScript 会根据语法规则自动插入分号,这一过程称为"自动分号插入"。

新增的JS 语法基础

变量、元祖、数组、Map

// 变量
var uname:string= "hello";
var city = "cs";  // 当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。

// 元组
var aa_list=["a","b","c"];  
console.log(aa_list[0]);
console.log(uname);
console.log(city);

var shuzi:number =6;
console.log(shuzi);

// 数组
var sites:string[];
sites = ["google","baidu","sina"]
console.log(sites);
console.log(sites[0]);

// Number 对象,Number 对象是原始数值的包装对象
console.log("Number属性: ");
console.log(Number.MAX_VALUE);


var month = 1 
if( month<=0 || month >12) { 
    month = Number.NaN   // NaN 数字值
    console.log("月份是："+ month) 
} else { 
    console.log("输入月份数值正确。") 
}

// map对象
let myMap =new Map();
myMap.set("name","knight");
myMap.set("city","cs");

console.log(myMap);
console.log(myMap.get["name"]);

函数

// 参考文档： https://www.runoob.com/typescript/ts-function.html

// 函数
function greet():string{
    return "hello----"
}
console.log(greet())

// 带参数的函数
function add(x:number,y:number){
    return x+y
}
console.log(add(5,6))

接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

//  定义接口
interface Person{
    FirstName:string,
    lastName: string,
    sayhi: ()=>string
}

// 接口和数组
// 接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串
interface namelist{
    [index:number]:string
}

var list3:namelist=["a","b","c"]
console.log("测试接口和数组:"+list3);

// 类型一致,正确
var list2:namelist = ["google"]

// 接口实现
var customer:Person={
    FirstName:"knight",
    lastName:"zhou",
    sayhi: ():string=>{return "here"}
}


console.log(customer.FirstName);
console.log(customer.sayhi());


// 接口继承
interface Person2{
    age: number
}

interface Musicman extends Person2{
    instrument:string
}

var cc = <Musicman>{};
cc.age=30
cc.instrument="Drums"
console.log("年龄:  "+cc.age)
console.log("喜欢的乐器:  "+cc.instrument)

接口示例-01

interface Person{
    FirstName:string,
    lastName: string,
    sayhi: (a:string,b:string)=>string,
}

var  tt:Person={
    FirstName: "11",
    lastName: "22",
    sayhi:(a,b) => a+b+"hello"
}

let b = tt.sayhi("张三","一起")
console.log(b)    

接口示例-02

interface 里使用问号，代表可选属性。

interface Person{
    FirstName?:string,
    lastName?: string,
    sayhi: (a:string,b:string)=>void  
    /*
    void 表示函数不返回任何值
    void 在 TypeScript 中表示没有返回值,这在定义函数签名时很有用。
    它告诉调用者这个函数只是为了执行某些操作,而不是返回一个值。
    */
  
}

class China_Person implements Person {
    sayhi(a:string,b:string){
        console.log(`${a} ${b} hello`)
    }
}

let china_person: China_Person=new China_Person();
china_person.sayhi("张三","一起")

接口示例-03 

Omit属性 代表排除某些属性

interface Person{
    FirstName: string,
    lastName: string,
    sayhi: (a:string,b:string)=>void  
    /*
    void 表示函数不返回任何值
    void 在 TypeScript 中表示没有返回值,这在定义函数签名时很有用。
    它告诉调用者这个函数只是为了执行某些操作,而不是返回一个值。
    */
  
}

class China_Person implements Omit<Person,'FirstName'|'lastName'> {
    sayhi(a:string,b:string){
        console.log(`${a} ${b} hello`)
    }
}

let china_person: China_Person=new China_Person();
china_person.sayhi("张三","一起")

接口示例-04

constructor 构造器初始化对象。

interface Person{
    FirstName:string,
    lastName: string,
    sayhi: (a:string,b:string)=>void  
    /*
    void 表示函数不返回任何值
    void 在 TypeScript 中表示没有返回值,这在定义函数签名时很有用。
    它告诉调用者这个函数只是为了执行某些操作,而不是返回一个值。
    */
  
}

class China_Person implements Person {
    FirstName: string;
    lastName: string;
    // 构造函数，初始化一些内容
    constructor(firstname:string,lastname:string){
        this.FirstName=firstname
        this.lastName=lastname
    }

    sayhi(a:string,b:string){
        console.log(`${a} ${b} hello`)
    }
}

let china_person: China_Person=new China_Person("张三","李四");
china_person.sayhi("张三","一起")

对象

var obj_name={
    uname : 'knight',
    city : 'cs',
    test_list:['a','b','c']
}

console.log(obj_name)
console.log(obj_name['uname'])

// 类型模板
var sites = {
    site1:"google",
    site2: "baidu",
    site3: 'sina',
    sayhi: function(){
        return "hello \n knight---"
    }
}
console.log(sites)
console.log(sites.sayhi())

泛型

泛型（Generics）是一种编程语言特性，允许在定义函数、类、接口等时使用占位符来表示类型，而不是具体的类型。泛型是一种在编写可重用、灵活且类型安全的代码时非常有用的功能。

使用泛型的主要目的是为了处理不特定类型的数据，使得代码可以适用于多种数据类型而不失去类型检查。

泛型的优势包括：

• 代码重用： 可以编写与特定类型无关的通用代码，提高代码的复用性。

• 类型安全： 在编译时进行类型检查，避免在运行时出现类型错误。

• 抽象性： 允许编写更抽象和通用的代码，适应不同的数据类型和数据结构。

/*
T: 代表 "Type"，是最常见的泛型类型参数名。
K, V: 用于表示键（Key）和值（Value）的泛型类型参数。
E: 用于表示数组元素的泛型类型参数。
R: 用于表示函数返回值的泛型类型参数。
U, V: 通常用于表示第二、第三个泛型类型参数。
*/
function test<T>(arg: T) {
    return arg
}

// 泛型函数
let result = test<string>("aaaaa")
console.log(result)

let num = test<number>(42)
console.log(num)

/*
可以使用泛型来定义接口，使接口的成员能够使用任意类型
*/

// 泛型接口
interface Pair<T,U> {
    first: T;
    second: U;
}
// 使用泛型接口
let pair: Pair<string, number> = { first: "hello-ccccc", second: 42 };
console.log(pair); // 输出: { first: 'hello', second: 42 }

基础JS知识

模块

/*
TypeScript 模块的设计理念是可以更换的组织代码。
模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。
类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖
*/


// IShape.ts
export interface IShape {
    draw();
}


// bb.js
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
}