导读：编译TypeScript 浏览器不能直接运行TypeScript代码，需要编译为JavaScript再交由浏览器解析器执行。1.命令行编译 要把....

编译 TypeScript

浏览器不能直接运行 TypeScript 代码，需要编译为 JavaScript 再交由浏览器解析器执行。

1. 命令行编译

要把.ts文件编译为.js文件，需要配置TypeScript的编译环境，步骤如下：

· 第一步：创建一个demo.ts文件，例如：

const person = {

name:'李四',

age:18

}

console.log(`我叫${person.name}，我今年${person.age}岁了`)

· 第二步：全局安装TypeScript

npm i typescript -g

· 第三步：使用命令编译.ts文件

tsc demo.ts

2. 自动化编译

· 第一步：创建TypeScript编译控制文件

tsc --init

1. 工程中会生成一个tsconfig.json配置文件，其中包含着很多编译时的配置。

2. 观察发现，默认编译的JS版本是ES7，我们可以手动调整为其他版本。

· 第二步：监视目录中的.ts文件变化

tsc --watch 或 tsc -w

· 第三步：小优化，当编译出错时不生成.js文件

tsc --noEmitOnError --watch

类型声明

使用:来对变量或函数形参，进行类型声明：

let a: string //变量a只能存储字符串

let b: number //变量b只能存储数值

let c: boolean //变量c只能存储布尔值

a = 'hello'

a = 100 //警告：不能将类型“number”分配给类型“string”

b = 666

b = '你好'//警告：不能将类型“string”分配给类型“number”

c = true

c = 666 //警告：不能将类型“number”分配给类型“boolean”

// 参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字

function demo(x:number,y:number):number{

return x + y

}

demo(100,200)

demo(100,'200') //警告：类型“string”的参数不能赋给类型“number”的参数

demo(100,200,300) //警告：应有 2 个参数，但获得 3 个

demo(100) //警告：应有 2 个参数，但获得 1 个

在:后也可以写字面量类型，不过实际开发中用的不多。

let a: '你好' //a的值只能为字符串“你好”

let b: 100 //b的值只能为数字100

a = '欢迎'//警告：不能将类型“"欢迎"”分配给类型“"你好"”

b = 200  //警告：不能将类型“200”分配给类型“100” 作者：尚硅谷 https://www.bilibili.com/read/cv37465036/?jump_opus=1 出处：bilibili

类型推断

TS会根据我们的代码，进行类型推导，例如下面代码中的变量d，只能存储数字

let d = -99 //TypeScript会推断出变量d的类型是数字

d = false //警告：不能将类型“boolean”分配给类型“number”

但要注意，类型推断不是万能的，面对复杂类型时推断容易出问题，所以尽量还是明确的编写类型声明！ 作者：尚硅谷 https://www.bilibili.com/read/cv37465036/?jump_opus=1 出处：bilibili