前端 Typescript 入门

技术分享 2年前 (2024-03-30) 0 999+

关注

前端 Typescript 入门

Ant design vue4.x 基于 vue3，示例默认是 TypeScript。比如 table 组件管理。

vue3 官网介绍也使用了 TypeScript，例如：响应式 API：核心

华为的鸿蒙OS（HarmonyOS）开发中也可以使用 TypeScript

本篇目的用于对 TS 进行扫盲

Tip：ts 路线图

ts 是什么

TS是TypeScript的缩写，由微软开发的一种开源的编程语言

以前官网说“ts 是 js 超级”，现在改为： TypeScript是具有类型语法的JavaScript。

目前 TypeScript 5.4 已经发布（2024-03） —— ts 官网

Tip：ts缺点：开发更费麻烦，要多写东西了，看个人取舍。

环境

基于笔者博文《vue3 入门》，就像这样：

<template>   <section>   </section> </template>  <script  lang="ts" setup name="App"> // ts </script>  <style> </style>

也可以直接在ts在线运行环境进行。

推导类型和显示注解类型

TS = 类型 + javascript

ts 编译过程：

TypeScript源码 -> TypeScript AST
类型检查器检查AST
TypeScript AST -> JavaScript 源码

显示注解类型，语法：value:type 告诉类型检查器，这个 value 类型是 type。请看示例：

<template>   <p>{{ a }}</p>   <p>{{ b }}</p>   <p>{{ c }}</p> </template>  <script  lang="ts" setup name="App"> // 显示注解类型 let a: number = 1 // a 是数字 let b: string = 'hello' // b 是字符串 let c: boolean[] = [true, false]; // 布尔类型数组 </script>

如果将 a 写成 let a: number = '3'，vscode 中 a 就会出现红色波浪，移上去会看到提示：不能将类型“string”分配给类型“number”。

如果想让 typescript 推到类型，就去掉注解，让 ts 自动推导。就像这样：

// 推导类型 let a = 1 // a 是数字 let b = 'hello' // b 是字符串 let c = [true, false]; // 布尔类型数组

去掉注解后，类型并没有变。并且如果尝试修改 a 的类型，ts 也会报错。就像这样：

let a = 1 // a 是数字  // 尝试替换成字符串，vscode 会提示：不能将类型“boolean”分配给类型“number”。 a = true

Tip：有人说“最好让 ts 推导类型，少数情况才需要显示注解类型”。

另外虽然大量错误 ts 在编译时无法捕获，例如堆栈溢出、网络断连，这些属于运行时异常。ts 能做的是将 js 运行时的报错提到编译时。比如以下代码：

const obj = { width: 10, height: 15 }; // 提示 heigth 属性写错了 const area = obj.width * obj.heigth;  let a = 1 + 2 let b = a + 3 // 鼠标以上 c，可以看到 c 对应的类型 let c = {   apple: a,   banana: b }

类型断言

请看示例：

let arr = [1, 2, 3] // r 为3 const r = arr.find(item => item > 2)  // “r”可能为“未定义”。ts(18048) // const r: number | undefined r * 5 // {1}

行 {1} 处的 r 会错误提示，说 r 可能会是 undefined。

要解决这个问题，可以使用类型断言：用来告诉编译器一个值的具体类型，当开发者比编译器更了解某个值的具体类型时，可以使用类型断言来告诉编译器应该将该值视为特定的类型。

类型断言有两种形式，分别是尖括号语法和 as 语法。这里说一下 as 语法：value as type。请看示例：

let someValue: any = "this is a string"; let strLength: number = (someValue as string).length;

上述示例改成这样，r 就不会报错了。

// 告诉编译器，r 一定是一个 number const r = arr.find(item => item > 2) as number  r * 5

Tip：由于需要人为干预，所以使用起来要谨慎

基础类型

js 基本类型大概有这些：

let num1 = 10;  let str1 = 'Hello';  let isTrue = true;  let undefinedVar;  let nullVar = null;  const symbol1 = Symbol('description');  const bigIntNum = 9007199254740991n;  let notANumber = NaN; let infinite = Infinity;  console.log(typeof num1); // number console.log(typeof str1,); // string console.log(typeof isTrue); // boolean console.log(typeof undefinedVar); // undefined console.log(typeof nullVar); // object console.log(typeof symbol1); // symbol console.log(typeof bigIntNum); // bigint console.log(typeof notANumber); // number console.log(typeof infinite); // number

ts 中基本类型有：

// let v1: String = 'a' - 大写 String 也可以 let v1: string = 'a' let v2: number = 1 let v3: boolean = true let v4: null = null let v5: undefined = undefined  // 字符串或者null let v6: string | null = null // 错误：不能将类型“5”分配给类型“1 | 2 | 3” let v7: 1 | 2 | 3 = 5 // 正确 let v8: 1 | 2 | 3 = 2

联合类型

数组

ts 数组有两种方法，看个人喜好即可。请看示例：

 // 方式一 // 定义一个由数字组成的数组 let arr1: number[] = [2, 3, 4]  // 报错：不能将类型“string”分配给类型“number” let arr2: number[] = [2, 3, 4, '']  // 方式二 let arr3: Array<string> = ['a', 'b', 'c']  // 报错：不能将类型“number”分配给类型“string”。 let arr4: Array<string> = ['a', 'b', 'c', 4]

元组

在 TypeScript 中，元组（Tuple）是一种特殊的数组类型，它允许您指定一个固定长度和对应类型的数组

let arr5:[string, number, string] = ['a', 1, 'b']  // 报错：不能将类型“[string, number]”分配给类型“[string, number, string]”。源具有 2 个元素，但目标需要 3 个。 let arr6:[string, number, string] = ['a', 1]  // 正确 arr6[0] = 'a2' // 错误：不能将类型“number”分配给类型“string”。 arr6[0] = 1  // 第三个添加 ? 表明可选，这样只传入 2 个数也不会报错 let arr7:[string, number, string?] = ['a', 1, 'b']

枚举

枚举需要使用关键字 enum。请看示例：

// 就像定义对象，不过不需要 = enum TestEnum {   a,   b,   c, } // 1 console.log(TestEnum.b); // b console.log(TestEnum[1]); // string console.log(typeof TestEnum[1]);

ts 可以自动为枚举类型中的各成员推导对应数字。上面示例推导结果：

enum TestEnum {   a = 0,   b = 1,   c = 2, }

也可以自己手动设置：

enum TestEnum2 {   a = 3,   b = 13,   c = 23, } // 13 console.log(TestEnum2.b);

比如这个，c 就是 b 的下一个数字：

enum TestEnum3 {   a,   b = 13,   c, } // 14 console.log(TestEnum3.c);

使用场景：比如你之前根据订单状态写了如下代码，可以用枚举来增加可读性。

if(obj.state === 0){  }else if(obj.state === 1){  }else if(obj.state === 2){  }else if(obj.state === 3){  }

// 优化后 enum 订单状态{   取消,   上线,   发送,   退回,   ... }  if(obj.state === 订单状态.取消){  }else if(obj.state === 订单状态.上线){  }else if(obj.state === 订单状态.发送){  }else if(obj.state === 订单状态.退回){  }

函数

定义一个函数，参数报错：

// 参数 a 和 b报错。例如：a - 参数“a”隐式具有“any”类型。 function fn1(a, b){   return a + b }

定义参数类型：

function fn2(a: number, b : number){   return a + b }

定义参数 b 可选，返回值是 number类型。请看示例：

// b是可选。 // 必选的放左侧，可选的放后侧 function fn5(a: number, b?: number): number{   return 10 } // 应有 1-2 个参数，但获得 0 个。 fn5()

定义参数 a 的默认值，rest是一个字符串数组：

// a 有一个默认值 10 function fn7(a = 10, b?: number, ...rest:string[]): number{   return 10 }  fn7(1,2, 'a', 'b')

void

通常用于函数，表示没有 return 的函数。

function fn3(a: number, b : number):void{   // 不能将类型“number”分配给类型“void”。   return a + b }  function fn4(a: number, b : number): void{    }

接口

通常用于对象的定义。请看示例：

interface Person{   name: string,   age: number }  const p: Person = {   name: 'peng',   age: 18 }  // 报错：类型 "{ name: string; }" 中缺少属性 "age"，但类型 "Person" 中需要该属性。ts(2741) const p2: Person = {   name: 'peng', }

类型别名

比如定义了一个变量 v1，其类型可以是 number 或 string，但是好多地方都是这个类型:

let v1: number | string = 3

我们可以通过 type 定义一个别名。就像这样：

// 定义别名 Message type Message = number | string let v2: Message = 'hello' // 报错：不能将类型“boolean”分配给类型“Message” let v3: Message = true

泛型

比如定义如下一个处理 number 的函数：

function fn1(a: number, b:number): number[]{   return [a, b] }

假如以后想把这个函数作为一个通用函数，除了可以处理 number，还可以处理 string 等其他类型，比如：

function fn1(a: string, b:string): string[]{   return [a, b] }

a: string | number 又交叉了。就像这样：

function fn1(a: string | number, b:string | number): string[]{   return [a, b] }

这里可以使用泛型，请看示例：

// 定义一个变量，比如 T function fn1<T>(a: T, b:T): T[]{   return [a, b] }  fn1<number>(11, 11) fn1<string>('a', 'a') // 正确，ts 会自动推导 fn1('a', 'a')

再看一个泛型示例：

// 参数 arr 是 T 类型的数组 // 返回 T 类型或 undefined function firstElement<T>(arr: T[]): T | undefined {     return arr[0]; }  firstElement(['a', 'b'])

函数重载

java 中函数重载是定义多个方法，调用时根据参数类型和数量的不同执行不同的方法。例如下面定义两个 add：

// 方法重载示例：两个参数的相加 public int add(int a, int b) {     return a + b; }  // 方法重载示例：三个参数的相加 public int add(int a, int b, int c) {     return a + b + c; }

ts 这里重载和 java 中的有些不同，可以称之为函数重载申明。

比如首先我们写了一个数字相加或字符串相加的方法：

// 数字相加 // 字符串相加 function combine(x: number | string, y: number | string): number | string {   if (typeof x === 'number' && typeof y === 'number') {     return x + y;   } else if (typeof x === 'string' && typeof y === 'string') {     return x + y;   }   // 处理其他情况   return 'Invalid input'; }  console.log(combine(1, 2)); // 输出：3 console.log(combine('hello', 'world')); // 输出：helloworld

这里有两个问题：

// 问题一：鼠标移动到 combine 显示： // function combine(x: number | string, y: number | string): number | string console.log(combine(1, 2)); console.log(combine('hello', 'world'));  // 问题二：传入 number和 string 不合法，但不报错。鼠标移动到 combine 显示： // function combine(x: number | string, y: number | string): number | string console.log(combine(1, 'two')); // 输出：Invalid input

现在加上函数重载申明，就能解决上述两个问题。请看示例：

// 函数重载 function combine(x: number, y: number): number; // 变量名可以不是x、y function combine(x2: string, y2: string): string; function combine(x: number | string, y: number | string): number | string {   // 不变 }  // function combine(x: number, y: number): number (+1 overload) console.log(combine(1, 2)); // function combine(x: string, y: string): string (+1 overload) console.log(combine('hello', 'world'));  // 报错：没有与此调用匹配的重载。 //   第 1 个重载(共 2 个)，“(x: number, y: number): number”，出现以下错误。 //   第 2 个重载(共 2 个)，“(x: string, y: string): string”，出现以下错误。ts(2769) console.log(combine(1, 'two'))

接口继承

直接看示例：

interface Person{   name: string,   age: number }  // Student 继承 Person interface Student extends Person{   school: string }  // 提示p缺少3个属性 // 类型“{}”缺少类型“Student”中的以下属性: school, name, agets(2739) const p: Student = {  }

Student 继承 Person，有了3个属性。

类的修饰符

类的修饰符有：public、private、protected、static、readonly...。用法请看下文：

比如有这样一段正常的js代码：

class People{     constructor(name){         this.name =name;     }     // 不需要逗号     sayName(){         console.log(this.name)     } } let people = new People('aaron') people.sayName() // aaron

放在 ts（比如 ts在线运行环境）中会报错如下：

Parameter 'name' implicitly has an 'any' type. Property 'name' does not exist on type 'People'. Property 'name' does not exist on type 'People'.

需要修改如下两处即可消除所有错误：

 class People{ -    constructor(name){ +    // 消除ts报错：类型“People”上不存在属性“name” +    name: string +    constructor(name: string){                 this.name =name;      }      // 不需要逗号

其中 name: string 的作用：声明 People 类有个必填属性。实例化 People 类的时候，必须传入一个 string 类型的 name 属性。

接着加一个可选属性 age：

  // 通过?将 age 改成可选。解决：属性“age”没有初始化表达式，且未在构造函数中明确赋值。   age?: number

可以设置默认值：

  // 根据默认值推断类型，而且是必选属性   money = 100

Tip：稍后我们会看到对应的 js 是什么样子。

属性默认是 public，自身可以用，继承的子类中也可以使用。public 还可以这么写，效果和上例等价：

    constructor(name){ -    name: string -    constructor(name: string){        +    constructor(public name: string){                 this.name =name;      }

另外还有 private 表明只能在类中使用。protected 只能在类和子类中使用。请看示例：

class People{     ...     // 属性默认是 public，自身可以用、继承也能用     public money2 = 200     private money3 = 300     protected money4 = 400     constructor(name: string){         this.name =name;     }     sayName(){         console.log(this.name)     } } let people = new People('aaron')  console.log(people.money);  // 属性“money3”为私有属性，只能在类“People”中访问。ts(2341) console.log('people.money3: ', people.money3); // 300 // 属性“money4”受保护，只能在类“People”及其子类中访问。ts(2445) console.log('people.money4: ', people.money4); // 400

注：虽然 vscode 报错，但浏览器控制台还是输出了。或许 ts 只是静态编译，对应的js 没有做特殊处理，比如 private 声明 money4，实际上并没有实现。请看ts在线运行环境 ts 对应的 js：

// ts class People{     name: string     age?: number     money = 100     public money2 = 200     private money3 = 300     protected money4 = 400     constructor(name: string){         this.name =name;     }     sayName(){         console.log(this.name)     } } let people = new People('aaron')  console.log('people.money3: ', people.money3); console.log('people.money4: ', people.money4);

// 对应的js "use strict"; class People {     constructor(name) {         this.money = 100;         this.money2 = 200;         this.money3 = 300;         this.money4 = 400;         this.name = name;     }     sayName() {         console.log(this.name);     } } let people = new People('aaron'); console.log('people.money3: ', people.money3); console.log('people.money4: ', people.money4);

js 中静态属性使用如下：

    protected money4 = 400     // 静态属性 +   static flag = 110  console.log('People.flag: ', People.flag);

例如将静态属性设置成私有，只能在类中使用。请看示例：

  // 静态属性   private static flag = 110  // 报错：属性“flag”为私有属性，只能在类“People”中访问。 console.log('People.flag: ', People.flag);

多个修饰符可以一起使用，但有时候需要注意顺序，vscode 也会给出提示。就像这样：

// “static”修饰符必须位于“readonly”修饰符之前。ts(1029) readonly static flag = 110

比如定义一个静态只读属性：

  static readonly flag2 = 110  // 报错：无法为“flag2”赋值，因为它是只读属性。ts(2540) People.flag2 = 111

类的存取器

感觉就是 js 的 get 和 set。比如下面就是一个 js 的get、set示例：

class People {     constructor(name) {         this.name = name;     }     get name() {         return 'apple';     }     set name(v) {         console.log('set', v);     } } let people = new People('aaron') // set aaron  people.name = 'jia' // set jia console.log(people.name); // apple

对应 ts 中的存取器就是这样：

class People{     constructor(name: string){         this.name = name;     }     get name(){       return 'apple'     }     set name(v){       console.log('set', v)     } } let people = new People('aaron') // set aaron  people.name = 'jia' // set jia console.log(people.name); // apple

注：这个例子很可能会栈溢出，就像这样：

class People{     constructor(name: string){         this.name = name;     }     get name(){       return 'apple'     }     set name(v){       console.log('v: ', v);       // 栈溢出       // 报错：VM47:10 Uncaught RangeError: Maximum call stack size exceeded       this.name = v     } } let people = new People('aaron')

所以可以这么写：

class People {     private _name: string = ''        get name(): string{       return 'peng'     }        set name(val: string){       this._name = val     }   }   let people = new People()      people.name    // 报错：属性“_name”为私有属性，只能在类“People”中访问。ts(2341)   people._name

不写类型，ts 也会自动推导，比如去除类型后也可以。就像这样：

// 自动推导类型 class People {     private _name = 'peng'        get name(){       return 'peng'     }        set name(val){       this._name = val     }   } let people = new People()

抽象类

抽象类（abstract），不允许被实例化，抽象属性和抽象方法必须被子类实现。更像一个规范。请看示例

abstract class People {   // 可以有抽象属性和方法   abstract name: string   abstract eat(): void   // 也可以有普通属性和方法   say() {     console.log('hello: ' + this.name)   } }  // 如果不实现 name 和 eat 方法则报错 class Student extends People{   name: string = '学生'    // 既然没报错 - 抽象类中返回是 void，这里返回string   eat(){     return 'eat apple'   } }  const s1 = new Student() s1.say()  console.log(s1.eat()); // eat apple

抽象类定义了一个抽象属性、一个抽象方法，一个具体方法。子类必须实现抽象属性和抽象方法，子类实例可以直接访问抽象类中具体的方法。请看对应的 js 代码，你就能很明白。

class People {     say() {         console.log('hello: ' + this.name);     } } class Student extends People {     constructor() {         super(...arguments);         this.name = '学生';     }     eat() {         return 'eat apple';     } } const s1 = new Student(); s1.say(); console.log(s1.eat());

类实现接口

前面我们用接口定义了一个类型：

interface Person{   name: string,   age: number }  const p: Person = {   name: 'peng',   age: 18 }

抽象类如果只写抽象方法和属性，那么就和接口很相同了。另外接口用 interface 关键字定义，子类可以实现 implements（注意这个单词是复数）多个接口（不能同时继承多个）。请看示例：

interface People {   name: string   eat(): void }  interface A{   age: number }  // 实现两个接口，所有属性和方法都需要实现 class Student implements People, A{   name: string = '学生'   age = 100   // 既然没报错   eat(){     return 'eat apple'   } }  const s1 = new Student()  console.log(s1.eat()); // eat apple

泛型类

使用类时，除了可以使用接口来规范行为，还可以将类和泛型结合，称为泛型类。

比如现在 deal 是处理 string 的方法：

class People {     value: string;      constructor(value: string) {         this.value = value;     }      deal(): string {         return this.value;     } }  const p1 = new People('peng') p1.deal()

后面我需要 deal 又能处理 number，这样就可以使用泛型。就像这样：

class People<T> {     value: T;      constructor(value: T) {         this.value = value;     }      deal(): T {         return this.value;     } }  const p1 = new People('peng') p1.deal()  const p2 = new People(18) p2.deal()

多个泛型写法如下：

class Pair<T, U> {     private first: T;     private second: U;      constructor(first: T, second: U) {         this.first = first;         this.second = second;     }      public getFirst(): T {         return this.first;     }      public getSecond(): U {         return this.second;     } }  // 使用带有多个泛型类型参数的泛型类 let pair1 = new Pair<number, string>(1, "apple"); console.log(pair1.getFirst()); // 1 console.log(pair1.getSecond()); // apple  let pair2 = new Pair<string, boolean>("banana", true); console.log(pair2.getFirst()); // banana console.log(pair2.getSecond()); // true