TypeScript知识扩展

1、TypeScript模块使用

1. JavaScript 有一个很长的处理模块化代码的历史，TypeScript 从 2012 年开始跟进，现在已经实现支持了很多格式。但是随着时间流逝，社区和 JavaScript 规范已经使用为名为 ES Module的格式，这也就是我们所知的 import/export 语法。
   1. ES 模块在 2015 年被添加到 JavaScript 规范中，到 2020 年，大部分的 web 浏览器和 JavaScript 运行环境都已经广泛支持。
   2. 所以在TypeScript中最主要使用的模块化方案就是ES Module；

2、非模块（Non-modules）

1. 我们需要先理解 TypeScript 认为什么是一个模块。
   1. JavaScript 规范声明任何没有 export 的 JavaScript 文件都应该被认为是一个脚本，而非一个模块。
   2. 在一个脚本文件中，变量和类型会被声明在共享的全局作用域，将多个输入文件合并成一个输出文件，或者在 HTML使用多个

export {}

3. 这会把文件改成一个没有导出任何内容的模块，这个语法可以生效，无论你的模块目标是什么。

3、内置类型导入（Inline type imports）

import {type IFoo,type IDType} from './foo'
const id:IDType=100
const foo:IFoo={
    name:"why",
    age:18
}

4、命名空间namespace

1. TypeScript 有它自己的模块格式，名为 namespaces ，它在 ES 模块标准之前出现。
   1. 命名空间在TypeScript早期时，称之为内部模块，目的是将一个模块内部再进行作用域的划分，防止一些命名冲突的问题；
   2. 虽然命名空间没有被废弃，但是由于 ES 模块已经拥有了命名空间的大部分特性，因此更推荐使用 ES 模块，这样才能与JavaScript 的（发展）方向保持一致。

export namespace Time{
    export function format(time:string){
        return '2022-10-10'
    }
    export const name='time'
}
export namespace Price{
    export function format(price:string){
		return '$20.00'
    }
}

5、类型的查找

1. 之前我们所有的typescript中的类型，几乎都是我们自己编写的，但是我们也有用到一些其他的类型：

   const imageEl=document.getElementById('image') as HTMLImageElement
   

2. 大家是否会奇怪，我们的HTMLImageElement类型来自哪里呢？甚至是document为什么可以有getElementById的方法呢？

   1. 其实这里就涉及到typescript对类型的管理和查找规则了。

3. 我们这里先给大家介绍另外的一种typescript文件：.d.ts文件

   1. 我们之前编写的typescript文件都是 .ts 文件，这些文件最终会输出 .js 文件，也是我们通常编写代码的地方；
   2. 还有另外一种文件 .d.ts 文件，它是用来做类型的声明(declare)，称之为类型声明（Type Declaration）或者类型定义（Type Definition）文件。
   3. 它仅仅用来做类型检测，告知typescript我们有哪些类型；

4. 那么typescript会在哪里查找我们的类型声明呢？

   1. 内置类型声明；
   2. 外部定义类型声明；
   3. 自己定义类型声明；

6、外部定义类型声明 – 第三方库

1. 外部类型声明通常是我们使用一些库（比如第三方库）时，需要的一些类型声明
2. 这些库通常有两种类型声明方式：
   1. 在自己库中进行类型声明（编写.d.ts文件）
   2. 通过社区的一个公有库DefinitelyTyped存放类型声明文件
      1. 该库的GitHub地址：https://github.com/DefinitelyTyped/DefinitelyTyped/
      2. 该库查找声明安装方式的地址：https://www.typescriptlang.org/dt/search?search=
      3. 比如我们安装react的类型声明： npm i @types/react --save-dev

7、外部定义类型声明 – 自定义声明

1. 什么情况下需要自己来定义声明文件呢？
   1. 我们使用的第三方库是一个纯的JavaScript库，没有对应的声明文件；
   2. 我们给自己的代码中声明一些类型，方便在其他地方直接进行使用；

declare let wName:string
declare let wAge:number
declare let wHeight:number

declare function wFoo():void
declare function wBar():void

declare class Person{
	name:string
    age:number
    constructor(name:string,age:number){}
}

8、declare 声明模块

1. 声明模块的语法: declare module ‘模块名’ {}。
   1. 在声明模块的内部，我们可以通过 export 导出对应库的类、函数等；

declare module 'lodash'{
    export function join(args:any[]):any
}

9、declare 声明文件

1. 在开发vue的过程中，默认是不识别我们的.vue文件的，那么我们就需要对其进行文件的声明；
2. 在开发中我们使用了 jpg 这类图片文件，默认typescript也是不支持的，也需要对其进行声明；

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent
  export default component
}

declare module '*.jpg' {
  const src: string
  export default src
}

10、declare 命名空间

1. 我们可以进行命名空间的声明

   declare namespace ${
       function ajax(setters:any):void
   }
   

2. 在main.ts中就可以使用

$.ajax({
    url:"http://123.207.32.32:8000/home/multidata",
    success:(res:any)=>{
        console.log(res)
    }
})

11、认识tsconfig.json文件

1. 什么是tsconfig.json文件呢
   1. 当目录中出现了 tsconfig.json 文件，则说明该目录是 TypeScript 项目的根目录；
   2. tsconfig.json 文件指定了编译项目所需的根目录下的文件以及编译选项。
2. tsconfig.json文件有两个作用：
   1. 作用一（主要的作用）：让TypeScript Compiler在编译的时候，知道如何去编译TypeScript代码和进行类型检测；
   2. 作用二：让编辑器（比如VSCode）可以按照正确的方式识别TypeScript代码；

12、tsconfig.json配置

1. tsconfig.json在编译时如何被使用呢?
   1. 在调用 tsc 命令并且没有其它输入文件参数时，编译器将由当前目录开始向父级目录寻找包含 tsconfig 文件的目录。
   2. 调用 tsc 命令并且没有其他输入文件参数，可以使用 --project （或者只是 -p）的命令行选项来指定包含了 tsconfig.json 的目录；
   3. 当命令行中指定了输入文件参数， tsconfig.json 文件会被忽略
2. tsconfig.json文件包括哪些选项呢？
   1. tsconfig.json本身包括的选项非常非常多，我们不需要每一个都记住；
   2. 可以查看文档对于每个选项的解释：https://www.typescriptlang.org/tsconfig
   3. 当我们开发项目的时候，选择TypeScript模板时，tsconfig文件默认都会帮助我们配置好的；

13、tsconfig.json文件

1. tsconfig.json是用于配置TypeScript编译时的配置选项：https://www.typescriptlang.org/tsconfig
2. 我们这里讲解几个比较常见的

{
  "compilerOptions": {
    // 目标代码
    "target": "ESNext",
    // 生成代码使用的模块化
    "module": "ESNext",
    // 打开所有的严格模式检查
    "strict": true,
    "allowJs": false,
    "noImplicitAny": false,
    // jsx的处理方式（保留原有的jsx格式）
    "jsx": "preserve",
    // 是否帮助导入一些需要的功能模块
    "importHelpers": true,
    // 按照node的模块解析规则
    "moduleResolution": "Node",
    // 跳过对整个库进行类似检测，而仅仅检测你用到的类型
    "skipLibCheck": true,
    // 可以让es module和commonjs相互调用
    "esModuleInterop": true,
    // 允许合成默认模块导出
    // import * as react from 'react':false
    // import react from 'react':true
    "allowSyntheticDefaultImports": true,
    // 是否要生成sourcemap文件
    "sourceMap": true,
    // 文件路径在解析时的基本url
    "baseUrl": ".",
    // 指定types文件按需要加载哪些（默认是都会进行加载的）
    // "types": ["webpack-env"]
    // 路径的映射设置，类似于webpack中的alias
    "paths": {
      "@/*": ["src/*"]
    },
    // 指定我们需要使用到的库（也可以不配置，直接根据target来获取）
    "lib": ["esnext", "dom", "DOM.Iterable", "scripthost"]
  },
  "include": [],
  "exclude": ["node_modules"]
}