1.类型的查找
第一个叫做内置类型声明,在我们安装typescript的时候就会带着一起给他安装下来的,就是内置的我们的声明文件。
还有一种的话叫做外部定义类型声明文件,这个的话一般是一些第三方库。第三方库它会自带一些帮助我们做了一些类型声明的文件,比如说像axios,他就是有带这个东西的,所以,他有我们对应的类型声明,我们是可以直接使用他的。
还有一种是自己来定义的一些类型声明文件,就是我需要自己来编写对应的这些类类型。
2.内置类型声明
内置的类型声明,内置的类型声明就是document.getElementById,哪里来的getElementById呀,点进去之后的话,就会发现它再lib.dom.d.ts中有被声明
放大
这些东西是我们安装typescript的时候就被安装的。
- 内置类型声明是typescript自带的、帮助我们内置了JavaScript运行时的一些标准化API的声明文件;
- 包括比如Math、Date等内置类型,也包括DOM API,比如Window、Document等;
- 内置类型声明通常在我们安装typescript的环境中会带有的;
phttps://github.com/microsoft/TypeScript/tree/main/lib
3.外部定义类型声明
- 外部类型声明通常是我们使用一些库(比如第三方库)时,需要的一些类型声明。
- 这些库通常有两种类型声明方式:
- 方式一:在自己库中进行类型声明(编写.d.ts文件),比如axios
- 方式二:通过社区的一个公有库DefinitelyTyped存放类型声明文件
- 该库的GitHub地址:https://github.com/DefinitelyTyped/DefinitelyTyped/
- 该库查找声明安装方式的地址:https://www.typescriptlang.org/dt/search?search=
- 比如我们安装react的类型声明: npm i @types/react --save-dev
lodash内部这个库里面没有声明文件,有可能有人在types这个库里面写好了这个lodash的声明文件,自己去下载就好了。react也是,types这个库里面有它的声明。
4.自定义声明
什么情况下需要自己来定义声明文件呢?
- 情况一:我们使用的第三方库是一个纯的JavaScript库,没有对应的声明文件;比如lodash
- 情况二:我们给自己的代码中声明一些类型,方便在其他地方直接进行使用;
在src下面lodash.d.ts
// 声明模块
declare module 'lodash' {
export function join(arr: any[]): void
}
main.ts
import lodash from "lodash";
console.log(lodash.join(["abc", "cba"])); //abc,cba
前提是安装npm i lodash
5.声明变量-函数-类
.d.ts不用转成JS代码,然后让它运行,它只是做类型声明的,就是告诉ts的我有这个类型,所以不需要写实现.
我们在html中定义了变量的化,可不可以在main.ts中使用?
在html中,ts转js被打包好,放在html最底下引用,
在main.ts中打印变量
console.log(whyName)
console.log(whyAge)
console.log(whyHeight)
从js运行的角度来讲,它是可以被打印的,因为他是在定义之后被加载的。就是上面的代码在前,打印的在后。但是实际上,在main.ts中写的这三行代码通不过ts的编译,因为ts根本就不知道whyName,whyAge是个什么东西。如何解决问题,不让它报错呢?这个时候我们需要声明这三个变量,只声明就可以,不用赋值,目的是让他通过编译,变成js。
这个时候,在src底下的.d.ts文件中声明这几个变量,不用实现!!
declare let whyName: string
declare let whyAge: number
declare let whyHeight: number
main.ts
console.log(whyName)
console.log(whyAge)
console.log(whyHeight)
whyFoo()
const p = new Person("why", 18)
console.log(p)
$.ajax({
})
html
<script>
let whyName = "coderwhy"
let whyAge = 18
let whyHeight = 1.88
function whyFoo() {
console.log("whyFoo")
}
function Person(name, age) {
this.name = name
this.age = age
}
</script>
</body>
.d.ts
// 声明模块
declare module 'lodash' {
export function join(arr: any[]): void
}
// 声明变量/函数/类
declare let whyName: string
declare let whyAge: number
declare let whyHeight: number
declare function whyFoo(): void
declare class Person {
name: string
age: number
constructor(name: string, age: number)
}
// 声明文件
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.png'
declare module '*.svg'
declare module '*.gif'
// 声明命名空间
declare namespace $ {
export function ajax(settings: any): any
}
6.声明模块
7.declare文件
8.declare命名空间
9.tsconfig.json文件
tsconfig.json是用于配置TypeScript编译时的配置选项: phttps://www.typescriptlang.org/tsconfig
我们这里讲解几个比较常见的: