typescript 编写自定义定义文件

2021年11月23日 阅读数:4
这篇文章主要向大家介绍typescript 编写自定义定义文件,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

尽管typescript 提供了直接引用外部定义文件的功能(@types),可是不少时候之前的模块以及
公司内部的项目都很差方便的支持typescript 类型特性,如下是一个简单的集成说明html

环境准备

  • 项目结构
 
├── app-demo
├── app-demo-types
└── app-learning
  • 说明
    app-demo 一个简单的js 项目,这个npm 包是咱们须要后期建立ts 定义的
    app-demo-types 基于typescript 对于app-deme 项目建立ts 定义文件
    app-learning 咱们基于js 以及typescript 的模式使用开发的app-demo npm 包

集成使用说明

具体代码参考github node

  • app-demo 代码
Login.js
module.exports = class Login{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    login(){
        return `${this.name}------${this.age}`
    }
}
  • app-demo-types
    pacakge.json
 
{
  "name": "@dalongrong/types-demo-types",
  "version": "1.0.2",
  "types": "index.d.ts",
  "license": "MIT",
  "scripts": {
    "p": "yarn publish --access public"
  },
  "publishConfig": {
    "registry": "https://registry.npmjs.org"
  }
}

index.d.tsgit

declare module "@dalongrong/types-demo" {
    export class Login{
        constructor(name:string,age:number)
        login():string
    }
}
 
declare module "@dalongrong/types-appdemo" {
    export class Login{
        constructor(name:string,age:number)
        login():string
    }
}
  • app-learning 集成
    package.json
 
{
  "name": "app-learning",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@dalongrong/types-demo": "^1.0.0",
    "@dalongrong/types-demo-types": "^1.0.2"
  }
}

tsconfig.jsongithub

{
  "include": [
    "src/**/*"
  ],
  "files": ["node_modules/@dalongrong/types-demo-types/index.d.ts"], // ts 定义文件引入
  "compilerOptions": {
    "declaration": true,
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "outDir": "dist",
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

src/app.tstypescript

import {Login} from "@dalongrong/types-demo"
let login = new Login("dd",333)
let info = login.login()
console.log(info)

vs code 提示信息
npm

app.jsjson

 
// 基于reference 引用
 
/// <reference types="@dalongrong/types-demo-types" />
 
const {Login} = require("@dalongrong/types-demo")
 
console.log(Login)
 
var myuser = new Login("dalong",333)
 
console.log(myuser.login())

vs code 提示信息
app

 

 

说明

以上是基于typescript 自定义文件提高js 的类型能力的一个玩法,对于js 仍是推荐直接基于typescript 开发(强大的生态),并且应该编写相关的类型定义文件
方便提高js 代码的类型处理能力post

参考资料

https://drag13.io/posts/custom-typings/index.html
https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html
https://github.com/microsoft/TypeScript/issues/22217#issuecomment-370019383
https://github.com/rongfengliang/typescript-types-learningui