Electron+Ts+Vue+Vite桌面应用系列：TypeScript常用语法详解

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/134707321

---

Electron+Ts+Vue+Vite桌面应用系列 ：这个系列包括了从桌面应用环境搭建 到 完整项目运行的全过程。展现一个完整的窗体应用程序，包括对数据的增删改查，各种表单的应用，各种路由的应用，登录注册的实现，窗体的放大缩小，列表的应用，内存的应用等。本篇介绍：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:Array<number> = [1,2,3]
console.log(arr3)
let arr4:Array<object> = [{},{},{}]
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.xiaogang

1.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 表示非原始类型，也就是除 number，string，boolean之外的类型,并非只是对象类型。

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 = 1
 test2 = '1'
 test2 = [1]
 test2 = null
 test2 = false

1.12 类型断言

    当某个变量可能是多个类型时，此时在使用这个变量的时候可能会发生一些ts的报错。
    比如下面例子中，str可能是string类型或者number类型，那么在函数体里直接使用str.length就会引发ts报错，因为number并没有length属性，此时就可以通过断言来告诉ts我确定这个变量是某个类型，可以放心使用。

• 语法一：<类型>值

function myFun(str:string|number):number{
    if((<string>str).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 3

1.13 接口

    接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

//通过接口约束的变量必须含有接口内指定的必选属性，
//带问号的属性表示可有可无，可以在变量初始化时传入也可以在初始化之后新增
interface IPerson {
   readonly id:number
    name:string
    sex:string
    age?:number
}
let person:IPerson = {
    id:1,
    name:1+'',
    sex:'18',
}
person.age = 6

1.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 fanxing<T>(name:T):T {
    console.log(name)
    return name
}
fanxing<string>('泛型测试')

//泛型约束，如下会报错，他不知道name的类型
function fanxing<T>(name:T):T {
    console.log(name)
    console.log(name.length);
    return name.length
}
fanxing<string>('泛型测试')  //报错

//调用函数时传入的类型必须有length属性
function fanxing<T extends {length:number}>(name:T):any {
    console.log(name)
    console.log(name.length);
    return name.length
}
fanxing<string>('泛型测试')  //输出结果 "泛型测试"  4

2️⃣ 类

2.1 类的基本写法

// 定义类的同时，会生成一个同名的接口
class Person {
    // 定义属性前，应该先声明这个属性的类型，也可以设置默认值
  	// 这里的myName决定的是下面 this.myName 接收的参数类型
    myName:string = "默认名称";
    constructor(name:string) {
        this.myName = name
    }
    getName() {
        return this.myName
    }
}
let b=new Person("我是新名称");
console.log(b.getName());  //输出我是新名称

// 上面的这个类，相当于下面这个接口
interface Person {
    myName:string;
    getName: () => string
}
let obj:Person = {
    myName: '',
    getName() {
        return ''
    }
}

2.2 类的继承

class Person {
    myName:string
    constructor(name:string) {
        this.myName = name
    }
}
class Man extends Person {
    age:number
    constructor(name:string, age:number) {
        // super相当于调用父类的构造函数（执行父的constructor）
        super(name)
        this.age = age
    }
}
let m = new Man('xiaotian', 19)

2.3 类的修饰符

    在类里定义的属性，默认的修饰符就是public，public修饰的属性或方法可以在类的内部、外部以及子类访问。

• protected 受保护的，类的里面，子类可以访问，外部不能访问
• private 私有的，只能在该类里才能访问，子类和类外面不能访问
• readonly 只读

class Person {
  	// 在属性或方法前写修饰符,公共的，只读的myName
    public readonly myName:string
    constructor(name:string) {
        this.myName = name
    }
    public getName() {
        return this.myName
    }
}

2.4 类的静态属性

class Person {
    public readonly myName:string
    static 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"|"avatarUrl"const users: Record<UserID, UserInfo> = >{  "uid1": {"name":"user1", "email":"user1@163.com", "avatarUrl":"https://user1.com/avatar.png"},  "uid2": {"name":"user2", "email":"user1@qq.com", "avatarUrl":"https://user2.com/avatar.png"},  "uid3": {"name":"user3", "email":"user1@gmail.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: Partial<User> = {  
	about: "我是一个刚学编程的小菜鸡！"
}

    假设你想要更新用户的一个属性，并且你已经有了一个具有所有必须属性的用户界面，但你不想创建一个用于更新用户信息的单独页面。使用Partial实用程序，你就可以动态创建具有所有可选属性的类型。

3.3 Required

    Required 工具类型与 Partial工具类型完全相反，当你希望使用现有类型，但有希望所有属性都是必需的，它就非常的有用。

type User = {
    firstName: string,
    lastName?: string
}

const user1: Required<User> = {
    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 = Omit<Product, "Z">;

3.5 Pick

    使用Pick实用工具类型，您可以从现有类型中选择属性来创建新类型。
    当你有一个子组件，它的一些属性与父组件相同时，你可以通过选择这些属性来为子组件创建一个类型。

type ParentType = {
  X: string;
  T: number;
  S: boolean;
}

type ChildType = Pick<ParentType, "X" | "S">

3.6 Exclude

    当使用联合类型时，通常希望只对某些成员使用联合类型，而不是对所有成员，那么你就可以使用Exclude实用程序来实现相同的效果。

type ReactionUnion ="A"|"B"|"C"|"D"
type OnlyThumbsUnion = Exclude<ReactionUnion ,"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（防止抄袭，原文地址不可删除）