TS初体验

一、TS初体验

1.1.什么是Typescript?

1.Typescript 是JavaScript 的一个超集，支持ECMAScript 6标准。 2.Typescript 由微软开发的自由和开源的编程语言。 3.TypeScript 设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上 4.TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

1.2. JS 与TS的区别

1. TypeScript是JavaScript 的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。 2TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译。

1.3.搭建开发环境

1.安装VSCode

2.安装Node.js：使用命令node -v来检测node.js的版本

3.安装TypeScript编译器：npm i typescript -g

4.tsc --init 生成配置文件

5.使用tsc命令来转换TS为JS tsc 文件名

6.自动编译 tsc --watch

1.4. ts初体验

function text(msg:string) {
    console.log(msg.length)
}
text("随机数")
text("嗯嗯嗯")
使用export default{}//可以避免作用域污染

二、TS基础数据类型

2.1.基础数据类型

数值类型、布尔类型、字符串类型

export default{}
// 数值型
let num:Number;
num=100
// num ="11"
num=3.14
console.log(num)
// 布尔类型
let flage:boolean;
flage=true
flage=false
​
// 字符串
let beauty:String;
beauty="张三";
let str=`我的律师是${beauty}`
console.log(str)

2.2.数组

数组分为：数组的基本使用、联合类型、任意类型

联合类型可以同时写多个类型的

export default{}
// 数组的基本使用
// 方式一
let beautyArr:string[];
beautyArr=["张三","李四","王五","周六"]
// beautyArr=["张三","李四","王五","周六",100]//报错
console.log(beautyArr)
// 方法二
let numArr:Array<number>;
numArr=[1,2,3,45,6]
// numArr=[1,2,3,45,6,"sss"]//报错
​
// 联合类型
let myBeauty:(number|string|boolean)[]
myBeauty=[12,"张三",true,10,"李四"]
console.log(myBeauty)
// 任意类型
let test:any[]
test=[12,"张三",true,10,"李四"]

2.3.元组

1.元祖类型Tuple

2. TS中的元祖类型其实就是数组类型的扩展

3.元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同

export default{}
let tup:[string,number,boolean]
tup=["张三",15,true]
// tup=["张三",true,15]//报错
// tup=["张三",15,true,"单词"]//超过长度报错
console.log(tup)
​

2.4. any和void

1. any表示任意类型，当我们不清楚某个值的具体类型时候我们就可以使用any

2.在TS中任何数据类型的值都可以赋值给any类型

使用场景一、变量的值会动态改变时，比如来自用户输入，任意值类型可以让这些变量跳过编译阶段的类型检查

let temp:any
temp="lksm"
temp=15
temp=true

使用场景二、 储存各种类型数据的数组时

let arr:any[]=["张三",18,true]
console.log(arr[0])

void类型

1.从某种程度上来讲，vo