ts在项⽬中的使⽤-三斜线引⼊与import区别ts 在项⽬中的使⽤
本次分享内容只涉及项⽬初始阶段如何引⼊ts及依赖插件的ts。
ts为类型系统，js没有类型，为了在开发阶段减少错误⽽引⼊的系统。
第二世ts有单独的配置⽂件，⼀般放在项⽬⽬录下
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"experimentalDecorators":true,
"baseUrl": "./",
"paths": {
王源的女朋友"@/*":["src/*"]
},
"types": ["vite/client"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
ts与js运⾏时两套系统，虽然有时候代码是写在⼀起的，但他们运⾏时也是各⾃运⾏各⾃的代码。
⽐如import {clone} from 'lodash',js系统引⼊的是clone函数，ts系统引⼊的是clone函数的类型。
1.ts ⽂件相关术语
1. 模块⽂件：含有 export 或者 import 的⽂件，⽂件名通常为：xx.ts
import lodash from 'lodash'
console.log(lodash)
2. 声明⽂件：不含实际运⾏代码⽂件名通常为xx.d.ts
声明⽂件中
声明⽂件也可以是模块⽂件，但其不含实际运⾏代码，所以导出的都是类型声明
type A = {name:string}赤い糸
declare const a:A
2. 引⼊ts
npm install typescript -D
typescript安装后，其⾃带浏览器上使⽤的所有对象的定义⽂件，⽐如dom，标签等
const div:HTMLDivElement = ateElement('div')
3.引⼊依赖
3.1. 引⼊模块⽂件
引⼊模块⽂件通常使⽤ import
import {A} from './a.ts'
const a:A ={name:'gg'}
3.2. 引⼊⾮模块类的声明⽂件
使⽤三斜线 reference 引⼊，有常⽤两种⽅式 path和types
他们区别就是 types ⼀般引⼊外部依赖的声明，path ⼀般引⼊⾃⼰写的声明
⽐如外部声明⽂件位置为node_modules/@types/b/index.d.ts，内容为type B={age:number}，使⽤ path 和 types 引⼊⽅式如下：/// <reference path="node_modules/@types/b/index.d.ts" />
/// <reference types="b" />
⾮模块的声明⽂件引⼊后为全局类型，可以直接使⽤
const b:B={age:100}
这⼉可以看出，与js⽂件引⼊相⽐，ts多了⼀项寻址策略，它中会⾃动寻node_modules/@types下的⽂件。
3. 声明合并
“声明合并”是指编译器将针对同⼀个名字的多个独⽴声明合并为单⼀声明。合并后的声明同时拥有原先多个声明的特性
常见的使⽤例⼦为扩展属性
点击查看代码
4. vite+vue3 ⼯程中的常见配置
所有依赖插件，在官⽹中有详细说明如何使⽤类型。
4.1 vite 注⼊的全局类型
vite注⼊了例如v.BASE_URL，在a中不存env属性，所以需要对ImportMeta类型进⾏补充,
其⽂件位置在node_modules/vite/client.d.ts。打开⽂件可以看到没有使⽤export 或者import。所以其为⾮模块声明，引⼊需要⽤到：
/
李多海 整容
// <reference types="vite/client" />
4.2 vue注⼊类型
vue类型⽂件在node_modules/vue/dist/vue.d.ts，打开后可以看到有export 和import关键字，所有必须使⽤import引⼊,
引⼊⼀次后可以在其它⽂件模块⽂件使⽤类型。
import 'vue'
4.2.1 注册全局组件
如果有注册全局组件，就需要对全局组件进⾏类型扩展。
如下扩展⼀个Layout组件
点击查看代码
4.2.2 注⼊.vue⽂件类型
当引⼊⼀个vue⽂件时，js编译器可以通过，但是ts却发现不到。这是因为ts为.ts、.js、.tsx等⽂件已定义类型，vue⽂件需要⼿动定义类型declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
张杰突然想爱你export default component
}
4.2.3. 别名设置
在某些时候，路径使⽤别名会很⽅便，⽐如将@指向src
不要忘了我
使⽤import data from '@/data'访问src/data.ts，由于ts与js是两套系统，虽然js能够正常运⾏，但ts并不知晓'@/data'路径指向哪⼉，所以需要在tsconfig.json中也配置路径别名，需要配置compilerOptions.baseUrl与compilerOptions.paths
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*":["src/*"]
},
}
}
此处地址转换@/data => ${baseUrl}src/data => ./src/data寻到了正确地址。
4.3 编辑器配置
使⽤vscode + volar
volar能够⾃动按照tsconfig.json配置调⽤typescript做类型分析，不必将ts运⾏集成到项⽬中。也就是说类型系统由volar运⾏，js由项⽬本⾝运⾏。
5 vue3中api⽀持
接⼝api⼯具
将json转换成ts
遗留问题
在全局定义中 :declare let a:3
在其他⽂件中使⽤: let a = ''不报错原因：declare let a 解释了⼀个全局的变量a 他的值是3，在模块⽂件中可以再次定义，就如fn内部能定义⼀个外部作⽤域的变量。当直接使⽤a = ''时出现报错