TypeScript语法拓展

模块化

typescript最主要使用的模块化方案是 ES Module

知识点

  • 在JS中规范声明如何没有 export 的 JS 文件都当作为一个脚本,并非模块
  • 在脚本文件中,变量和类型会被声明在共享的全局作用域,将多个输入文件合并成一个输出文件,或者在 HTML使用多个 <script> 标签加载这些文件

将文件转成模块化

文件加上 export{} 将会被模块处理,此时没有导出任何东西。{}里添加导出的内容即可

内置类型导入导出

TS支持单文件导入导出,只需要加入 type 前缀,表示导入的是一个类型

// type.ts
export type IDType = number 

export interface IFoo = {
  name: string
  age: number
}

// index.ts
import {type IDType,  type IFoo } from './type'
// 写在前面也可,表示都是导入的都是type
import type {IDType, IFoo} from './type'

const id: IDType = 101

const foo: IFoo = {
  name: 'zs',
  age: 19
}

命名空间 namespace

命名空间在TypeScript早期时,称之为内部模块,目的是将一个模块内部再进行作用域的划分,防止一些命名冲突的问题

虽然命名空间没被废弃,但是 ES 模块已经拥有了命名空间的大部分特性,推荐使用 ES 模块

namespace Shapes {
    export namespace Polygons {
        export class Triangle { }
        export class Square { }
    }
}

import polygons = Shapes.Polygons;
let sq = new polygons.Square(); // Same as "new Shapes.Polygons.Square()"

类别的查找

TS中还有另外一种文件.d.ts 用来做类型的声明,称之为类型声明(declaration)

它仅仅用来做类型检测,告知typescript我们有哪些类型

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

内置声明的使用

TS自带内置声明,用来声明JS标准化的API,比如funtion, string, dom 等

内置类型声明通常在我们安装typescript的环境中会带有的–查看

可以通过target和lib来决定哪些内置类型声明是可以使用
如,startsWith字符串方法只能从称为ES6的 JS 版本开始使用

查看连接

外部声明的使用

第三方库

通常我们使用第三方库也需要一些类型声明

第三方库有两种类型声明方法

  1. 自带 .d.ts 文件, 比如 axios,导入即可
  2. 通过社区的一个公有库DefinitelyTyped存放类型声明文件
  • 该库的GitHub地址:查看
  • 该库查找声明安装方式的地址:查看
  • 比如我们安装react的类型声明: npm i @types/react --save-dev

自定义声明

  • 情况一:我们使用的第三方库是一个纯的JavaScript库,没有对应的声明文件 比如lodash
  • 情况二:我们给自己的代码中声明一些类型,方便在其他地方直接进行使用

关键词 declare

let name = 'zs'
let age = 18

funtion foo{}

funtion person(name, age){
  this.name = name
  this.age = age
}

// 声明
declare let name: string
declare let age: number

declare function foo(): void

declare class Person {
  name: string
  age: number
}

声明模块

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

// 比如lodash
declare module 'lodash' {
  export funtion join(args[]: any[]): any[]
}

声明文件

比如在 vue 开发中默认不识别 .vue 文件,使用了 jpg 这类图片文件,默认TS也是不支持的
所以我们也对上面不识别进行声明

// .vue文件
declare module '*.vue' {
  // 导入 vue 组件类型
  import type { DefineComponent } from 'vue'
  const component: DefineComponent
  export default component
}

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

命名空间

如果在 index.html 通过CDN 引入 JQuery,可以进行命名空间

declare namespace ${
  funtion ajax(setting: any): void
}

// main.ts 使用
$.ajax({
  url:'url'
  success:(res:any)=>{}
})

tsconfig.json文件

作用

tsconfig.json文件有两个作用:

  1. 作用一(主要的作用):让TypeScript Compiler在编译的时候,知道如何去编译TypeScript代码和进行类型检测
    • 比如是否允许不明确的this选项,是否允许隐式的any类型
    • 将TypeScript代码编译成什么版本的JavaScript代码
  2. 作用二:让编辑器(比如VSCode)可以按照正确的方式识别TypeScript代码
    • 对于哪些语法进行提示、类型错误检测等等

webpack中使用ts-loader进行打包时,也会自动读取tsconfig文件,根据配置编译TypeScript代码

选项

不用记住每一个,查看文档对于每个选项的解释:文档

当我们开发项目的时候,选择TS模板时,tsconfig文件默认都会配置好的

webpack 配置TS环境

  1. 初始化package.json npm init

  2. 下载包

    • webpack npm i webpack webpack-cli webpack-dev-server -D
    • TS解析 npm i ts-loader -D
    • html插件 npm i html-webpack-plugin -D
  3. 配置 webpack

    • 创建 webpack.config.js 文件, 入口文件 src/index.ts、index.html
    const path = require("path")
    const HtmlWeabpckPlugin = require("html-webpack-plugin")
    module.exports = {
      mode: "development",
      entry: "./src/index.ts",
      output: {
      path: path.resolve(__dirname, "./dist"),
      filename: "bundle.js"
    },
    resolve: {
      extensions: [".ts", ".js", ".cjs", ".json"]
    },
    devServer: {},
    module: {
      rules: [
        {
          test: /\.ts$/,
          loader: "ts-loader"
        },
        {
          test: /\.(png|jpe?g|svg|gif)$/,
          type: "asset/resource"
        }
      ]
    },
    plugins: [
      new HtmlWeabpckPlugin({
        template: "./index.html"
      })
     ]
    }
  4. 配置tsconfig.json 命令行初始化 tsc --init,或者手动创建写入

     {
    
     "compilerOptions": {
    
       /* Visit https://aka.ms/tsconfig to read more about this file */
    
    
    
       /* Projects */
     
       // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
     
       // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
     
       // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
     
       // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
     
       // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
     
       // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
    
    
    
       /* Language and Environment */
     
       // "target": "ES3",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     
       // "lib": ["DOM"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     
       // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     
       // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     
       // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
     
       // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
     
       // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
     
       // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
     
       // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
     
       // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
     
       // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
     
       // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
    
    
    
       /* Modules */
     
       "module": "commonjs",                                /* Specify what module code is generated. */
     
       // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     
       // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     
       // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     
       // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     
       // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     
       // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     
       // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     
       // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     
       // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     
       // "resolveJsonModule": true,                        /* Enable importing .json files. */
     
       // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
    
    
    
       /* JavaScript Support */
     
       // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
     
       // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     
       // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
    
    
    
       /* Emit */
     
       // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     
       // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
     
       // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     
       // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     
       // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
     
       // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     
       // "removeComments": true,                           /* Disable emitting comments. */
     
       // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     
       // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     
       // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
     
       // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
     
       // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
     
       // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
     
       // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
     
       // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
     
       // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
     
       // "newLine": "crlf",                                /* Set the newline character for emitting files. */
     
       // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
     
       // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
     
       // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
     
       // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
     
       // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
     
       // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
    
    
    
       /* Interop Constraints */
     
       // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     
       // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
     
       "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
     
       // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
     
       "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    
    
    
       /* Type Checking */
     
       "strict": true,                                      /* Enable all strict type-checking options. */
     
       "noImplicitAny": false,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     
       "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     
       "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
     
       // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
     
       // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
     
       "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
     
       // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
     
       // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
     
       // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
     
       // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
     
       // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
     
       // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
     
       // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
     
       // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
     
       // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
     
       // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
     
       // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
     
       // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
    
    
    
       /* Completeness */
     
       // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     
       "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
     
     },
     
     // "files": [] 指定哪些ts文件需要进行编译
     
     // "include": ["./src/**/*.ts", "./types/*.d.ts"]
    
    }
    
  5. 配置运行脚本, package.json

    "scripts": {
      "serve": "webpack serve",
      "build": "webpack"
    },
  6. 使用 npm run serve 运行

TS封装axios

todo..


参考资料

TS中文网

coderwhy前端课程