TypeScript

于 2024-10-05 17:35:03 发布
阅读量749 收藏 5
点赞数 4
文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75085583/article/details/142714290
版权

一，接口(interface)

概述：描述对象的行为和形状

例子

interface IUser{
  id:number
  readonly name: string  //只读
  // name: string
  age?: number  //可选
  // 索引签名
  [aaa: string] : unknown
  //函数类型
  say(name: string ,age: number): void
}
const user: IUser = {
  id:0,
  name:'张三',
  age:19,
  gender:'man',
  say(name: string, age: number){

  }
}



es5


const user = {
    id: 0,
    name: '张三',
    age: 19,
    gender: 'man',
    say(name, age) {
    }
};

接口继承类

// 人类
class People implements IUser{
  id: number = 0
  name: string = '匿名'
  age:number = -1
  sex: string = 'unknown'
  say(name: string, age: number): void {
    console.log('hello');
    
  }
  constructor(name:string){
    this.name = name
    
  }
  [aaa: string]: unknown
}

// 动物类
class Animal {
  id:number
  name:string
  constructor(id:number,name:string){
    this.id = id
    this.name = name
  }
}

// 接口继承动物类
interface People1 extends Animal{
  age: number
}
const user22: People1 = {
  id:0,
  name:'zz',
  age:666

}



es5




// 人类
class People {
    say(name, age) {
        console.log('hello');
    }
    constructor(name) {
        this.id = 0;
        this.name = '匿名';
        this.age = -1;
        this.sex = 'unknown';
        this.name = name;
    }
}
// 动物类
class Animal {
    constructor(id, name) {
        this.id = id;
        this.name = name;
    }
}
const user22 = {
    id: 0,
    name: 'zz',
    age: 666
};

class和interface的异同点

1，都可以作为类型

2，class不仅可以有类型，还可以有值，interfance 只有类型

二，类型别名(type)

概述：很多场景下和interface是一样的，但是类型别名适用的场景更广泛，，它不会生成新的类型，但是类型别名的语义性(可读性)不高，所以官方推荐优先使用interface

类型别名和接口的区别：

1，接口可以继承和实例，类型别名不行

2，接口会创建一个新的类型，类型别名不会

 3，接口只能定义对象类型，类型定义的别名还可以定义其他类型

type TAge = string | number
const age: TAge = '12'
type TUser = {
  id:number
  name : string
  age: number
}
const user1: TUser={
id:0,
name:'狄仁杰',
age:12
}
const user222: TUser1={
// id:0,
name:'狄仁杰',
age:12
}
interface TUser1{
  name:string
  age:number
}


es5

const age = '12';
const user1 = {
    id: 0,
    name: '狄仁杰',
    age: 12
};
const user222 = {
    // id:0,
    name: '狄仁杰',
    age: 12
};

三，泛型

概念：声明一个类型变量，声明一未来知道的具体类型的变量，

作用：实现类型的复用

function getData<T>( msg: T): T{
  // var a : T // 泛型可以在函数内部任意地方使用
return msg
}
// 这里的T会是字符串类型，也会是数值型

console.log('狄仁杰');  //字符串
console.log(11);  //数值


es5 


function getData(msg) {
    // var a : T // 泛型可以在函数内部任意地方使用
    return msg;
}
console.log('狄仁杰');
console.log(11);

四，装饰器

分类： 类装饰器，方法装饰器

类装饰器：本身是一个函数，返回一个函数

方法装饰器：将方法里传入的参数进行类型设定

类装饰器：

// 类装饰器
// 本身是一个函数 返回一个函数
function log(params:any){
  console.log(params);
  
  return(target:any)=>{
  console.log(target);
  
  }
}


es5

// 类装饰器
// 本身是一个函数 返回一个函数
function log(params) {
    console.log(params);
    return (target) => {
        console.log(target);
    };
}

方法装饰器： 

// 方法装饰器
function log1(params:string,a:any,b:any,c:any){
console.log(params,a,b,c);
return(target: any ,name:any,descriptor:any,f:any)=>{
  console.log('1111',target,name,descriptor);
  
}
}


@log('类装饰器传入的参数1')
class People1 {
  name:string = '张三';
  constructor(name:string){
    console.log('构造函数');
    this.name = name
  }
  @log('方法装饰器的参数') say():void{
    console.log('hello');
    
  }
}


const p1 = new People1('李世民')
console.log(p1.name);




es5




// 方法装饰器
function log1(params, a, b, c) {
    console.log(params, a, b, c);
    return (target, name, descriptor, f) => {
        console.log('1111', target, name, descriptor);
    };
}
let People1 = (() => {
    let _classDecorators = [log('类装饰器传入的参数1')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _instanceExtraInitializers = [];
    let _say_decorators;
    var People1 = _classThis = class {
        constructor(name) {
            this.name = (__runInitializers(this, _instanceExtraInitializers), '张三');
            console.log('构造函数');
            this.name = name;
        }
        say() {
            console.log('hello');
        }
    };
    __setFunctionName(_classThis, "People1");
    (() => {
        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
        _say_decorators = [log('方法装饰器的参数')];
        __esDecorate(_classThis, null, _say_decorators, { kind: "method", name: "say", static: false, private: false, access: { has: obj => "say" in obj, get: obj => obj.say }, metadata: _metadata }, null, _instanceExtraInitializers);
        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
        People1 = _classThis = _classDescriptor.value;
        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        __runInitializers(_classThis, _classExtraInitializers);
    })();
    return People1 = _classThis;
})();
const p1 = new People1('李世民');
console.log(p1.name);

五，类型守卫

概念：用于在运行时检查和缩小 any 类型或联合类型变量的可能类型集合

作用：有助于在处理不确定类型的变量时提高代码的类型安全性。

interface IUser{
  name:string
  age:number 
  sex:string
  score:number
}

type TUser = keyof IUser // name | age | sex |score


const user2 : TUser = 'score'

es5


const user2 = 'score';

六，class类

概念：类（Class）是一种封装数据和行为的模板，它定义了一类对象的属性（成员变量）和方法（成员函数）。类可以被看作是创建对象的蓝图或模板，它描述了对象的内部状态（属性）和行为（方法）。

作用：有助于提高代码的可读性、可维护性和可重用性。

class Animal{
 public type: string  //任何地方都可以使用
 private body: boolean = true   //只有该类内部可以通过this使用
  // 如果类里面的成员属性没有初始值，而是通过实例化的时候传入，此时需要使用constructor
  // 如果类里面的成员属性有初始值，可以不用写constructor
  constructor(type: string){
    this.type = type
    
  }
 protected move(): string{
    return `我是${this.type},我会动`

  }
  jump(): void{
    console.log(this.move());  //protected修饰符，允许在父类
    
  }

}
// 人类是动物类的子类/派生类，这里的动物类就是父类/基类/超类
class People extends Animal{
  name: string
  age: number  = 13
  set: string = '男'
  constructor(name: string,type:string){
    super(type)
    this.name = name
  }
  run(): void{
    // 
    // this.body
    console.log(`我是${ this.name},我会跑`);
    
  }
}

// 程序员类继承人类
  class coder extends People{
    name  = 'li'
    
  }


es5


"use strict";
class Animal {
    // 如果类里面的成员属性没有初始值，而是通过实例化的时候传入，此时需要使用constructor
    // 如果类里面的成员属性有初始值，可以不用写constructor
    constructor(type) {
        this.body = true; //只有该类内部可以通过this使用
        this.type = type;
    }
    move() {
        return `我是${this.type},我会动`;
    }
    jump() {
        console.log(this.move()); //protected修饰符，允许在父类
    }
}
// 人类是动物类的子类/派生类，这里的动物类就是父类/基类/超类
class People extends Animal {
    constructor(name, type) {
        super(type);
        this.age = 13;
        this.set = '男';
        this.name = name;
    }
    run() {
        // 
        // this.body
        console.log(`我是${this.name},我会跑`);
    }
}
// 程序员类继承人类
class coder extends People {
    constructor() {
        super(...arguments);
        this.name = 'li';
    }
}
const ai = new Animal('怕像动物');
// ai.move()
const p1 = new People('张三丰', '哺乳动物');
// p1.move()

七：工具类型

1partial （可选意思） 会将数据类型变为可选，接口如果同名则会自动合并

interface IUser2{

  age:number
  sex:string

}
interface IUser2{
  id:number
  name:string


}

es5


const u1 = {
    id: 0,
    name: "李四",
    age: 12,
    sex: '男'
};

八，命名空间

1，关键字：namespace 声明

2，使用：外面如果需要使用命名空间里的接口，那么就需要导出（export）想使用的，

单例模式也是命名空间

// js中的命名空间
// 单例模式其实就是给一些数据添加一个命名空间，方便统一维护管理
const o1 ={
  name:'lis',
  age:12,
  say(){}
}
o1.say()


es5


   // js中的命名空间
// 单例模式其实就是给一些数据添加一个命名空间，方便统一维护管理
const o1 = {
    name: 'lis',
    age: 12,
    say() { }
};

使用命名空间：

// js中的命名空间
// 单例模式其实就是给一些数据添加一个命名空间，方便统一维护管理
const o1 ={
  name:'lis',
  age:12,
  say(){}
}
o1.say()


// 命名空间  namespace 声明
// 外面如果需要使用命名空间里的接口，那么就需要导出想使用的，
namespace demo{
 export interface IUser{
    name:string
    age:number
  }
}
const u2 : demo.IUser = {
  name:'zs',
  age:12
}



es5   


"use strict";
// js中的命名空间
// 单例模式其实就是给一些数据添加一个命名空间，方便统一维护管理
const o1 = {
    name: 'lis',
    age: 12,
    say() { }
};
o1.say();
const u2 = {
    name: 'zs',
    age: 12
};

Traced back
关注
vue框架中props的typescript用法详解
10-15
typescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法。这篇文章主要介绍了vue框架中props的typescript用法,需要的朋友可以参考下
TypeScript教程
02-22
### TypeScript 数据类型详解 #### 基础数据类型 在 TypeScript 中，基础数据类型是构建更复杂类型的基础。这些类型包括但不限于布尔值、数字、字符串等。 ##### 布尔值（boolean） 布尔值用于表示逻辑实体，在 ...
props与TypeScript
weixin_50236973的博客
12-27 552
props与TypeScript
vue3 typescript 子控件props中type类型自定义
点点滴滴
04-23 2768
【代码】vue3 typescript 子控件props中type类型自定义。
TypeScript 学习之Promise处理异步操作
neveris2的博客
04-26 575
创建 Promise 对象时，需要传递一个执行器函数，有两个参数：resolve 和 reject，通过调用 resolve 函数，可以传递处理成功的结果，通过调用 reject 函数，可以传递处理失败的结果。Promise 提供了链式调用的机制，可以通过 then 方法注册成功状态的处理函数，通过 catch 方法注册失败状态的处理函数，通过 finally 方法用于注册无论操作成功还是失败都要执行的处理函数。
vue单文件props写法_vue框架中props的typescript用法详解
weixin_35218304的博客
12-29 2711
vue框架中props的typescript用法详解什么是typescripttypescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法。它很像JavaScript都强类型版本，除此之外，它还有一些扩展的语法，如interface/module等。typescript 在编译期会去掉类型和特有语法，生成纯粹的JavaScript。Typescript 5年...
Typescript类型脚本课件.pptx
06-19
Typescript类型脚本课件 Typescript是一种静态类型检查的JavaScript超集语言，由Microsoft开发，代码开源于GitHub上。Typescript的主要特点是提供了类型系统和对JS新标准的支持（ES6/7/8）。 Typescript可以帮助...
typescript版 vconsole 代码
03-24
**typescript版 vconsole 代码详解** 在移动应用开发中，我们常常需要在手机上调试前端代码，vConsole 是一个轻量级的移动端 Web 开发调试工具，它可以在真实设备上模拟 Chrome DevTools 的一些功能。当我们将 ...
《TypeScript》电子pdf版
05-05
### TypeScript 入门知识点概述 #### 1. TypeScript 概述 - **定义**: TypeScript 是 JavaScript 的一个静态类型的超集，它可以编译成纯 JavaScript。这意味着任何现有的 JavaScript 代码库都可以立即作为 ...
TypeScript手册(TypeScript Handbook) 重写新版 PDF版
03-20
2021年3月，TypeScript发布了自己的最新版本手册。该手册是学习 TypeScript 语言及其常用用法的主要资源。官方人员指出，新手册在 TypeScript 团队中已经是一个运行多年的项目，包含了大大小小的数百个贡献。 这项...
typescript-signals:js信号的TypeScript实现
05-22
TypeScript信号 用于TypeScript的自定义事件/消息系统。 从受启发的转换而来。 有关更深入的介绍，请阅读并访问下面的链接。 入门 将Signal.ts和SignalBinding.ts文件复制到TypeScript项目中。 如果愿意，可以将...
TypeScript实例之网页计算器
02-05
使用ts开发网页计算器，实现自动计算，及界面的自动绘制，依赖库如下： 1. browserify 为网页浏览器提供模块加载环境。 2. lite-server 提供简易的web服务，自动将项目中的内容发布到web服务器中，启动时自动打开...
Typescript
03-28
**TypeScript 深度解析** TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，旨在解决 JavaScript 在大型项目中所面临的一些问题，如类型安全性、代码可维护性和开发效率。TypeScript 提供了...
SolidJS Typescript 开发指南(6) Props和Store
weixin_41907106的博客
08-22 1525
SolidJS在数据管理中为了保持细粒度响应式特性，在Props中给出了合并和分离响应式数据的方法，而store则是提供了细粒度下以最小代价更新数据的操作方法，Context API提供了访问全局变量的优雅实现。
vue props使用typescript自定义类型
热门推荐
w55100的博客
05-07 1万+
前言 Base: vue3+typescript 解决将ts中自定义的interface，传vue的props属性的问题。 问题定位 官方文档中说，props自定义类型检查是可能的。 In addition, type can also be a custom class or constructor function and the assertion will be made with an instanceof check. For example, given the following clas
Vue.js 与 TypeScript（1） ：项目配置、props标注类型、emits标注类型
最新发布
游王子的博客
06-02 906
像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误，也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全，TypeScript 还改善了开发体验和效率。
React + TypeScript 默认 Props 的处理
大灰狼的小绵羊哥哥的博客
10-12 1万+
React 中的默认 Props 通过组件的defaultProps属性可为其Props指定默认值。 以下示例来自React 官方文档 - Default Prop Values： class Greeting extends React.Component { render() { return ( <h1>Hello, {this.prop...
TypeScript 声明复杂变量时 如何指定数据类型？PropType 有啥用？
Lyrelion的博客
02-02 7308
TypeScript 定义复杂变量示例； 使用 PropType 定义 vue props 数据类型示例；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值