TS的声明文件

news/2024/11/23 5:33:54/

TS的声明文件


.ts文件：

既包含类型信息又可执行代码。可以被编译成 .js 文件。

.d.ts文件：

只包含类型信息的类型声明文件。不会生成 .js 文件，仅用于提供类型信息。

.ts是implementation（代码实现文件）.d.ts是declaration（类型声明文件）

ts的代码最后会编译成 .js 的 js 代码供他人使用，这个时候，类型信息就丢失了。

所以 ts 编译器会自动根据 .ts 中的信息，生成对外的 .d.ts 文件，和生成的 js 文件搭配使用。

其中，js 文件是给运行引擎用的，而 .d.ts 文件是给 IDE（智能编辑器）写代码时参考用的。

如果要为 JS 库提供类型信息，要用 .d.ts 文件。



TS声明文件类型.d.ts


DEFINITELYTYPED社区已定义

 npm install @types/jquery --save-dev

与NPM一同发布，package.json 中有 types 字段，或者有一个 index.d.ts 声明文件


自己编写

创建一个 node_modules/@types/foo/index.d.ts 文件，存放foo 模块的声明文件。不太建议用这种方案，一般只用作临时测试。

创建一个 types 目录，专门用来管理自己写的声明文件，将 foo 的声明文件放到 types/foo/index.d.ts 中。这种方式需要配置下tsconfig.json 中的 paths 和 baseUrl字段。

  /path/to/project├── src|  └── index.ts├── types|  └── foo|     └── index.d.ts└── tsconfig.json

{"compilerOptions": {"module": "commonjs","baseUrl": "./","paths": {"*": ["types/*"]}}
}



TS声明文件定义类型

全局定义

let

declare let jQuery: (selector: string) => any;

function

declare function jQuery(selector: string): any;

class

declare class Animal {name: string;constructor(name: string);sayHi(): string;
}

enum

declare enum Directions {Up,Down,Left,Right
}

namespace

declare namespace jQuery {function ajax(url: string, settings?: any): void;namespace fn {function extend(object: any): void;}
}


NPM包型 - EXPORT

// types/foo/index.d.ts
export const name: string;
export function getName(): string;
export class Animal {constructor(name: string);sayHi(): string;
}
export enum Directions {Up,Down,Left,Right
}
export interface Options {data: any;
}
export namespace foo {const name: string;namespace bar {function baz(): string;}
}


NPM包型 - EXPORT DEFAULT

// types/foo/index.d.ts
// function、class 和 interface 可以直接默认导出，其他的变量需要先定义出来，再默认导出
export default function foo(): string;export default Directions;
declare enum Directions {Up,Down,Left,Right
}


NPM包型 - 先声明，在EXPORT

// types/foo/index.d.ts
declare const name: string;
declare function getName(): string;
declare class Animal {constructor(name: string);sayHi(): string;
}
declare enum Directions {Up,Down,Left,Right
}
// interface 前是不需要 declare
interface Options {data: any;
}export { name, getName, Animal, Directions, Options };

注：
.d.ts文件顶级声明declare最好不要跟export同级使用，不然在其他ts引用这个.d.ts的内容的时候，就需要手动import导入了

.d.ts文件里如果顶级声明不用export的话，declare和直接写type、interface效果是一样的，在其他地方都可以直接引用



MODULE 拓展

// types/foo-bar.d.tsdeclare module 'foo' {export interface Foo {foo: string;}
}declare module 'bar' {export function bar(): string;
}
// src/index.ts
import { Foo } from 'foo';
import * as bar from 'bar';let f: Foo;
bar.bar();


三斜线指令

书写一个全局变量的声明文件
依赖一个全局变量的声明文件

在声明文件中使用/// <reference types="..." />头，来引入依赖的其它声明。

// types/jquery-plugin/index.d.ts/// <reference types="jquery" />declare function foo(options: JQuery.AjaxSettings): string;


TS文件TSC自动生成声明文件

命令行参数

--declaration（简写 -d）

tsconfig.json

{"compilerOptions": {"module": "commonjs","outDir": "lib","declaration": true,}
}


TS发布

发布到社区

@types 是统一由 DefinitelyTyped 管理的。要将声明文件发布到 @types 下，就需要给 DefinitelyTyped 创建一个 pull-request，其中包含了类型声明文件，测试代码，以及 tsconfig.json 等。

与源码一起（依次查找*.d.ts）

  1. 给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址
  2. 在项目根目录下，编写一个 index.d.ts 文件
  3. 针对入口文件（package.json 中的 main 字段指定的入口文件），编写一个同名不同后缀的 .d.ts 文件

项目配置

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />declare namespace NodeJS {interface ProcessEnv {readonly NODE_ENV: 'development' | 'production' | 'test';readonly PUBLIC_URL: string;}
}declare module '*.avif' {const src: string;export default src;
}declare module '*.bmp' {const src: string;export default src;
}declare module '*.gif' {const src: string;export default src;
}declare module '*.jpg' {const src: string;export default src;
}declare module '*.jpeg' {const src: string;export default src;
}declare module '*.png' {const src: string;export default src;
}declare module '*.webp' {const src: string;export default src;
}declare module '*.svg' {import * as React from 'react';export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;const src: string;export default src;
}declare module '*.module.css' {const classes: { readonly [key: string]: string };export default classes;
}declare module '*.module.scss' {const classes: { readonly [key: string]: string };export default classes;
}declare module '*.module.sass' {const classes: { readonly [key: string]: string };export default classes;
}

http://www.ppmy.cn/news/142832.html

相关文章

Ts/Typescript基础运用

Ts/Typescript基础运用

01、什么是Typescript、ts ts&#xff1a; TypeScript 的缩写&#xff0c;是微软开发的编程语言, TypeJavaScript (Type是类型 》在JS基础之上,为了JS添加了支持类型) 那我们为什么要学习ts呢&#xff1f;js不香嘛&#xff1f; 我们来看这一段js代码 let age 18age 19 //正确…
阅读更多...
TS基础

TS基础

1 写在开始之前&#xff0c;为什么要学习TS vue2.x中的组件是通过声明的方式传入一系列option&#xff0c;和TypeScript的结合需要通过一些装饰器的方式来做&#xff0c;虽然能实现功能&#xff0c;但是比较麻烦。 而3.0修改了组件的声明方式&#xff0c;改成了类式的写法&…
阅读更多...
TCC

TCC

引言&#xff1a;TCC事务的由来在当前如火如荼的互联网浪潮下&#xff0c;如何应对海量数据、高并发成为大家面临的普遍难题。广大IT公司从以往的集中式网站架构&#xff0c;纷纷转向分布式的网站架构&#xff0c;随之而来的就是进行数据库拆分和应用拆分&#xff0c;如何在跨数…
阅读更多...
搭建 TypeScript 环境 TSC 命令的使用 配置 tsconfig 文件

搭建 TypeScript 环境 TSC 命令的使用 配置 tsconfig 文件

目录 一、全局配置 TypeScript 环境1、查看 TS 版本2、全局安装 TS 二、TSC 命令的使用1、使用 tsc 生成 tsconfig.json 配置文件2、通过 tsc 编译指定的 ts 文件3、通过 tsc 自动编译 ts 文件 三、tsconfig.json 配置文件的解析1、顶层属性&#xff08;1&#xff09;、compile…
阅读更多...
TS入门详解（typescript）

TS入门详解（typescript）

一、什么是ts ts可以理解为JavaScript的超集&#xff0c;它是由微软公司开发的一种编程语言&#xff0c;可以运行在任何浏览器还有操作系统 二、TypeScript的发展优缺点 优点&#xff1a; 增加了代码的可读性和可维护性 非常包容&#xff08;可以定义所有类型&#xff09; …
阅读更多...
TS的类型声明

TS的类型声明

目录 1.TS把JS变成了静态类型的语言&#xff0c;可以给变量指定类型 2.JS中的函数是不考虑参数的类型和个数的&#xff0c;但是TS会考虑函数的参数类型和个数&#xff0c;且要规定返回值类型。 3.常见的TS类型 1.可以直接使用字面量进行类型声明 字面量声明的应用:可以使用…
阅读更多...
【TS】介绍

【TS】介绍

什么是TypeScript https://www.tslang.cn/ TypeScript是Microsoft公司注册商标。 TypeScript具有类型系统&#xff0c;且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器&#xff0c;任意环境&#xff0c;任意系统并且是开源的。 安装T…
阅读更多...
TS简介

TS简介

一 简介 TypeScript&#xff0c;简称为TS&#xff0c;是JS的超级&#xff1b;Vue3.0就是使用TS开发出来的&#xff0c;并且推荐开发者使用TS进行开发&#xff1b; TS是可以直接运行的&#xff08;比如使用ts-node&#xff09;&#xff0c;最终编译为纯的JS运行在任意的平台之上…
阅读更多...
最新文章

Copyright @ 2022~2023