www/blogs/frontend/typescript.md

title, date, sidebar, tags, categories

title	date	sidebar	tags	categories
Typescript-基本语法	2022-02-27	auto	TypeScript	JavaScript

1 Typescript安装

• 安装命令: npm i typescript -g
• 使用Typescript命令查看安装的版本号: tsc -v
• 生成配置文件tsconfig.json: tsc -init

1.1 tsc常用编译参数

编译参数	说明
--help	显示帮助信息
--module	载入扩展模块
--target	设置 ECMA 版本
--declaration	额外生成一个 .d.ts 扩展名的文件。tsc ts-hw.ts --declaration 以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。
--removeComments	删除文件的注释
--out	编译多个文件并合并到一个输出的文件
--sourcemap	生成一个 sourcemap (.map) 文件。sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。
--module noImplicitAny	在表达式和声明上有隐含的 any 类型时报错
--watch	在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。

2 Typescript基础类型

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值。let x:any
数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。let num:number
字符串类型	string	一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
布尔类型	boolean	表示逻辑值：true 和 false。
数组类型	无	声明变量为数组。let arr:number[];let arr:Array<number>;// 泛型定义
元组	无	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。let x:[string, number] = ['string', 15]
枚举	enum	枚举类型用于定义数值集合。enum Color{Red, Green};// 没有赋值默认从0开始
void	void	用于标识方法返回值的类型，表示该方法没有返回值。function hello(): void {}
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

3 Typescript接口

3.1 属性类型接口

// 对传入对象的属性约束, 以下是一个约束属性接口
interface User{
    username: string;
    password?: string; // 可选传递
}

function save(user:User):void{
    console.log(user)
}

let info = {
    username: "张三",
    password: "qwe123",
    age: 15     // 额外传递的参数
}
// 传递一个自定义对象的参数需要有必选参数, 其他的属性不会进行检查
save(info)
// 如果直接进行对象传递那么会进行类型的检查
save({
    username: "张三",
    password: "qwe123"
})

3.2 函数类型接口

// 定义一个函数类型的接口
interface encrypt {
    (key: string, value: string): string;
}
// 既然类型定义为接口类型(参数列表可以不用写类型), 那么就得符合接口的类型
let md5: encrypt = (key, value): string => {
    return `MD5://${key}.${value}`
}
// 发现类型换成any也行, 因为any能接受所有类型
let sha1: encrypt = (key: any, value: any): any => {
    return `SHA1://${key}.${value}`
}
console.log(md5("qwe", "123"))
// 但是发现还是会被类型约束, 所以就算定义了any类型也没有什么起效
// sha1(123, 564) // 错误写法
console.log(sha1("asd", "zxc"))

3.3 可索引型接口

// 可索引型数组接口, []中为number, 返回值为string
interface CustomArr {
    [index: number]: string;
}
let arr: CustomArr = ['111', '222']
console.log(arr[1])

// 可索引型对象接口, key为string, value为string
interface CustomObj {
    [index: string]: string;
}
let obj: CustomObj = {name: 'zhang', sex: '男'}
console.log(obj['name'])
console.log(obj.sex)

3.44 类类型接口

与面向对象语言相似(Java)

4 Typescript泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件。

通俗理解：泛型就是解决类、接口、方法的复用性、以及对不特定数据类型的支持。

5 Typescript装饰器

对修饰器的实验支持功能在将来的版本中可能更改。

在"tsconfig"或"jsconfig"中设置"experimentalDecorators"选项以删除此警告。

"experimentalDecorators":true // 启用对ES7装饰器的实验性支持。

装饰器是一种特殊类型的声明，它能够被附加到类、方法、属性或参数上，可以修改类的行为，通俗的讲装饰器就是一个方法，可以注入到类、方法、属性或参数上来扩展类、方法、属性或参数的功能。常见的装饰器有：类装饰器、方法装饰器、属性装饰器、参数装饰器。

装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参），装饰器是过去几年中JS最大的成就之一，已是ES7的标准特性之一。

5.1 类修饰器

• 类装饰器: 普通装饰器(无法传参)

  function logClass(param: any){
      // 获取到的参数是该实例化对象
      console.log(param)
      // 在这里可以对实例话对象进行动态挂载数据
      param.prototype.apiUrl = 'http://localhost'
      param.prototype.run = () => {
          console.log("动态扩展的run方法")
      }
  }
  
  // 该类装饰器不能传递参数
  @logClass
  class HttpClient {}
  
  let http:any = new HttpClient()
  console.log(http.apiUrl)
  http.run()
  

• 类装饰器: 装饰器工厂(可传参)

  function logClass(...params: string[]) {
      return function(target: any) {
          // target是当前类的对象
          console.log(target)
          // params是装饰器中传递的参数, 可以定义多个参数
          target.prototype.apiUrl = params[0] + params[1]
      }
  }
  
  @logClass('http://localhost', "/api/users")
  class HttpClient{}
  
  let http: any = new HttpClient()
  console.log(http.apiUrl)
  

5.2 属性修饰器

属性装饰器会被应用到属性描述上，可以用来监视、修改或者替换属性的值。

属性装饰器会在运行时传入下列2个参数：

• 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
• 成员的名字。

function logProperty(params: string) {
    return function(target: any, attr: any) {
        // 装饰器传递的参数
        console.log(params)
        // 给类的属性挂载数据
        target[attr] = params
    }
}

class HttpClient {
    @logProperty("http://localhost")
    apiUrl: string | undefined;

    getApiUrl() {
        console.log(this.apiUrl)
    }
}

let http: HttpClient = new HttpClient()
http.getApiUrl()

5.3 方法修饰器

方法装饰器会被应用到方法描述上，可以用来监视、修改或者替换方法定义。

方法装饰器会在运行时传入下列3个参数：

• 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
• 成员的名字。
• 成员的属性描述符。

class HttpClient {
    public url: any | undefined;

    @get("http://localhost")
    getData() {
        console.log(this.url);
    }
}

function get(param: string){
    return function(target: any, methodName: any, desc: any){
        console.log(target)
        console.log(methodName)
        console.log(desc)
        // 可以通过类的原型对象target对该实例进行数据挂载
        target.url = param
        target.run = function(){
            console.log('run')
        }
        // 可以修改装饰器所放置方法的实现, 以下的代码就是获取该方法的内容
        console.log(desc.value)
    }
}

let http: any = new HttpClient()
http.getData()
http.run()

5.4 参数修饰器

参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据 ，传入下列3个参数：

• 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
• 方法的名字。
• 参数在函数参数列表中的索引。

function logParams(params: any) {
    return function (target: any, methodName: any, paramsIndex: any) {
        console.log(target);
        console.log(methodName);
        console.log(paramsIndex);
        target.apiUrl = params;
    }
}

class HttpClient {
    getData(name: string, @logParams("10086") uuid: any) {
        console.log(uuid);
    }
}

let http: any = new HttpClient();
http.getData('zhang', 123456);
console.log(http.apiUrl);

5.5 修饰器的执行顺序

装饰器执行顺序：++属性 > 方法 > 方法参数 > 类++

如果有多个同类型的装饰器, 那么会++从后往前执行++

6 Typescript模块化

模块化的好处

• 防止命名冲突
• 代码复用
• 高维护性

模块功能主要由两个命令构成：export 和 import。

• export 命令用于规定模块的对外接口
• import 命令用于输入其它模块提供的功能

7 Typescript命名空间

命名空间：在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的函数、类、接口等放置到命名空间内，同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过export关键字对外暴露。

命名空间和模块的区别：

• 命名空间：内部模块，主要用于组织代码，避免命名冲突。
• 模块：ts的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。