ts在项目中的使用-三斜线引入 与 import区别

技术ts在项目中的使用-三斜线引入 与 import区别 ts在项目中的使用-三斜线引入 与 import区别ts 在项目中的使用
本次分享内容只涉及项目初始阶段如何引入ts及依赖插件的ts。
ts为类

ts在项目中的使用——引入三斜线与导入的区别

ts 在项目中的使用

这个分享只涉及如何在项目的初始阶段引入依赖于插件的ts和ts。

Ts是类型系统,js没有类型,引入是为了减少开发阶段的错误。

Ts有一个单独的配置文件,通常放在项目目录tsconfig.json中

{

compilerOptions': {

目标' : 'esnext ',

useDefineForClassFields ' : true,

模块' : 'esnext ',

模块解决方案' : '节点',

严格的:真的,

jsx': '保留',

sourceMap': true,

resolveJsonModule':为真,

esModuleInterop':真,

lib': ['esnext ',' dom'],

实验记录者:道,

baseURl“:”。/',

路径' : {

@/*”:[' src/*]

},

type ' :[' vite/client ']

},

包括' : ['src/**/*。ts ',' src/**/*.d.ts ',' src/**/*。tsx ',' src/**/*。vue']

}

TSJS运行时有两个系统。虽然有时代码是一起编写的,但它们也在运行时运行自己的代码。

比如从‘lo dash’导入{clone},js系统引入了clone函数,ts系统引入了clone函数的类型。

1.ts 文件相关术语

模块:包含导出或导入的文件,通常命名为xx.ts

从“lodash”进口lodash

console.log(lodash)

声明文件:没有实际运行代码的文件名通常为xx.d.ts

在声明文件中

声明文件也可以是模块文件,但它不包含实际运行的代码,因此所有导出的声明都是类型声明。

类型A={name:string}

声明常量a:A

2. 引入ts

npm安装类型脚本-D

安装typescript后,它会附带浏览器中使用的所有对象的定义文件,如dom、标签等。

const div : html dive element=document . create element(' div ')

3.引入依赖

3.1. 引入模块文件

导入模块文件通常是导入的。

从“”导入{A}。/a.ts '

const a:A={name:'gg'}

3.2. 引入非模块类的声明文件

使用三斜线引用有两种常见的方法:pathtypes.

两者的区别在于,types一般引入外部依赖的声明,path一般引入自己编写的声明。

例如,外部声明文件的位置是node _ modules/@ types/B/index . d . ts,内容是Type B={age3360 number}。使用路径和类型引入它的方法如下:

///引用路径=' node _ modules/@ types/b/index . d . ts '/

///引用类型='b' /

非模块声明文件引入后为全局类型,可以直接使用const b:B={age:100}。

这里可以看到,相比js文件的引入,ts多了一个寻址策略,会自动在node _ modules/@ type下查找文件。

3. 声明合并 官网地址

“声明合并”意味着编译器将相同名称的多个独立声明合并成一个声明。合并后的声明同时具有多个原始声明的特征。

的一个常见使用示例是扩展属性。

点击查看代码兴趣。

face C {
a:string
b:string
}
interface C {
c:string
}
const v:C = {a:'',b:'',c:''}

4. vite+vue3 工程中的常见配置

所有依赖插件,在官网中有详细说明如何使用类型。

4.1 vite 注入的全局类型

vite注入了例如import.meta.env.BASE_URL,在import.meta中不存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组件

点击查看代码
import 'vue' // 此处说明此文件是模块文件
declare module 'vue' {
  export interface GlobalComponents {
   Layout: typeof import('./components/Layout.vue')['default']    
  }
}

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工具 json2ts

将json转换成ts

遗留问题

在全局定义中 :declare let a:3
在其他文件中使用: let a = '' 不报错原因:declare let a 解释了一个全局的变量a 他的值是3,在模块文件中可以再次定义,就如fn内部能定义一个外部作用域的变量。当直接使用 a = '' 时出现报错

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/157188.html

(0)

相关推荐

  • window10上登录Oracle时提示ORA-12546错误怎么办

    技术window10上登录Oracle时提示ORA-12546错误怎么办这篇文章主要介绍window10上登录Oracle时提示ORA-12546错误怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要

    2021年11月20日
  • jquery trim方法能去除哪些符号

    技术jquery trim方法能去除哪些符号这篇文章主要介绍“jquery trim方法能去除哪些符号”,在日常操作中,相信很多人在jquery trim方法能去除哪些符号问题上存在疑惑,小编查阅了各式资料,整理出简单好

    攻略 2021年11月15日
  • 抖音刷赞网站推广平台,抖音刷赞专业平台?

    技术抖音刷赞网站推广平台,抖音刷赞专业平台?要想刷赞的话,内容的创作,后期的运营是关键,看那些大段短15秒钟的视频就能如此吸赞,背后是一整套运作流程的支持。
    一、热门视频带来的流量,一般一个视频在上热之后会增加大量的赞丝

    测评 2021年11月9日
  • 水浒传题目及答案100道,水浒传37回问题及答案

    技术水浒传题目及答案100道,水浒传37回问题及答案题目:宋江在船上准备跳下之时,被何人所救水浒传题目及答案100道?答:李俊李立。题目:镇上三霸有哪些?
    答:李俊和李立,张横和张顺,穆弘和穆春。
    题目:分析穆太公的形象

    生活 2021年10月25日
  • 汉字数字大写,中国数字一至十 大写怎么写

    技术汉字数字大写,中国数字一至十 大写怎么写一至十的大写为:壹、贰、叁、肆、伍、陆、柒、捌、玖、拾汉字数字大写。 大写数字的使用始于明朝。朱元璋发布法令明确要求记账的数字必须由“一、二、三、四、五、六、七、八、九、十、百

    生活 2021年10月28日
  • Python用哪些工具好

    技术Python用哪些工具好这篇文章主要介绍了Python用哪些工具好,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、最强终端:Upterm本来想推荐

    攻略 2021年10月28日