2024/2/6学习记录

ts

因为已经学习过了 js ，下面的都是挑了一些 ts 与 js 不同的地方来记录。

安装

npm install -g typescript

安装好之后，可以看看自己的版本

ts基础语法

模块函数变量语法和表达式注释

编译 ts 文件需要用 tsc xxx.ts ，js 文件是用 node 去编译

ts是一个面向对象的编程语言

ts 的数据类型

number 双精度64位浮点数，可以用来表示整数和分数
string 字符串
boolean 布尔类型
数组类型
元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同

示例：

enum 枚举用于定义数值集合
void 用于标识方法返回值，表示该方法没有返回值
null 表示对象值缺失
never 是其他类型包括 null 和 undefined 的子类型，代表从不会出现的值
Any类型

任意值 Any 类型

是 ts 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况：

变量的值会动态改变
改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查
定义存储各种数据类型的数组时

Null 和 Undefined

ts 变量声明

格式：

需要指定类型，倘若没有指定类型，初始值就是 undefined

变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现重名

需要编译 ts 代码需要先用 tsc 编译成 js 文件，再用 node 去编译 js 文件。

类型断言

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改位另外一种类型。

语法：

var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型
console.log(str2)

类型断言纯粹是一个编译时语法，同时它也是一种为编译器提供关于如何分析代码的方法。

类型推断

当类型没有给出时，ts 编译器利用类型推断类型，如果由于缺乏声明而不能推断出类型，那么它的类型将被视作动态的 any 类型

变量作用域

ts 一共有三种

全局作用域
类作用域
局部作用域

函数定义：

function function_name():return_type { 
    // 语句
    return value; 
}

函数带参数：

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

和 js 还是有些不同的

构造函数

ts 支持使用 js 内置的构造函数来定义函数

语法：

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

实例：

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

编译后的 js 代码：

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

函数重载

参数类型不同

function disp(string):void; 
function disp(number):void;

参数数量不同

function disp(n1:number):void; 
function disp(x:number,y:number):void;

参数类型顺序不同

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

如果参数类型不同，则参数类型应设置为 any，参数数量不同可以将不同的参数设置为可选

实例：

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

联合类型

可以通过 | 运算符 将变量设置多种类型，赋值时可以根据设置的类型来赋值，只能赋值指定的类型，如果赋值其他类型就会报错。

实例：

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

也可以将联合类型作为函数参数使用

实例：

function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i])
                } 
        } 
} 
disp("Runoob") 
console.log("输出数组....") 
disp(["Runoob","Google","Taobao","Facebook"])

ts 接口

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

interface interface_name { 
}

实例：

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

联合类型和接口的实例：

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());

接口和数组

接口中，我们可以将数组的索引值和元素设置为不同类型，索引值可以是数组或字符串

接口继承

使用关键字 extends

实例：

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

ts 类

ts 类定义方式如下：

class class_name { 
    // 类作用域
}

static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

实例：

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson);

访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

public

公有，可以在任何地方被访问

protected

受保护，可以被其自身以及其子类访问

private

私有，只能被其定义所在的类访问。

类和接口

类可以实现接口，使用关键字 implements

实例：

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

ts 类型模板

在对象中添加方法不能这样写：

对象.方法=function(){ //TODO }

在 ts 中这样写会出现编译错误，是因为 ts 中的对象必须是特定类型的实例

ts 泛型

泛型（Generics）是一种编程语言特性，允许在定义函数、类、接口等时使用占位符来表示类型，而不是具体的类型。

泛型是一种在编写可重用、灵活且类型安全的代码时非常有用的功能。

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

优势：

代码重用
类型安全
抽象性

泛型函数实例：

function identity<T>(arg: T): T {
    return arg;
}

// 使用泛型函数
let result = identity<string>("Hello");
console.log(result); // 输出: Hello

let numberResult = identity<number>(42);
console.log(numberResult); // 输出: 42

泛型接口

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

实例：

// 基本语法
interface Pair<T, U> {
    first: T;
    second: U;
}

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

ts 命名空间

命名空间是为了解决重名问题关键字：namespace

命名空间定义了标识符的可见范围，一个标识符可在多个命名空间中定义，它在不同命名空间中的含义是互不相干的。这样，在一个新的命名空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他命名空间中。

实例：

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

调用的格式为：

SomeNameSpaceName.SomeClassName;

如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：

/// <reference path = "SomeFileName.ts" />

ts 模块

模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。

实例：

导出模块

/// <reference path = "IShape.ts" /> 
export interface IShape { 
   draw(); 
}

导入使用：

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

uni-app

是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 IOS Android H5 以及各种小程序，快应用等多个平台。

开发工具

官方推荐使用 HbuilderX 来开发 uni-app 类型的项目

好处：

模板丰富
完善的智能提示
一键运行

安装 HBuilderX

HBuilderX-高效极客技巧 (dcloud.io)

安装 Sass

scss/sass编译 - DCloud 插件市场

配置个性化设置

代码：

{
    "editor.colorscheme": "Default",
	"editor.fontsize": 12,
    "editor.fontFamily":"consolas",
	"editor.fontFmyCHS":"微软雅黑 Light",
	"editor.insertSpaces": true,
	"editor.lineHeight":"1.5",
	"editor.minimap.enabled": false,
	"editor.mouseWheelZoom": true,
	"editor.onlyHighlightWord":false,
	"editor.tabsize":2,
    "editor.wordwrap":true,
	"explorer.iconTheme":"vs-seti",
	"editor.codeassist.px2rem.enabel":false,
	"editor.codeassist.px2upx.enabel":false
}