斯皮尔网站建设,网站平台如何推广,宁波网站搜索引擎优化,线上广告平台文章目录 1️⃣ TypeScript常用讲解1.1 使用1.2 字符串1.3 数字1.3 布尔1.4 数组1.5 元组1.6 枚举1.7 any1.8 void1.9 object1.10 函数指定返回值的类型1.11 联合类型1.12 类型断言1.13 接口1.14 函数类型1.15 类类型1.16 泛型 2️⃣ 类2.1 类的基本写法2.2 类的继承2.3 类的修… 文章目录 1️⃣ TypeScript常用讲解1.1 使用1.2 字符串1.3 数字1.3 布尔1.4 数组1.5 元组1.6 枚举1.7 any1.8 void1.9 object1.10 函数指定返回值的类型1.11 联合类型1.12 类型断言1.13 接口1.14 函数类型1.15 类类型1.16 泛型 2️⃣ 类2.1 类的基本写法2.2 类的继承2.3 类的修饰符2.4 类的静态属性2.5 抽象类2.6 书写接口给类使用 3️⃣ 常用的工具类型3.1 Record3.2 Partial3.3 Required3.4 Omit3.5 Pick3.6 Exclude 优质资源分享 作者xcLeigh 文章地址https://blog.csdn.net/weixin_43151418/article/details/134707321 ElectronTsVueVite桌面应用系列 这个系列包括了从桌面应用环境搭建 到 完整项目运行的全过程。展现一个完整的窗体应用程序包括对数据的增删改查各种表单的应用各种路由的应用登录注册的实现窗体的放大缩小列表的应用内存的应用等。本篇介绍TypeScript常用语法详解 1️⃣ TypeScript常用讲解
TypeScript 是 JavaScript 的一个超集支持 ECMAScript 6 标准ES6 教程。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用它可以编译成纯 JavaScript编译出来的 JavaScript 可以运行在任何浏览器上。
1.1 使用
在线测试TypeScript脚本
npm install -g typescript //安装typescript
tsc -v //查看版本
tsc -init / tsc --init //初始化
outDir: ./ //tsconfig.json,下配置编译到那个目录下1.2 字符串 声明变量name类型为字符串(string);变量age类型为数字(number)控制台输出 My name is xcLeigh, I am 24 years old!
let name:string xcLeigh
let age:number 24 //常量不能被修改所以它的值就是它的类型
const info My name is ${name}, I am ${age} years old!
console.log(info);1.3 数字
let n1: number 520 // 十进制
let n2: number 1010 // 二进制
let n3: number 208 // 十六进制1.3 布尔
let status: boolean false;
status true;1.4 数组 定义数组的两种方式里面的数据类型可以是字符串、数字、布尔等类型。
//方式一变量名:数据类型[] 变量值
let arr1:number[] [1,2,3,4]
console.log(arr1)
let arr2:object[] [{},{},{}]
console.log(arr2)
//方式二数组泛型 变量名:Array数据类型 变量值
let arr3:Arraynumber [1,2,3]
console.log(arr3)
let arr4:Arrayobject [{},{},{}]
console.log(arr4)1.5 元组 限制数据类型的同时也限制数据数量元组在类型声明的时候规定好有几个元素每个元素分别是什么类型。赋值的时候必须严格按照规则不能多不能少同时每个位置的数据类型也要对应上。
let arr5:[number,string,boolean] [1,2,true]
console.log(arr5)1.6 枚举
枚举类型用于定义数值集合。
enum Person {xiaoming,xiaogang,xiaohong
}
let poeple:Person Person.xiaohong
console.log(poeple)//0
枚举数值默认从0开始依次递增
根据特定的名称得到对应的枚举数值
也可以给定某个名称一个值后续的名称会在他的基础上递增
enum Person {
xiaoming 100,
xiaogang, //101
xiaohong //102
}
let poeple:Person Person.xiaogang
//注意有赋值数字后续的名称才会递增否则只有被赋值的那个名称有值后续的都是undefined。
enum Person {
xiaoming 123,
xiaogang, //undefined
xiaohong //undefined
}
let poeple:Person Person.xiaogang1.7 any 任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型它常用于以下三种情况。
1、变量的值会动态改变时比如来自用户的输入任意值类型可以让这些变量跳过编译阶段的类型检查示例代码如下
let x: any 1; // 数字类型
x I am who I am; // 字符串类型
x false; // 布尔类型
x [];
x undefined;
x null; 2、改写现有代码时任意值允许在编译时可选择地包含或移除类型检查示例代码如下
let x: any 4;
x.ifItExists(); // 正确ifItExists方法在运行时可能存在但这里并不会检查
x.toFixed(); // 正确3、定义存储各种类型数据的数组时示例代码如下
let arrayList: any[] [1, false, fine];
arrayList[1] 100;1.8 void 用于标识方法返回值的类型表示该方法没有返回值。某种程度上来说void 类型像是与 any 类型相反它表示没有任何类型。 当一个函数没有返回值时你通常会见到其返回值类型是 void
//表示没有任何类型, 一般用来说明函数的返回值不能是undefined和null之外的值
function fn(): void {console.log(fn())// return undefined// return null
}1.9 object object 表示非原始类型也就是除 numberstringboolean之外的类型,并非只是对象类型。
function fn2(obj:object):object {console.log(fn2(), obj)return {}// return undefined// return null
}
console.log(fn2(new String(abc)))
// console.log(fn2(abc) // error
console.log(fn2(String))1.10 函数指定返回值的类型 小括号后面接上:数据类型,此写法规定了函数必须要有返回值并且返回值要符合规定的数据类型
//返回字符串类型
function f():string {return 1
}
//返回数字类型
function f():number{return 1
}1.11 联合类型 通过|符号连接多种数据类型被赋予此类型的变量可以存储规定范围内的数据类型的值.
//只要满足申明的联合类型就行let test2:number|string|number[]|null|boolean|undefined 1test2 1test2 [1]test2 nulltest2 false1.12 类型断言 当某个变量可能是多个类型时此时在使用这个变量的时候可能会发生一些ts的报错。 比如下面例子中str可能是string类型或者number类型那么在函数体里直接使用str.length就会引发ts报错因为number并没有length属性此时就可以通过断言来告诉ts我确定这个变量是某个类型可以放心使用。
语法一类型值
function myFun(str:string|number):number{if((stringstr).length){return (str as string).length}else{return str.toString().length}
}语法二值 as 类型
function myFun(str:string|number):number{if((str as string).length){console.log(0);return (str as string).length}else{console.log(1);return str.toString().length}
}
console.log(myFun(123)); //输出 1 3
console.log(myFun(123)); //输出 0 31.13 接口 接口是一系列抽象方法的声明是一些方法特征的集合这些方法都应该是抽象的需要由具体的类去实现然后第三方就可以通过这组抽象方法调用让具体的类执行具体的方法。
//通过接口约束的变量必须含有接口内指定的必选属性
//带问号的属性表示可有可无可以在变量初始化时传入也可以在初始化之后新增
interface IPerson {readonly id:numbername:stringsex:stringage?:number
}
let person:IPerson {id:1,name:1,sex:18,
}
person.age 61.14 函数类型 函数是一组一起执行一个任务的语句。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的但在逻辑上划分通常是根据每个函数执行一个特定的任务来进行的。 函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。
//函数类型就是一个只有形参和返回值的表达式他约束了函数的形参类型和返回值类型
interface Hanshu {(name:string,age?:number):void
}
let fun:Hanshu function (name) {console.log(name)return name
}
fun(我输出了)1.15 类类型 TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。TypeScript 支持面向对象的所有特性比如 类、接口等。 通过implements关键字去指定一个类的接口这个类必须按照接口的约定来定义自身属性同时接口和接口之间还可以通过extends 来继承其他接口的约束。
interface IsFly {fly():void
}
//声明一个类受IsFly接口约束
class bird implements IsFly{fly(){console.log(飞飞飞)}
}
let b new bird()
b.fly()
interface ISswim {swim():void
}
class fish implements ISswim{swim(){console.log(游泳)}
}
let f new fish()
f.swim()
//实现一个接口继承以上两个接口
interface flyandswim extends ISswim,IsFly{say():void
}
class me implements flyandswim{fly(){console.log(test)}swim(){console.log(test1)}say(){console.log(我的接口继承了其他两个接口)}
}
let a new me()
a.fly()
a.swim()
a.say()1.16 泛型 当我们在定义一个函数类接口等等东西的时候我们可能并不能预先知道他是一个什么类型而是需要在调用时动态的传入来确定类型。这个时候就会用到泛型。 可以简单的理解为函数的参数一样你传入的是什么类型那他就是什么类型。
//这就是一个泛型函数用一个T占位传入了string之后那用到了T的地方都会被约束为string类型
function fanxingT(name:T):T {console.log(name)return name
}
fanxingstring(泛型测试)//泛型约束如下会报错他不知道name的类型
function fanxingT(name:T):T {console.log(name)console.log(name.length);return name.length
}
fanxingstring(泛型测试) //报错//调用函数时传入的类型必须有length属性
function fanxingT extends {length:number}(name:T):any {console.log(name)console.log(name.length);return name.length
}
fanxingstring(泛型测试) //输出结果 泛型测试 42️⃣ 类
2.1 类的基本写法
// 定义类的同时会生成一个同名的接口
class Person {// 定义属性前应该先声明这个属性的类型也可以设置默认值// 这里的myName决定的是下面 this.myName 接收的参数类型myName:string 默认名称;constructor(name:string) {this.myName name}getName() {return this.myName}
}
let bnew Person(我是新名称);
console.log(b.getName()); //输出我是新名称// 上面的这个类相当于下面这个接口
interface Person {myName:string;getName: () string
}
let obj:Person {myName: ,getName() {return }
}2.2 类的继承
class Person {myName:stringconstructor(name:string) {this.myName name}
}
class Man extends Person {age:numberconstructor(name:string, age:number) {// super相当于调用父类的构造函数执行父的constructorsuper(name)this.age age}
}
let m new Man(xiaotian, 19)2.3 类的修饰符 在类里定义的属性默认的修饰符就是publicpublic修饰的属性或方法可以在类的内部、外部以及子类访问。
protected 受保护的类的里面子类可以访问外部不能访问private 私有的只能在该类里才能访问子类和类外面不能访问readonly 只读
class Person {// 在属性或方法前写修饰符,公共的只读的myNamepublic readonly myName:stringconstructor(name:string) {this.myName name}public getName() {return this.myName}
}2.4 类的静态属性
class Person {public readonly myName:stringstatic title:string 这是title的值 // 静态属性constructor(name:string) {this.myName name}public getName() {return this.myName}
}
// 只能通过类去访问/修改
console.log(Person.title);
Person.title 这是修改后title的值
console.log(Person.title);
let p new Person(xiaotian)
// console.log(p.title); // 报错静态属性不能通过实例对象访问2.5 抽象类 abstract 抽象类是普通类的描述制定一个类的规范给普通类去继承继承之后普通类里面就必须定义抽象类里面的抽象属性和抽象方法。抽象类里面的普通方法可以直接继承在普通类里面不用实现.
abstract class Person {// 抽象属性abstract name:string// 抽象方法abstract getName(): number// 也可以写普通方法的 ...getAge() {return 19}
}// 普通类
class Man extends Person {name:string 默认值getName() {return 1}
}let m new Man()
// let p new Person() // 报错抽象类不能被实例化2.6 书写接口给类使用
interface PerItf {name:string;age?:number; // 可以缺省getName: () void
}
// 实现接口
class M implements PerItf {name:string xiaotian;age:number 19;getName() {}
}
let man new M()3️⃣ 常用的工具类型
3.1 Record 如果你想用一组types类型的keys属性来构造一个对象类型那么Record是最好的工具类型。
type UserID string// 定义有效的用户信息类型
type UserInfo name|email|avatarUrlconst users: RecordUserID, UserInfo { uid1: {name:user1, email:user1163.com, avatarUrl:https://user1.com/avatar.png}, uid2: {name:user2, email:user1qq.com, avatarUrl:https://user2.com/avatar.png}, uid3: {name:user3, email:user1gmail.com, avatarUrl:https://user3.com/avatar.png}}当你想创建一个对象类型来存储用户的信息这里你可以使用Record工具类型来实现相同的目的。 如果你想要添加任何UserInfo类型中不存在的其他类型TypeScript就会给出编译错误。
3.2 Partial 当你希望使用现有类型但又希望所有属性都是可选的时候Partial工具类型则非常有用。
interface User{
id: string; name: string; slug: string; group: string; avatarUrl: string; about:string;}
const updateUser: PartialUser { about: 我是一个刚学编程的小菜鸡
}假设你想要更新用户的一个属性并且你已经有了一个具有所有必须属性的用户界面但你不想创建一个用于更新用户信息的单独页面。使用Partial实用程序你就可以动态创建具有所有可选属性的类型。
3.3 Required Required 工具类型与 Partial工具类型完全相反当你希望使用现有类型但有希望所有属性都是必需的它就非常的有用。 type User {firstName: string,lastName?: string
}const user1: RequiredUser {firstName: John,lastName: Doe //上面lastName虽然缺省了可以不用输入但是Required又要求必须输入了
}在某些情况下您可能希望强制一个对象具有所有必需的属性即使原始类型将其中一些属性定义为可选的。
3.4 Omit Omit工具类型可以通过省略另一个对象类型中的特定属性来创建对象类型。 假设你一个具有一些属性X、Y和Z的对象类型用户。如果您想创建一个没有属性Z的对象类型那么可以使用Omit工具类型。
type Product {X: string;Y: string;Z: string;
}type ProductWithoutZ OmitProduct, Z;3.5 Pick 使用Pick实用工具类型您可以从现有类型中选择属性来创建新类型。 当你有一个子组件它的一些属性与父组件相同时你可以通过选择这些属性来为子组件创建一个类型。 type ParentType {X: string;T: number;S: boolean;
}type ChildType PickParentType, X | S3.6 Exclude 当使用联合类型时通常希望只对某些成员使用联合类型而不是对所有成员那么你就可以使用Exclude实用程序来实现相同的效果。
type ReactionUnion A|B|C|D
type OnlyThumbsUnion ExcludeReactionUnion ,B|C|D--------------- 本 篇 --------------- --------------- 完 结 --------------- 优质资源分享
【总览】程序员前端、后端资源合集
【源码】程序员优质资源汇总
【博主推荐】JAVA SSM框架的后台管理系统附源码
【博主推荐】SpringBoot API接口对数据库增删改查,路由,TOKEN,WebSocket完整版(附源码)
【博主推荐】HTML制作一个美观的个人简介网页附源码
【博主推荐】html好看的个人简历网页版(附源码)
【博主推荐】html好看的个人主页(附源码)
【博主推荐】html好看的邀请函(附源码)
【博主推荐】html好看的音乐播放器(附源码)
【博主推荐】html好看的拼图小游戏(附源码)
【博主推荐】html好看的拼图验证码(附源码)
【博主推荐】html界面绘制SVG图形(附源码)
【博主推荐】html操作SVG图(附源码)
【博主推荐】html下拉框树形附好看的登录界面
【博主推荐】HTML5响应式手机WEB(附源码)
【博主推荐】大数据可视化大屏(源码下载)
【博主推荐】html引用百度地图定位闪烁弹框树形(附源码)
【博主推荐】HTML酷炫动画表白求爱界面(附源码) 关注博主 带你实现畅游前后端 加入社区 带你体验马航不孤单 神秘个人简介 带你体验不一样得介绍 酷炫邀请函 带你体验高大上得邀请 ① 提供云服务部署有自己的阿里云 ② 提供前端、后端、应用程序、H5、小程序、公众号等相关业务 如合作请联系我期待您的联系。 注本文撰写于CSDN平台,作者xcLeigh所有权归作者所有 https://blog.csdn.net/weixin_43151418如果相关下载没有跳转请查看这个地址相关链接没有跳转皆是抄袭本文转载请备注本文原地址。 亲码字不易动动小手欢迎 点赞 ➕ 收藏如 问题请留言评论博主看见后一定及时给您答复 原文地址https://blog.csdn.net/weixin_43151418/article/details/134707321防止抄袭原文地址不可删除
