in

type keys = 'firstName' | 'lastName';
type TName = {
  [key in keys]: string;
};

ts 浏览器相关

事件

addEventListener<'click'>("click",(event:Event)=>{})//所有事件
addEventListener<'click'>("click",(event:MouseEvent)=>{
    <HTMLDivElement>ev.target
})//鼠标事件
DragEvent//拖拽事件

元素

const element:HTMLAnchorElement = document.createElement("a")
const element:HTMLDivElement = document.createElement("div")
const element:HTMLInputElement = document.createElement("input")

ts函数

InstanceType 获得class实例类型

class User{
    name:string;
    age:number;
}
type user_info = InstanceType<typeof User>;
const user:user_info = new User();

InstanceType 完成 vue组件类型推导

<script lang="ts" setup>
import {myModule} from "./myModule/myModule.vue";
const myModuleDome = ref<InstanceType<typeof myModule>>()

</script>
<template>
<myModule ref="myModuleDome"/>
</template>

Parameters 获得函数参数类型组成的元组类型

type U = Parameters<(param:string)=>{}>//[param:string]

ReturnType 获得函数的返回值类型

type U = ReturnType<() => string>; //string

Record 创建object类型

type keys = "name" | "age" | "sex"
type User = Record<keys,string>
const user:User = {
    name:'zs',
    age:'0',
    sex:'男'
}

Readonly 转换只读

interface User{
    name:string,
    age:number,
    sex:"男"|"女",
}
let u:Readonly<User>={
    name:"张三",
    age:10,
    gender:"男",
};
u.age=190;//报错

Required 转换必选 Partial 转换可选

interface User{
    name?:string,
    age?:number,
    sex?:"男"|"女",
}
let u:Required<User> = {}//报错
//Partial 反之

Extract 提取联合类型中的某个类型

type U = Extract<string | number | (()=>void),Function>//U in ()=>void

Exclude 过滤联合类型中的某种类型

type U = Exclude<"string"|"number"|"boolean","string">;
let u :U = ''//报错

keyof 获取索引类型

const user = {
	name: "zs",
	age: 18
};
for(let key in user){
	obj[key as keyof typeof obj]
}

Pick 挑选类型 Omit 过滤类型

type User = {
    name:string;
    age:number;
    gender:string
}
type U = Pick<User,"name"|"age">;//{name:string,age:number}

NonNullable 去除类型中的null和undefined

type U = NonNullable<string[]|null|undefined>;//string[]

附TS编译选项链接

/tsconfig.json

在tsconfig.json下可以书写注释,这在一般的json文件下是不允许的

tsconfig.json配置详解 - SegmentFault 思否

{
    //编译src下的所有目录'**'下的所有文件'*'
    "include":["./src/**/*"],
    //不便编译那些文件	默认值["node_modules","bower_components","jspm_packages"]
    "exclude"[''],
	//TS编译器配置
	"compilerOptions": {
        //开启所有严格检查
        "strict": true,
        //基础路径
        "baseUrl": ".",
        //路径映射:告诉ts等价文件名,别名
        "paths":{
            "@/":["src/"]
        }
        //指定js版本	默认ES3
        "target": "ESNext",
        //指定模块化规范	commonjs
        "module": "ES6",
        //指定项目中要使用到的库
        "lib": ["dom"],
		//指定文件编译后所在的目录
        "outDir": "./dist",
        //指定编译文件的根目录,编译器会在根目录查找入口文件
        "rootDir": "./",
		//将所有作用域中的TS文件合并为一个js文件,module值为amd和system时支持
        "outFile": "./dist/app.js",
        //编译js文件
        "allowJs": true,
        //是否在编译的时候生成相的d.ts声明文件会使得allowJs失效
        "declaration": true,
        //检查js文件语法规范
        "checkJs": true,
        //编译时是否移除注释
        "removeComments": true,
        //不生成编译后的文件
        "noEmit": true,
        //ts文件报错时不生成js文件
        "noEmitOnError": true,
        //打开js严格模式
        "alwaysStrict": true,
        //不允许隐式的any类型
        "noImplicitAny": true,
        //不允许不明确类型的this
        "noImplicitThis": true,
        //严格的检查空值
        "strictNullChecks": true, 
        //在编译时是否生成.map文件
        "declarationMap": true,
        //是否编译构建引用目录
        "composite": true, 
        //声明全局ts文件目录 默认/node_modules/@types/
        "typeRoots": ["/node_modules/@types/","/types"],
        //全局ts文件
        "types":[""],
    }
}

{
    //使用装饰器的前置声明
    "experimentalDecorators":true,
}