zqy233的前端学习笔记综合示例
泛型+联合类型+数组
typescript
function a<T>(arr:T[]|T):T[]|T {
return arr
}
let b = a([1,2,3])
b=1 //类型正确
b=[1] //类型正确
b=['1'] //ts提示不能将类型“string”分配给类型“number”
function a<T>(arr:T[]|T):T[]|T {
return arr
}
let b = a([1,2,3])
b=1 //类型正确
b=[1] //类型正确
b=['1'] //ts提示不能将类型“string”分配给类型“number”
vue中定义dom元素
typescript
const echart = ref<HTMLElement | null>(null)
const echart = ref<HTMLElement | null>(null)
react类型
函数组件类型
FunctionComponent<P={}>、简写FC<P={}>
一个泛型接口，可以接受一个参数，可以不传,用来定义props的类型
typescript
interface EditorsProps {
detail: string
}
//const Editors: React.FunctionComponent<props: EditorsProps> = () => {
const Editors: React.FC<props: EditorsProps> = () => {
const { detail } = props
return (<></>)
}
interface EditorsProps {
detail: string
}
//const Editors: React.FunctionComponent<props: EditorsProps> = () => {
const Editors: React.FC<props: EditorsProps> = () => {
const { detail } = props
return (<></>)
}
无法重新声明块范围变量
在 Commonjs 规范里，没有像 ESModule 能形成闭包的「模块」概念，所有的模块在引用时都默认被抛至全局，因此当再次声明某个模块时，TypeScript 会认为重复声明了两次相同的变量进而抛错
对于这个问题，最简单的解决方法是在报错的文件底部添加一行代码：export {}。这行代码会「欺骗」tslint 使其认为当前文件是一个 ESModule 模块，因此不存在变量重复声明的可能性。当使用这个方法时，需要配置 tsconfig.json 文件
加上
json
"esModuleInterop": true,
"esModuleInterop": true,
vue全局方法设置类型
ts
type state = {
loading: boolean
requests: any[]
isShowHeader: boolean
rightTabIndex: number
startTime: string
endTime: string
lastStartTime: string
lastEndTime: string
}
type $store = {
state: state
}
declare module "@vue/runtime-core" {
interface ComponentCustomProperties {
/** 动态请求图片路径 */
requireImg: (path: string) => string
$store: $store
window: any
}
}
type state = {
loading: boolean
requests: any[]
isShowHeader: boolean
rightTabIndex: number
startTime: string
endTime: string
lastStartTime: string
lastEndTime: string
}
type $store = {
state: state
}
declare module "@vue/runtime-core" {
interface ComponentCustomProperties {
/** 动态请求图片路径 */
requireImg: (path: string) => string
$store: $store
window: any
}
}
ts识别路径别名
tsconfig.json设置paths
json
{
"compilerOptions": {
...
"paths": {
"@/*": [
"src/*"
],
"@utils/*": [
"src/utils/*"
]
}
},
...
}
{
"compilerOptions": {
...
"paths": {
"@/*": [
"src/*"
],
"@utils/*": [
"src/utils/*"
]
}
},
...
}