TypeScript interface All In One

TypeScript interface All In One

; & ,

// ✅ interface 字段后面的分号(;)或逗号(,)，是可选的，但是建议加上！
export interface CanvasFingerprint { 
  winding: boolean
  geometry: string
  text: string
}

// ✅ interface 字段后面的逗号，是可选的，但是建议加上！
export interface CanvasFingerprint1 { 
  winding: boolean,
  geometry: string,
  text: string,
}

// ✅ interface 字段后面的分号，是可选的，但是建议加上！👍 (ts 会自动补全 ; 可以省略，提高开发效率， 类似 js 语句省略 ;)
export interface CanvasFingerprint2 { 
  winding: boolean;
  geometry: string;
  text: string;
}

// interface 是 TS 校验自定义类型使用的，但是最终不会被编译出 js 代码
const obj: CanvasFingerprint = {
  winding: true,
  geometry: 'string',
  text: 'string',
};

/*

// interface 是 TS 校验自定义类型使用的，但是最终不会被编译出 js 代码
const obj = {
    winding: true,
    geometry: 'string',
    text: 'string',
};
export {};

*/

canvas.d.ts

export interface CanvasFingerprint {
    winding: boolean;
    geometry: string;
    text: string;
}

export interface CanvasFingerprint1 {
    winding: boolean;
    geometry: string;
    text: string;
}

export interface CanvasFingerprint2 {
    winding: boolean;
    geometry: string;
    text: string;
}

/* 
 */
// interface 字段后面的逗号， 是可选的，但是建议加上！
// export interface CanvasFingerprint { 
//   winding: boolean,
//   geometry: string,
//   text: string,
// }

/* 

 */

// interface 字段后面的分号， 是可选的，但是建议加上！
export interface CanvasFingerprint { 
  winding: boolean;
  geometry: string;
  text: string;
}

/* 

 */

// interface 是 TS 校验自定义类型使用的，但是最终不会被编译出 js 代码
// export interface CanvasFingerprint { 
//   winding: boolean
//   geometry: string
//   text: string
// }

const obj: CanvasFingerprint = {
  winding: true,
  geometry: 'string',
  text: 'string',
};

export interface CanvasFingerprint {
    winding: boolean;
    geometry: string;
    text: string;
}

demo

https://www.typescriptlang.org/play?#code/PQKgBAsAUGLNxhgJYDsAuBTATgMwIYDGmYg6tqCt1oHAqgRumAhboOgJg78qAw-2IPRmg98qCQCbc4GLybQF96gOujABUqAoOUCA-wiSYAHgAcA9tnQoMOAsTABhfKgBu+AM4AxNAHMcC7GjUBvSFERhXAdzQATSwC4wAIyUlABtMfQAaGVcwKyUAW0x0bABPP2Mky0jnJFcsOXQ0jNQLLJcAX2gEcEqYOBqXO00iEgoaWkAwJRZ2bl4BEQlpKHllVXUsPGbdfSMzS2tbDDBHaHcvXwCg0P0AbhWYzHjElMKFi12YMDyCsHTT84qoKqcVusfssabtNjAAFQBlMCAQgtADFZgCvAwBZ2oBJOUA3j6AaPVAP7ygApXXpsQAA5oAJv0AsHKALHlANURgDR-QCL0YAvxTAACtjGBAMdygEAPKLDFRqRoTbR6QwmczFeZ2JZOFyrVDeYp+QIhMKoKKuWIJJKpG5FCySy7ya63SxRB7QQhKVDpMBKfxkvxsmacqzYGw8gC8Sz2HkF6ySAFdMFkpQcZccwAByNXFb1u5X5Py+hUB6Blc5AA

refs

https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html#interfaces

https://www.typescriptlang.org/docs/handbook/interfaces.html

https://www.typescriptlang.org/docs/handbook/2/objects.html#extending-types

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---