TypeScript 基础语法及使用

文章目录

- - - 1、概述
    - 2、快速使用
    - 3、常用类型
    - 4、基础类型
    - 5、联合类型
    - 6、函数类型
    - 7、对象类型 & 接口interface

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中的数据类型之外，还提供了新的实用的数据类型。常见类型如下:

类型	例子	备注
字符串类型	string
数字类型	number	整数、小数
布尔类型	boolean	true、false
null/undefined类型	null / undefined	表示null和undefined本身，意义不大
任意类型	any	没有指定任何类型
数组类型	number[] / Array`<number>`
联合类型	number \| string	一个值可以是几种类型之一
字面量类型	‘left’ \| ‘center’ \| ‘right’	限制变量或参数的取值，只能是其中之一
函数类型	() => void	对函数的参数及返回值指定类型
对象类型	{…}	限定对象的结构（属性及方法）
复杂类型	interface接口
泛型	`<T>`

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 = 23console. 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）来描述对象的类型，达到复用的目的。