typescript记录
零碎记录一些ts要点
一，最近需要扩展Funcion类型，增加一个布尔类型的属性值。
1，可以自定义类型 又名 交叉类型
type OwnFunc = Function & { once?: boolean } 2，也可以声明接口
interface OwnFunc {():anyonce?: boolean}
二，ts中，接口interface 与class之间相互的关系
A: 接口可以继承接口，类可以继承类。
B: 类可以实现接口，但是接口只能约束这个类的公共成员，也就是说接口定义的属性方法等，类必须要设置未公共成员，不能为protected 和 private
例：
interface Girl {name: string;age?: number; bust: number;}// 报错class G1 implements Girl {name: string age: numberprotected bust: number}// 正确class G2 implements Girl {name: string age: numberbust: number}三，联合类型
var name : 'Kev'| 'Kevin' | 'Vincent' | 'Vin' // 只能为4个字符串中的一个var val: string | number // 为字符串或者数字四，索引类型
A, keyof T 表示T所有公共属性的联合类型
interface T {name: stringage: number}var p: keyof Tp 只能赋值为字符串 name 或者 age
B, T[K] 代表对象T的属性K所代表的类型
C, T extends U 泛型的继承，泛型如果继承一个属性，表示这个泛型变量可以通过继承获取U的公共属性
实例：获取对象的一组属性值
bad:
function getValues(obj: any, keys: any[]) {return keys.map(key => obj[key])}const obj = {name: 'kevin',age: 18}console.log(getValues(obj, ['name', 'age']))console.log(getValues(obj, ['work', 'salary'])) // 没有ts约束报错good:
function getValuesNew<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {return keys.map(key => obj[key])}console.log(getValuesNew(obj, ['name', 'age']))console.log(getValuesNew(obj, ['work', 'salary'])) // 有ts约束报错五，映射类型
interface Obj {name: string;age: number;gender: string;}// 将Obj映射为一种新的类型，该类型所有属性是可读的type ReadonlyObj = Readonly<Obj>// 将Obj映射为一种新的类型，该类型所有属性是可选的type PartialObk = Partial<Obj>// 将Obj映射为一种新的类型，该类型只有name 和 age属性type NewObj = Pick<Obj, 'name' | 'age'>// 将Obj映射为一种新的类型，该类型只有 name 和 age属性type NewObj2 = Omit<Obj, 'gender'>// 将Obj映射为一种新的类型，该类型的属性名全部为Obj的属性，类型为指定类型type k = keyof Objtype NewObj3 = Record<k, Number> // 现在NewObj3与Obj类型有同样属性名，但是类型全部为Number// Exclude 排除T中可以赋值给U的类型type Exclude<T, U> = T extends U ? never : Ttype newObj4 = Exclude<'a'| 'b', 'a'|'c'> // 现在newObj4 为'b'// Extract 抽取T中可以赋值U的类型type Extract<T, U> = T extends U ? T : never;type newObj5 = Extract<'a'| 'b', 'a'|'c'> // 现在newObj4 为 'a'// 资料： 一些工具泛型 https://zhuanlan.zhihu.com/p/40311981六，扩展一个依赖库
比如我们已经有了一个依赖库moment 我们这样写
import moment from 'moment'declare module 'moment' {export function myFunction():void}// 这样不会报错moment.myFunction = ()=>{ console.log('do your own thing') }七，ts里面 es module 与commonJS module
由于ES module 除了有允许默认的顶级导出，还可以有单独的导出。比如这这样：
// es1.ts导出代码export default function () {console.log('default')}export a = 1 // 将会生效// es module 引入代码import defaultFunc from './es1.ts'import { a } from './es2=1'
但是commonJS module，只允许有一个默认的顶级导出。
// node.a.ts 导出代码// 与顺序无关，只要有module.exports, 都会覆盖掉exports.* = * 的声明module.exports = function() { console.error('杰西卡')}exports.a= 1 // 将不会生效 // commonjs module 引入代码var cm = require('./node.a.ts')// cm 是一个函数
特殊情况下，commonjs（node） module 必须要引用es module，ts提供了一个特殊的语法 export关键字，ts会自动将该export关键字编译为 module.exports = *
// es 导出// 只能有一个，多个报错export = function () {console.log('default function')}// commonJS 引入import defaultFunc from './xx.ts'
八，typescript单独进行类型检查（babel 不会进行类型检查）
tsc --watch // 类型检查tsc --init // 生成配置文件typescript记录相关推荐
- vue + typescript 父子组件传值记录
为什么80%的码农都做不了架构师?>>> typescript 使用 vue-property-decorator 插件后 组件通信 做一个记录 1. 父传子 父: <s ...
- TypeScript学习记录
TypeScript学习记录 vscode设置自动编译 首先使用tsc --init 生成tsconfig.json配置文件 (可以根据需要修改设置) 终端->运行任务->typescri ...
- TypeScript与Vue组合开发记录点（一）
TypeScript与Vue组合开发记录点 TypeScript使用Vue-property-decorator属性装饰器 @Component(options:ComponentOptions = ...
- typescript学习记录-练习项目-贪食蛇
参考文章:https://www.bilibili.com/video/BV1Xy4y1v7S2?p=22 项目搭建 将之前的package.json,tsconfig.json,webpack.co ...
- 记录一下TypeScript入门笔记
一.TypeScript是什么? TypeScript是一种由微软开发的自由和开源的编程语言.是JavaScript的一个超集,TypeScript 在 JavaScript 的基础上添加了可选的静态 ...
- typescript学习记录-安装
ide:WebStorm 2022.3.2 安装 安装Node.js 下载安装 参考文章:https://www.bilibili.com/video/BV1Xy4y1v7S2?p=2 首先,下载No ...
- typeScript踩坑记录 T2345 Argument of type is not assignable to parameter of type never
最近在对接谷歌的localhomeSDK,详情看这里https://aijishu.com/a/1060000000011433,[后续对接完成会写一篇踩坑的血泪史==]应用他们的sdk需要的语言可用 ...
- 记录typescript常见的类型
1.基础类型 editState?: boolean; //?表示非必填 showEditButton: boolean; page?: number; name: string; creator: ...
- 记录第一次在egret项目中使用Puremvc
这几天跟着另一个前端在做一个小游戏,使用的是egret引擎和puremvc框架,这对于我来说还是个比较大的突破吧,特此记录下. 因为在此项目中真是的用到了mvc及面向对象编程,值得学习 记录第一次在e ...
最新文章
- mysql免安装版的问题
- C#委托、事件学习之（三）——热水器烧水案例
- 用matalb、python画聚类结果图
- 前端开源项目周报0418
- Linux mount命令使用
- SCSA 模拟题 知识点 （一）
- 列表页——基于Django框架的天天生鲜电商网站项目系列博客（九）
- UTF-8 without BOM
- ubuntu相关软件下载
- 800家电子元器件供应商及代理商
- 手机距离传感器测试软件,距离传感器有什么用_手机距离传感器坏了
- whois信息收集企业备案信息
- Chrome 浏览器安装扩展程序
- pandas基础用法详解
- “怀孕后，老公居然背着我做这些事”：有没有嫁对人，看这点就知道了
- ［Maya学习内容日记］20070812
- mysql删除表的命令
- 如何构建一个大数据量的搜索引擎
- android gif播放慢了,Glide加载Gif动画播放速度过慢的问题
- Day15 --框架集合 Collection集合 和 List 集合