关于 js中引用ts 并 阐述 ts和.d.ts关系

首先说一下，之前一直在学习  ts但学完后，让自己 产生了一个 疑问  js中如何 何 引用。

引用了 ts后 为什么在使用时  没有  提示 方法参数等 ？

带着这些 问题  我们 开始一步步的  从 创建到 项目 到 写ts 到应用  

首先 从创建项目开始

npm init

创建项目后 我们需要引入 打包 可以是webpack或者 parcel,这里选择 parcel

npm install --save parcel-bundler

然后 我们 在package.json,添加一下 入口文件 和 打包地址

{
  "name": "jstest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html --open",
    "build": "parcel build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "parcel-bundler": "^1.12.4"
  },
  "devDependencies": {
    "typescript": "^3.9.7"
  }
}

配置在scripts 

目录结构

到这  我们已经 把项目框架搭建完成了

我们src写一个 ts程序，

我写一个  这个 ts是  定义一个接口 ，下面的类都去实现这个接口

如果大家对ts基础不了解的 可以在这样学：https://www.tslang.cn/docs/handbook/basic-types.html

/**
 * 定义一个人接口
 * 具备 姓名 年龄 和play方法
 */

interface Person {
  name: string,
  age: number,
  play(): void
}


/**
 * 创建一个老人类 实现人接口
 */
class OldPerson implements Person {
  public name: string
  public age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  play() {
    console.log(`我叫${this.name},我今年${this.age}岁了，我喜欢躺着`)
  }
  look() {
    console.log('老人喜欢看报纸')
  }
}

/**
 * 创建一个 年轻人 实现人接口
 */
class YoungPerson implements Person {
  public name: string
  public age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  play() {
    console.log(`我叫${this.name},我今年${this.age}岁了，我喜欢打游戏`)
  }

  run() {
    console.log('年轻人喜欢跑步')
  }
}


export {
  OldPerson,
  YoungPerson
}

接着  就是 我这篇文章的 关键内容了

首先 你先装 tsc 

然后在  你所在的 ts目录中运行

tsc xxx.ts -d

这样 ts所在目录 就会有  3个文件了  一个ts 一个.js 一个.d.ts

如果大家 不想 运行上面的编译 而是 想直接引入 js中 也行 只不过 你的 任何编辑器都没有 提示  关于你调用的任何ts路面的方法

我在 ts所在目录中  创建了一个index.js 在js中直接引入 ts是没有任何提示的

因为你之前 编译过 .d.ts这个时候 你将 引入的  后缀去掉 此时 你在js中编写 就可以看到 你所写 的类型属性

 

可能有人会问  为什么 不直接 引入 .d.ts这个  此时 你引入 

npm run dev

就开始 报错了  ，别问我 为什么 ，问我  我现在 也不告诉你  你想知道 答案 就接着 往下看

 

ts和.d.ts 

首先，ts是 一个具体类型的定义实现 如

/**
 * 创建一个老人类 实现人接口
 */
class OldPerson implements Person {
  public name: string
  public age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  play() {
    console.log(`我叫${this.name},我今年${this.age}岁了，我喜欢躺着`)
  }
  look() {
    console.log('老人喜欢看报纸')
  }
}

我们在对比看看  .d.ts

/**
 * 创建一个老人类 实现人接口
 */
declare class OldPerson implements Person {
    name: string;
    age: number;
    constructor(name: string, age: number);
    play(): void;
    look(): void;
}

是不是发现  只有  具体的 方法名或者某个 变量 属性定义

 

至此 ，我们可以 得出一个结论 就是 ts仅仅只是 一个声明变量 至于具体的实现 他是没有做的  你也不能 直接在 .d.ts中去声明的同时 又实现他  编译会报错的

也就是  你直接在js文件中引入 .d.ts 他是没有任何实现的 自然也就报错了

 

也可以自己去写一个.d.ts ,但我认为没有必要  你只需要认真编写好后  让机器自动帮你转去。

 

这里还有一个  问题就是  js中直接使用提示是没有问题了 ，但是 没有校验也就是说，

我下面的 代码 第二个传参应该是一个 number 但我传递了一个string 他的 编译还是 通过了

index.js中

import { OldPerson, YoungPerson } from './01_interface.ts'

let old = new OldPerson('小明', 'wwww')

这个 暂时 没有想到好的  办法  如果大家有好的 办法。可以给我留言