---
title: Typescript-基本语法
date: 2022-02-27
sidebar: 'auto'
tags:
 - TypeScript
categories:
 - JavaScript
---
## 1 Typescript安装
- 安装命令: `npm i typescript -g`
- 使用Typescript命令查看安装的版本号: `tsc -v`
- 生成配置文件tsconfig.json: `tsc -init`

### 1.1 tsc常用编译参数

|<div style="width:120px">编译参数</div>|说明|
|:--|:--|
|--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基础类型

|<div style="width:80px">数据类型</div>|<div style="width:80px">关键字</div>|描述|
|:--|:--|:--|
|任意类型|	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 属性类型接口
```ts
// 对传入对象的属性约束, 以下是一个约束属性接口
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 函数类型接口
```ts
// 定义一个函数类型的接口
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 可索引型接口
```ts
// 可索引型数组接口, []中为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 类修饰器
+ 类装饰器: 普通装饰器(无法传参)
    ```ts
    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()
    ```

+ 类装饰器: 装饰器工厂(可传参)
    ```ts
    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个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 成员的名字。
```ts
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个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 成员的名字。
- 成员的属性描述符。
```ts
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个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 方法的名字。
- 参数在函数参数列表中的索引。
```ts
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的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。