TypeScript初体验

一、TypeScript介绍

1.TypeScript是什么

TypeScript简称TS，是JavaScript的超集(JS有的TS都有)

TypeScript=Type+JavaScript(在js基础上,为js添加了类型支持)

TypeScript是微软开发的开源编程语言，可以在任何运行JavaScript的地方 运行

//TypeScript 代码 有明确的类型，即 number
let age1 number=18

//JavaScript 代码 无明确类型
let age2 = 18

2、TypeScript与JS区别

1.TS属于静态类型的编程语言，JS属于动态类型的编程语言

静态类型：编译期间做类型检查，动态类型：执行期间做类型检查

2.对于JS来说，等到代码真正去执行的时候，才能发现错误（晚）

3.TS在编译（代码执行之前）的时候就可以发现错误（早），可以减少找Bug、改Bug的时间

3、TS相较于JS优势

• 更早发现错误，减少找Bug、改Bug，提升开发效率
• 程序中任何位置都有代码提示，随时随地的安全感，增强了开发体验
• 强大的类型系统提升了代码的可维护性，使得重构代码更加容易
• 支持最新的ECMAScript语法，体验最新的语法，走在前端技术最前沿
• TS类型推断机制，不需要在代码中每个地方显示标注类型，享受时间的同时，降低了成本

二、 TypeScript使用

1.安装编译TS的工具包

Node.js、浏览器只认识JS代码，不认识TS代码，需要先将TS转为JS才可以运行

安装命令

npm i -g typescript

 检查版本命令

tsc -v

显示版本，即为安装成功 

 

 若出现tsc 不是内部或外部命令,可查看解决办法

2.编译并运行TS代码

执行步骤：创建TS文件--->编译TS----->执行TS

创建test.ts文件，输入简单内容

console.log("Hello！");

在终端运行 tsc test.ts  (test.ts为文件名)，会发现自动生成了一个编译好的js文件

 此时ts中的报错不用理会，因为和js中重名了，关闭js就可以了

注意：若给age1赋值非number类型会直接报错，也不可执行

运行test.js，结果如下图

因为在运行ts文件前需要先将ts文件编译成js文件再运行，想要直接运行ts文件可以安装 ts-node

npm i -g ts-node 

安装完成后，就可以通过 ts-node运行ts文件

 ts-node test.ts

其实 ts-node 是在内部完成ts文件的编译然后再执行的。

也可以通过安装 Code Runner 插件的方式直接运行

安装之后 就可以看到vsCode右上方多出一个运行的小按钮

 

点击按钮就可以直接运行了 

三、常用数据类型

1.类型注解

作用：为变量添加类型约束，约定了什么类型，就只能给变量赋值该类型，否则会报错

let age: number=20

2.常用基础类型

JS已有类型

• 原始类型  number/string/boolean/null/undefined/symbol
• 对象类型 object(数据/对象/函数等对象)

TS新增类型

• 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any

let age: number=12
let name: string='张三'
let a: boolean = true
let b: undefined=undefined
let c: null=null
let s: symbol=Symbol()


//数组类型两种写法

let numbers: number[]=[1,2,3]

let string: Array<string>=['a','b','c']

联合类型

数组中既有number 又有string  用 | 来表示有俩个或多个类型组成的的数组

 let arr: (number | string)[]=[1,2,3,'a'] 

//必须加（|），不然就表示只能为其中一种类型 这种写法就会报错

let arr: number | string[]=[1,2,3,'a'] 

类型别名 

当同一类型被多次使用时，可以通过类型别名，简化该类型的使用,用type关键字来创建类型别名

type CustomArray = (number | string)[]
let arr1: CustomArray = [1,'a',3,'b']
let arr2: CustomArray = ['x','y',3,]5

 函数类型

函数的类型实际上指函数参数和返回值的类型

为函数指定类型的两种形式

1.单独指定参数、返回值的类型

function add(num1:number,num2:number): number{
    return num1+num2
}

const add=(num1:number,num2:number): number=>{
    return num1+num2
}

//调用
add(1,2)

2.同时指定参数、返回值的类型

const add: (num1:number,num2:number)=> number =(num1,num2)=>{
return num1+num2
}

 这种形式只适用于函数表达式，如果函数没有返回值，那么函数的返回值类型为 void

function greet(name: string): void{
    console.log('Hello',name)
}