1 Structural Type System（结构化类型系统）
类型检查关注的是值所具有的形状，如果两个对象具有相同的形状，则认为它们属于同一类型。
class类型兼容性
对于对象类型来说，y 的成员至少与 x 相同，则 x 兼容 y（成员多的可以赋值给少的）。
成员多的 Point3D 可以赋值给成员少的 Point
class Point{x:number;y:number}
class Point3D{x:number;y:number;z:number}
const p:Point = new Point3D()
接口兼容性
接口之间的兼容性，类似于 class。并且，class 和 interface 之间也可以兼容。
函数兼容性
需要考虑：1 参数个数 2 参数类型 3 返回值类型。
- 参数少的可以赋值给参数多的
- 相同位置的参数类型要相同（原始类型）或兼容（对象类型）。
- 如果返回值类型是原始类型，此时两个类型要相同。
- 如果返回值类型是对象类型，此时成员多的可以赋值给成员少的
2 Nominal Type System（标明类型系统）（比如，C#、Java 等）
功能类似于接口继承（extends），用于组合多个类型为一个类型（常用于对象类型）
泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中。
一般不确定的地方就可以先丢泛型
理解为是一个函数，将类型当做参数传递
- 创建泛型函数：
const id = <T>(value: T): T => {
return value;
- 调用泛型函数：
const num = id<number>(10)
const str = id<string>('a')
- 简化调用泛型函数：✨建议使用
let num = id(10)
let str = id('a')
- 多泛型变量
const fn = <T, U>(a: T, b: U) => {}; - 泛型约束：
指定更加具体的类型
const id = <T>(value: T[]): T[] => {
console.log(val.length);
return value;
interface ILength{
length:number
const fn = <T extends ILegnth>(val:T):T{
console.log(val.length);
return val
- 泛型接口:
interface Res<T> {
msg: string;
code: number;
result: T;
const res:Res<number[]> = {
msg: "成功",
code: 200,
result: [1, 2, 3]
res.result.push(4);
- 创建泛型类：
- 泛型工具类型:
const fn = <T>(val:T):T =>{
return [val]
const fn = <T,K>(arr:[T,K]):[K,T] =>{
return [arr[1],arr[0]]
interface Res<T> {
msg:string,
code:number,
result:T
const res1:Res<null> = {
msg:'success',
code:200,
result:null
interface ResultType {
id:number,
name:string,
done:boolean
const res2:Res<ResultType[]> = {
msg:'success',
code:200,
result:[{
id:1,
name:'wendy',
done:false
关键字接收一个对象类型，生成其键名称 字符串的联合类型
interface Person {
name: string;
age: number;
gender: string;
const str: keyof Person = "gender";
const myStr: "name" | "age" | "gender" = "gender";
ts 默认值为 unknown ----------对应js的 undefined
✨一般使用场景，用在 对象 的泛型封装中
const fn1 = <T = 1>(a: T) => {};
需要添加导入、导出或空的export {}语句来使当前文件成为模块
:number就是类型注解，为变量提供类型约束
string number boolean undefined null
❗原始类型首字母是小写
✨项目一般不会主动声明undefined和null，一般在出现错误的时候回看到
作用：约束数组每一项的类型
✨推荐语法：类型[]
let arr:number[] = [1,2,3]
❌类型 string 的参数不能赋给类型 number 的参数 arr.push('1')
❌类型 number 的参数不能赋给类型 string 的参数
语法：一根竖线
let arr:(string | number)[] 或者 let guess:string | number[]
❌不能将类型boolean分配给类型(string | number)[]
❌❗不能将类型string[]分配给类型string | number[]
-
在函数基础上分别指定参数和返回值类型
const res = (num1:number,num2:number):number => {
return num1 + num2
-
使用类型别名同时指定参数和返回值
type AddType = (num1:number,num2:number) => number
const add1:AddType = (num1,num2) =>{
return num1 + num2
用于标注函数没有返回值
const sayHi = ():void =>{
console.log('hello')
❗ 返回值类型不为 void 的函数，必须有返回值
const sayHi2 = ():undefined =>{
console.log('hello')
return
语法：参数后面+?
❗ 必选参数不能位于可选参数后
const fn = (n?:number):void => {
fn()
fn(10)
const mySlice(start?:number,end?:number):void => {
console.log(`开始索引为${start},结束索引为${end}`)
mySlice()
mySlice(1)
mySlice(1, 2)
描述对象的结构，规定对象属性的方法和类型
❌ 空对象 let obj1: {} = { name: 'zs' } let obj2: object = { age: 18 }
❌存在问题：不指定对象属性和具体类型，无法访问对象的属性
✅ 给对象的属性指定类型
let obj3: { name:string } = { name:'zs' }
✅给对象的多个属性指定类型，一行书写用 ;隔开，如果换行可以不写;
let obj4:{
name:string
age:number
-
-
-
type ObjType = {
name:string
age:number
sayHi():void
sayNo:() => void
let obj5: ObjType = {
name:'zs',
age:19,
sayHi(){},
sayNo(){}
PS：如果是 get 请求 method 可以省略
const axiosType = {
url:string
method?:string
const axios = (config:axiosType) => {
console.log(config)
-
属性：必选属性：姓名、性别、成绩，可选属性：身高
-
方法：学习、打游戏（可选）
const StuType = {
name:string
gender:string
score:number
height?:number
study():void
playGame?():void
const stu1:StuType = {
name: '悟空',
gender: '男',
score: 100,
height: 150,
study() {
console.log('打妖怪')
playGame() {
console.log('playGame~')
测试必选属性和方法:
stu1.name.trim()
stu1.score.toFixed(2)
stu1.study()
❗❗ 注意：可选属性和方法需要先判断再使用
if(stu1.height){
stu1.height.toFixed(2)
if (stu1.playGame) {
stu1.playGame()
可选属性或方法，可配合 ?. 可选链操作符 安全使用。
安全调用写法1：判断
if(stu1.playGame){
stu1.playGame()
安全调用写法2：短路运算
stu1.playGame && stu1.playGame()
✅安全调用写法3：可选链操作符，最简洁
stu1.playGame?.()
用来定义对象的结构，type 和 interface 都可以定义对象的结构 ---- 按团队的习惯来即可
interface IsStudent{
name:string
age?:number
sayHi():voids
const stu1:IsStudent = {
通过 type（类型别名）定义对象的结构
type TsStudent = {
name:string
age?:number
sayHi():void
interface c{
x:number
y:number
interface Point3D extends Piont2D{
z:number
type Point3D = Point2D & { z:number }
都可以定义对象类型，在大多数情况下，可以根据个人(团队)喜好进行选择
type 不能出现重名
interface 重名会自动合并
-
-
let name = 'tony'
❌name = 123 根据初始值，自动推导的类型为 string
TS 中允许把字面量直接当做类型使用
let name:'tony' = 'tony'
✨字面量类型可匹配联合类型使用，实现代码提示和类型校验
let method:'GET'|'POST'|'DELETE'|'PUT'
type Config = {
url:string
method?:'GET'|'POST'|'DELETE'|'PUT'
const axios = (config:Config) => {
console.log(config)
逃避 TS 的类型检查，相当于让代码变回 JS，不检查类型
let obj:any
obj = { name: 'zs', age: 18 }
obj.trim()
声明变量（函数参数），但没有设置类型或初始值
const add = (n1,n2)=>{ return n1+n2 }
- 第一原则：尽量避免使用 any 类型，any 使用得越多，程序漏洞越多
- 如果使用第三方库不知道是什么类型，可以先用 any 逃避 TS 的检查，让程序先跑起来
作用：提高代码的复用性
语法：先声明，再使用，T 表示类型变量
声明类型变量：<T> 使用类型变量：T
后端返回值类型，通过泛型提升可复用性
type ResponseType<T> = {
msg:string
code:number
data:T
type User = {
name:string
age:number
const userRes:ResponseType<User> = {
msg: 'ok',
code: 200,
data: {
name: 'zs',
age: 18,
userRes.data.name
interface IdFn<T>{
id:T
getId():T
getIds():T[]
const idFn:IdFn<number> = {
id:123,
getId(){
return 123
getIds(){
return [1,2]
function getId<T>(id:T){
return id
const res1 = getId<number>(1)
const res2 = getId<string>('wendy')
const res3 = getId(123)
function fn1<T extends 'GET' | 'POST'>(params:T)T{
return params
function fn2<T extends { length:number }>(params:T):T{
console.log(param.length)
return param
封装抽离写法
interface Len{
length:number
function fn3<T extends Len }>(params:T):T{
console.log(param.length)
return param
fn2([1, 2, 3])
fn3('123')
首先安装上述JS部分基础依赖
打字稿： :
npm install eslint-config-airbnb-typescript eslint-plugin-import @typescript-eslint/eslint-plugin -D
// .eslintrc.js
module . exports = {
extends :
问题： 元素
隐式具有 “any“
类型，因为
类型为 “string“ 的表达式不能用于索引
类型 “Object“。 在
类型 “Object“ 上找不到具有
类型为 “string“ 的参数的索引签名
描述： 在写代码的时候，对一个对象做了一个for…in循环，然后取到了其每一个key对应的value值，但是写完之后发现
Typescript报错了，错误内容就是如题，有点奇怪，特此去了解一下
for (const key in obejct) {
// 处理...
obejct[key]
最近在前端项目中遇到在用字符串当对象的key时报错，报错信息如下：
“元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型”
在类型 XXX 上找不到具有类型为 “string” 的参数的索引签名。
搜索了一圈解决方案，没一个特别优雅的。
方案一，修改tsconfig
是修改tsconfig.json，加下面这行参数屏蔽检查，从而不报错。
"suppressImplicitAnyIndexErrors":true,
方案二，写一个函数转类型
export function
1.什么是
TypeScript？
TypeScript是一种由微软开发的自由和开源的编程语言。它是
JavaScript的一个严格超集，并添加了可选的静态
类型和使用看起来像基于类的面向对象编程语法操作Prototype。
2.
TypeScript的历史
2012年10月，微软发布了首个公开版本的
TypeScript，
2013年6月19日，在经历了一个预览版之后微软正式发布了正式版
TypeScript。当前最新版本为
TypeScript3.8。
3.
JavaScript 与
TypeScript 的区
1、参考博文===》①严格模式 - 知乎，②ts的tsconfig.json中文说明③TypeScript Number | 菜鸟教程2、解决（ts报错“this“ 隐式具有类型 “any“，因为它没有类型注释。）3、解决（函数内this是undefined 的问题）
4、解决（其目标缺少构造签名的 "new" 表达式隐式具有 "any" 类型。）
