TS认识

TS是什么？

• TS是一门以JS为基础构建的语言
• TS是一个JS的超集
• TS可以在任何支持JS的平台中执行
• TS扩展了JS，并添加了类型定义
• TS不能被JS解析器直接执行，就是说TS的代码不能在浏览器运行，想要浏览器认识这份代码，就需要安装一个TS的编译器，该编译器可以将TS代码编译转换成浏览器认识的JS

TS增加了什么？

• TS中增加了类型定义

为什么这么说呢？学过JS的都知道，JS原本不就有Number、String、Array、Object、Boolean这些类型，为什么TS也会有一个类型定义？这2者不是一样的吗？

下面这张图就很容帮我理解区分JS和TS的类型定义：

从上图可以知道，JS其实定义的仅仅只是赋值类型，并没有定义变量的类型，而变量的类型既然而然地就需要有TS来定义啦！

那么，现在就很清晰地知道JS中的类型和TS中的类型究竟针对谁了，便是各司其职罢了，赋值定义类型交给JS，变量定义类型交给TS。

此外，TS也增加JS原来没有的类型，例如元组（Tuple），抽象类，枚举，接口(interface)

• TS支持ES的新特性

• TS中添加了ES不具备的新特性

例如抽象类，接口，装饰器

• TS提供了丰富的配置选项

一份TS代码可以编译成任意版本的JS代码，解决了浏览器的兼容性问题。

• TS提供了强大的开发工具

代码报错提示

JS的缺点，为什么要学习TS

let a = 10
a = 'book'
a = true
a = []

function(a,b){
    console.log(a,b)
}

从上面一个demo可以看出，a变量没有进行类型规范，所以导致了这个a变量在js中是动态类型，也就是说a变量是根据赋值来决定自身的，它可以是Number类型、String类、Array类、Boolean类等

换句话说，你给a变量赋值什么类，a就是什么类型，这就是JS的缺陷,而这种缺陷在函数传参中最为明显，而TS的出现就是弥补了JS的缺陷.

在TS比如我指定a变量是一个Number型，那就不能给a变量赋值一个字符串，因为在TS语法中已经定义了a变量属于什么类型。

安装TypeScript

• cmd窗口使用npm安装

npm install -g typescript

• 检测是否安装成功

tsc -V

TS语法使用注意事项

• 文件后缀名为.ts

  
  
• ts的文件中如果直接书写js语法的代码，那么在html文件中直接引入ts文件，在谷歌浏览器中是可以直接使用的。
• 如果ts文件中有了ts的语法代码，那么就需要把这个ts文件编译成js文件，在html文件中引入js文件来使用。
• ts文件中的变量使用let进行修饰，编译的js文件中的修饰符就变成var了。
• ts文件中函数中的形参，如果使用了某个类型进行修饰，最终在编译的js文件中是没有这个类型的。
• ts文件编译成js文件:运行 tsc 文件名.ts
  
  
  demo.ts手动编译成demo.js
  

html引入使用

ts在vscode中自动编译

• 准备一个项目文件夹

  
  
• 终端运行 tsc --init ，生成一个tsconfig.json文件

tsc --init

• 修改tsconfig.js配置

修改输出的编译目录：把ts文件最终编译成js文件放置在./js目录下(outDir默认是被注掉的，需要去掉注释)
"outDir": "./js", 

关闭严格模式
"strict": false, 

• 终端监视
  选中tsconfig.json文件，点击终端，运行任务

  
  
  
  

  点击显示所有任务

  
  
  
  选择ts监视
  
  
  自动编译完成
  
  
  

  html引入./js目录下生成的.js文件

类型注解

• 为函数或者变量添加约束

  
  

• 智能错误信息提示（当鼠标浮动在红色波浪线时显示）

  
  

ts 接口约束

• 接口通过interface关键字定义，是一种约束能力。

  
  

TS中类的书写

(()=>{
    //定义一个接口
    interface IPerson{
        firstName: string //姓
        lastName: string //名
    }
    //定义一个class类
    class Person {
        //定义公共的字段（属性）
        firstName: string //姓
        lastName: string //名
        fullName: string //姓名
        
        //定义一个构造器函数
        constructor(firstName: string,lastName: string){
            //更新属性数据
            this.firstName = firstName
            this.lastName = lastName
        }
    }
       //定义函数
       function showFullName(person:IPerson) {
        return person.firstName + '' + person.lastName
    }

    //实例化对象
    const person = new Person('宋','小画')
    console.log();
})()

自动编译成的js