TypeScript 基础语法及使用

1、概述

TypeScript（简称 TS）是JavaScript的超集（继承了JS全部语法）是微软开发的开源编程语言，可以在任何运行JavaScript的地方运行，TypeScript = Type + JavaScript。

简单说，就是在JS的基础上，为JS添加了类型支持。

类型注解：是指在变量、函数等定义的时候，使用特定语法（: type）来指定其类型，并在代码中限制只能接收特定类型的值。

// JavaScript
let uname = 'tom';
let count = '10';

// TypeScript
let uname: string = 'tom';
let count: number = 10;

为什么要用TypeScript ?

• 有利于发现错误（编写时）

• 有利于代码的静态分析

• 便于语法提示和自动补全

• 利于项目维护

2、快速使用

• 准备：

• 安装TS官方提供的编译器(只需要做一次即可)

  npm install -g typescript 
  

• 编码：

  • 定义ts文件，定义变量，指定类型注解

  • 编译ts文件，测试程序运行

    

    编译命令：tsc demo.ts

    

    编译之后的文件为：demo.js

• TS代码编译目标版本为es3(比较低)，可以通过参数 –target 指定编译的目标版本。如：es5、es6、es2016… esnext

3、常用类型

TS中除了支持JS中的数据类型之外，还提供了新的实用的数据类型。 常见类型如下:

4、基础类型

基础类型：string，number，boolean，null，undefined，any，数组。

<script setup lang="ts">
    let uname: string = 'Tom';
    let count: number = 100;
    let flag: boolean = false;
    let abc: any = 192;
    console.log(`${uname}-${count}-${flag}-${abc}`)
    console.log('----------------------------')
    //数组类型
    let arr: number[] = [1,2,3,4,5,67]
    let arr2: Array<number> = [5,6,7,8];
    console.log(arr)
    console.log(arr2)
    let arr3: (number | string)[] = [2,3,4,'heima','chuanzhi',555];
    let flag2: (boolean | number)= true;
    flag2 = 23
    console. log(arr3)
    console.log(flag2)
    console.log('----------------------------')

</script>

<template>

hello 路由

</template>

原则上，不推荐使用any!!! 这会让TypeScript又回到JavaScript(失去TS类型保护的优势)。

5、联合类型

联合类型：是指由两个或多个其他类型组成的类型，表示可以是其中的任意一种。

写法：类型1 | 类型2

let arr1: (string | number) = ['A','B','C',1,5,10]

let flag: (boolean | number) = true;
flag = 0;
flag = 1;
flag = false;

TS中的联合类型中指定的多种类型之间使用 | 分隔，建议使用()括起来。

• 类型别名：相当于一种自定义类型，为任意类型起别名。

• 使用场景：当同一类型（复杂）别多次使用时，可以通过类型别名，简化该类型（复杂）的书写。

• 定义语法：type customType = 指定类型

类型别名type，是可以为任意类型指定别名的。

tyep strNumber = (string | number)[];
let arr1: strNumArr = ['A','B','C',1,5,10]
let arr2: strNumArr = ['A','D','C',5,10]

6、函数类型

• 函数类型实际上指的是：函数的参数及返回值的类型

• 语法一：单独指定参数、返回值类型

  

  与JS不同，TS中函数调用时传入的参数个数必须与函数定义时参数个数一致。

• 语法二：书写完成函数类型（同时指定参数、返回值类型）(了解,不常用)

  

• 可选参数：在TS里我们可以在参数后使用 问号？实现可选参数的功能。而且可选参数只能出现在参数列表的最后。

  

  如果函数没有返回值，则函数的返回值类型为：void

7、对象类型 & 接口interface

对象类型

TS中的对象类型就是来描述对应的结构的（有什么类型的属性和方法）

• 说明：
  • 直接使用{}来描述对象的结构。属性采用 属性名:类型 的形式；方法采用 方法名():返回值类型 的形式。
  • 如果方法有参数，就在方法名后面的小括号中指定参数类型（如：say(content:string):void）。
  • 在一行中指定多个属性类型时，可以使用 逗号/分号 来分割。
  • 方法的类型，也可以使用箭头函数形式，比如：say:() => void。
  • 对象的属性或方法，也可以是可选的，此时就可以声明可选属性/方法，使用 ？（问号）来表示。

接口interface

当一个对象类型被多次使用时，我们可以使用 接口（interface）来描述对象的类型，达到 复用 的目的。

• 说明：
  • 接口使用 interface 关键字来声明，接口名称可以是任意合法的变量名称。
  • 接口中定义的属性或方法，结尾可以使用逗号(,)/分号(;)分隔；如果每一行只有一个属性，后面也可以不写分号（;）。

Interface（接口） 与 type（类型别名）对比

• 相同点：都可以给对象指定类型。

• 不同点：

  • interface（接口），只能为对象指定类型。

  • type（类型别名），可以为任意类型指定别名。