TypeScript

TypeScript是一种由微软开发的开源，跨平台编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。

TS扩展了JavaScript的语法，所以任何现有的JS程序都可以运行在TS环境中

特点
1.始于JS，归于JS
2.强大的系统系统（语法有问题有提示）
3.先进的JS（扩展的JS）

在vscode中运行ts代码时
1.新建项目文件
2.新建一个ts文件，里面写ts代码，也可以写js代码
3.新建一个html文件，在body中写script标签，标签的src时ts文件

若ts文件中写的是ts代码，此时并不能执行成功
我们需要将ts文件转换成js文件

右键（文件夹），打开集成终端，输入
(输入tsc空格后， 可按tab选择文件)

tsc .\ts01.ts

若此处报错，是因为没有权限。
（1）右键vscode–属性–兼容性–以管理员身份运行此程序
（2）重启后打开终端，输入set-ExecutionPolicy RemoteSigned
通过get-ExecutionPolicy查看是否修改成功
（3）再次输入 tsc .\ts01.ts 查看文件夹中是否有ts01.js文件
（4）将html文件中 script的src改为\ts01.js

tips:右键js文件–向右拆分，可以与ts文件做对比

总结：

1. ts的文件中如果直接书写js语法的代码，那么在html文件中直接引入js的文件，在谷歌的浏览器中是可以直接使用的

2. 如果ts文件中有了ts的语法代码，那么就需要把这个ts文件编译成js文件，在html文件中引入js的文件来使用

3. ts文件中的函数中的形参，如果使用了某个类型进行修饰，那么最终在编译的js文件中是没有这个类型的

4. ts文件中的变量使用的是let进行修饰，编译的js文件中的修饰符就变成了var

(()=>{
    //str这个参数是string类型的
    function sayHi(str:string){
        return '你好'+str
    }
    let text = '宝宝'
    console.log(sayHi(text))
})()

vs中自动编译
1.生成配置文件tsconfig.json
在终端输入tsc --init

2.修改tsconfig.json配置

"outDir": "./js",                              /* 把ts文件最终编译后放在js的目录中 */
 "strict": false,

3.启动监视任务
Terminal – Run Task – Show all tasks – tsc:watch

类型注解
在ts中编译错误，但在js中编译正确
ts可以提供错误提示

//类型注解：是一种轻量级的为函数或者变量添加的约束
(()=>{
    function showMsg(str:string){
        return 'hellohello'+str
    }
     let msg = 'hey'
    //let msg = [10,20,30000]
    //智能的错误提示信息
    console.log(showMsg(msg))
})()

类

//ts中书写js中的类，演示效果
(()=>{
    //定义一个接口
    interface IPerson{
        firstName:string
        lastName:string
    }
    //定义一个类型
    class Person{
        //定义公共的字段(属性)
        firstName:string    //姓氏
        lastName:string     //名字
        fullName:string     //姓名
        constructor (firstName:string,lastName:string){
            //更新属性数据
            this.firstName = firstName
            this.lastName = lastName
            this.fullName = this.firstName+'_'+this.lastName
        }
    }
    //定义函数
    function showFullName(person:IPerson){
        return person.firstName+'_'+person.lastName
    }
    //实例化对象
    const person = new Person('诸葛','孔明')
    console.log(showFullName(person))
})()