TypeScript 01-环境搭建

51 阅读3分钟

引入

JS这门语言特点

JS脚本语言。

弱类型语言。再定义变量的时候,不需要申明数据类型。

     `var s = "xi" //弱类型的变量数据类型 值来定 typeof s string
     s = 20;
     int i = 10;
     long s = 1200;
     i = "xiaowang" //编译报错`

弱类型语言:变量的数据类型会随着你赋值而改变。一开始的收由你的值类决定数据类型。

强类型语言:一开始设计变量的时候,必须严格执行出他的数据类型(规定好当前这个变量再内存分配多大空间,以及这个空间能存放的结果类型)。一旦确定类型,不能赋值其他数据类型

强类型:Java、C\C++

弱类型:JS、php JS这门语言问题

JS弱类型,要再运行过程中解释运行。

const user = {
    username:"xiaowang",
    password:123
}
console.log(user.address.name)

在你代码运行的过程中才会再浏览器抛出异常。

function show(num1,num2){
    return num1-num2
}
show(10,20)
show("xiaowang",function(){
})
show()
function show2(array){
    if(typeof array == "object" && array instanceof Array){
       }else{
           console log("")
       }
    array.forEach()
}
show2(123)

再某一段未来会执行的代码中出现异常

setTimeout(()=>{
    //里面运行可能报错
},10000)

总结:JS这门语法弱类型语言,开发过程中灵活度非常高。对于大家来说更加简单。很多错误信息需要再运行过程中才能被发现,无法的代码编译期间(JS本身就无需编译)就发现。 入门概念

TypeScript概念:TypeScript是JavaScript的超集。

TypeScript里面的内容全都是JS的内容。对JavaScript做了很多的限制。新增很多的特性。

TypeScript是微软开发的一款编程语言。按照标准编程规范来。

TypeScript是JavaScript超集,包含了完整的ES5、ES6的所有规范。对JS做了很多扩展。语法和内容还是JS。扩展更多开发过程中规范

目前各大框架都可以支持TS开发。包括Vue、React、umi、小程序

TypeScript代码无法直接在浏览器运行,我们需要将TypeScript代码编译位js代码最后来运行。 环境搭建

安装TS

保证电脑安装node

全局安装TypeScript

npm install -g typescript
tsc -v

编写TS文件,编译这个文件

在项目中创建ts后缀结尾的文件

// 定义一个变量
var username:string = "xiaowang"
username = "xiaofei"
console.log(username);
class Student{
    // 必须要自己申明属性,才能使用
    id:number
    name:string
    constructor(id:number,name:string){
        this.id = id
        this.name = name
    }
}

如果要在页面运行这个代码,必须将ts代码编译位js代码

tsc index01.ts

默认在同级目录下面产生一个同名的js文件

上面使用tsc来进行编译,有点麻烦,每次修改了ts文件,都必须手动的编译以下代码。

引入更方便编译工具来完成自动检测

tsc --init

你的项目目录下面就会生成一个tsconfig.js文件。这个文件就是ts编译位js的时候,我们配置信息。

我们需要在vscode监视你们的tsconfig这个文件

tsconfig.js文件中

outDir:"./js" //默认在项目中生成js文件夹,里面存放编译过后的js文件

vscode—选中终端—-运行任务—-typescript—监视tsconfig.js就已经启动了对当前指定的ts进行监控。

一旦ts代码发生变化。立即编译位js代码