TypeScript 快速入门(基础篇) - HelloWorld开发者社区

点击“前端自学社区”查看更多精彩

TypeScript 快速入门(基础篇)

2020了,很多朋友疑问 TypeScript 有必要学吗
答案: 当然有必要。
现在Vue 3.0 今年预计更新了，底层采用TS 编写,
React 已经采用 TS 编写
Angular 很早就采用TS 了
前端三大巨头框架都已采用，可知TypeScript的重要性了。现在学习TypeScript 相当于站在了前端的前沿的道路，等Vue 3.0 出来,你会很快入手

什么是TypeScript

TypeScript 快速入门(基础篇)

TypeScript 是一门由微软开发的免费开源的编程语言。它是 JavaScript 的一个超集，TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。

选择TypeScript的理由

_√_TypeScript 增加了代码的可读性和可维护性;

_√_TypeScript 非常包容;

_√_TypeScript 拥有活跃的社区;

_x_有一定的学习成本,需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念;

_x_集成到构建流程需要一些工作量;

_x_短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本;

_x_集成到构建流程需要一些工作量;

TypeScript 快速入门

安装TS 环境

#npm install -g typescript

VSCode 配置自动编译文件

#1. 在目录下    tsc --init   自动生成 tsconfig.json    tsconfig.json 下 outdir 是输出的路径#2.  任务--- 运行任务   监视 tsconfig.json

基本语法

数组

定义使用

// 第一种定义方法   let 数组名：类型[] = []var arr:number[] = [1,2,3];console.log(arr);// 第二种定义方法    let 数组名：Array[类型] = []var newArr:Array<number> = [1,2,3];console.log(newArr)

元组

它表示已经元素的个数和元素类型的数组，各个元素类型可以不一样。

访问元组长度和元素

var strArr:[number,string,boolean] = [22,'测试',false]console.log(strArr.length)console.log(strArr[0])#它只能按类型的优先顺序输入内容，否则报错

枚举 enum

enum类型是对JavaScript标准数据类型的一个补充。

// 枚举enum info {student = '学生', teacher = '教师',  parent = '家长' };let names:string = '张三';var XiamoMing:info = Job.student;console.log(names+'是'+XiamoMing)   //张三是学生enum Color {red,black= 4,blue};const d:Color = Color.red;const s:Color = Color.blue;console.log(d); //默认输出下标索引  0console.log(s) // 5   , 可以修改下标索引# 定义# 枚举就是 可以方便的 读出某个属性是什么， 定义一次，可多次使用

任意类型 any

any 为任意类型，一般在获取dom 使用

// 任意类型const newArrs:any = ['测试不同数据 ',222,false]console.log(newArrs)# 输出结果为[ '测试不同数据 ', 222, false ]# 使用场景：当你不知道类型 或 一个对象 或数据 需要多个类型时，使用any

undefined 类型

let num:number | undefined ;console.log(num) // 输出 undefined， 但是不会报错let newNum:number | undefined = 33;console.log(newNum)  // 输出 33

never 类型

never 代表不存在的值类型，常用作为抛出异常或者无限循环的函数返回类型

# 应用场景    #1. 抛错误    const errDate = (message:string): never => {        throw new Error(message)    }    #2.  死循环    const date_for = (): never => {        while(true) {}    }    # never 类型是任意类型的子类型，没有类型是never 的子类型别的类型不能赋值给never类型， 而 never 类型可以赋值给任意类型

void 类型

void 为函数没有类型，一般用在没有返回值的函数

# 如果方法类型为number， 则必须返回内容， 内容且必须为数字function add():number{    return 2323;}# 如果方法类型为void，不需要返回内容function getAdd():void{    console.log('测试')}# 如果方法类型为any，则可以返回任意类型function getAny():any{    return 999 + 'Hello TypeScript'}const aa = getAny()console.log(aa)//999 'Hello TypeScript'

类型检测

类型推断

变量的声明和初始化在同一行时，可以省去类型的声明

const names = 'XiaoMing'   此时names的变量类型为 stringnames = 22  //  TS 已经推断出了names 类型为string，而不能赋值为 其它类型console.log(names)

联合类型

取值可以分为多种类型其中的一种

let response: object | string  = receive() //  receive() 返回的值可以是object 或者string

TS 中的函数

function 使用

#方法定义 传递参数function getNum(str1:any,age:number):any{    console.log(str1+'的年龄为'+age)}getNum('张三',22)//输出结果为：张三的年龄为22# 在TS 中 仍然可以使用箭头函数var ss = (str2:string,hobby:string) =>{    console.log(str2+"的爱好是"+hobby)}ss('小红','踢毽子')//输出结果为：小红的爱好是踢毽子

function 参数

可选参数格式：

1.函数名（变量名？：类型）:类型 {}

2.使用场景：在使用的时候，不知道是否应该传递该参数，就可以使用可选参数

默认参数格式：

1.函数名 (变量名：类型 = 默认值) {}

使用场景：如果在调用函数时，不需要传递其它参数，直接调用函数即可，如果想修改默认参数，可以参数顺序位置修改即可

function 默认参数

function getInfo(name:string = '张三',age:number = 22):void {    console.log(`姓名为${name},年龄为${age}`)}// 不传递参数，使用默认值时调用getInfo()//姓名为张三,年龄为22//如果函数有多个默认参数时，想修改其中的一个，其它对应的位置改为undefined即可getInfo(undefined,33)//姓名为张三,年龄为33getInfo('老王',55)//姓名为老王,年龄为55

function可选参数

// 可选参数function getDate(version:number, names?:string):void {    if (names !== undefined) {        console.log(`版本号为${version},项目名为${names}`)    } else {        console.log(`版本号为${version}`)    }  }getDate(0.2)//版本号为0.2

function 剩余参数

剩余参数要求：

只能定义一个

定义为数组

只能定义在参数的最后一位

//剩余参数function add(num1:number,num2:number,...numArr:number[]){    let initCount:number =  num1 + num2    for (const item of numArr) {        initCount+= item    }    console.log('累加为='+initCount)}add(1,2,3,4,5,6) //累加为=21

TypeScript 快速入门(基础篇)