zoukankan      html  css  js  c++  java
  • typescript 编写自定义定义文件

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

    环境准备

    • 项目结构
     
    ├── 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

    • 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.ts

    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.json

    {
      "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.ts

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

    vs code 提示信息

    app.js

     
    // 基于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 提示信息

    说明

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

    参考资料

    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-learning

  • 相关阅读:
    POJ2711 Leapin' Lizards(最大流)
    POJ3308 Paratroopers(最小割/二分图最小点权覆盖)
    POJ3084 Panic Room(最小割)
    POJ3469 Dual Core CPU(最小割)
    POJ1815 Friendship(字典序最小最小割割边集)
    HDU3395 Special Fish(最大费用任意流)
    HDU5461 Largest Point(暴力)
    POJ3184 Ikki's Story I
    POJ1637 Sightseeing tour(判定混合图欧拉回路)
    伸展树模板
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/15585852.html
Copyright © 2011-2022 走看看