VSCode+Nodejs+Typescript前端开发环境

1.安装Node.js

下载地址：https://nodejs.org/en

lts版本： 长久稳定版本

安装：默认安装就可以了

验证：node

2.VSCode

下载地址：https://code.visualstudio.com/Download

安装：默认安装

语言切换： 安装中文插件，重启

 2.1 修改终端cmd模式：

1.点击设置图标，选择Command Palette

 2.输入：Terminal:select To Next Command

 3.点击+选择 select Default Profile

4.选择cmd.exe

 5.重启VSCode,成功后

3.支持TypeScript

TypeScript是JavaScript的超集，强制进行数据类型的说明

 TS的工作流程：

1. 编写TS代码
2. 将TS代码编译成JS代码
3. node执行JS代码

 安装typescript：npm install -g typescript

tsc main.ts 编译单个ts文件

tsc -b 编译当前目录的所有ts文件

4.配置TypeScript

生成配置文件

tsc --init 自动创建 tsconfig.json文件

4.1 修改配置文件

1. tsconfig.json文件取消注释 sourceMap:True

sourceMap:True:生成映射文件

 2.重新编译，产生main.js.map文件

 3.可以启动调试，调试main.ts文件

 5.TypeScript开发流程

1. tsc -w 监视模式下自动编译
   1. 自动生和ts同名的js,js.map文件
   2. 希望隐藏同名的
2. 编写TS代码
3. ctrl+f5 或者f5 运行
   • F5：调试模式，遇到断点会停下来
   • Ctrl+F5：直接运行

5.1 VSCode的配置文件

 5.1.1 打开setting.json

1.设置--setting

 2.输入file，添加需要排除的文件

 3.点击右上角的文件图标，打开setting.json

4.编辑setting.json

{
    "typescript.locale": "zh-CN",
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    "files.exclude": {
        "**/*.js": {"when":"$(basename).ts"},
        "**/*.js.map":{"when":"$(basename)"}
    }
}

 6.TS语法

语法底层是JS

扩展的是：数据类型

6.1 变量的声明

关键字：

• var：申明变量，写在函数外，就是全局变量，写在函数内就是局部变量，谨慎使用
• let：申明变量，作用域仅限代码块内，可以修改
• const 申明常量，作用域仅限代码块内，不可修改

数据类型：

•  数字
• 字符串
• 布尔
• 数组
• 任意类型

let myname = "张三"
const age: number = 18;
let is_man: boolean = true
let list: number[] = [1,2,3,4,5,6,7]
let str_list: string[] = ['a',"b","c"]
let list_a: any[]=[1,'a',true]

console.log(age)

6.2 申明类型

6.2.1 类型

type People={ //数据类型
 age:number,
 name:string
}

let p:People={age:20,name:"李四"} //数据，对象

console.log(p)
console.log(p.name)
console.log(p.age)

6.2.2 接口

interface People { //数据类型
 age:number,
 name:string
}

let p:People={age:20,name:"李四"} //数据，对象

console.log(p)

绝大部分情况下，接口和类型，可以互换使用，接口更加灵活

6.3 申明函数

6.3.1 普通函数

function add(a: number,b: number):number{
    let c = a + b
    return c
}

console.log(add(1,2))

6.3.2 匿名函数

let id_list: number[]=[1,2,3,4,5]

id_list.forEach(function (id:number){
    console.log(id * id)
}) //需要一个函数，在迭代数组成员时回调

 优化

let id_list: number[]=[1,2,3,4,5]

id_list.forEach((id:number)=>{console.log(id * id)}) //需要一个函数，在迭代数组成员时回调

id_list.forEach((id:number)=>console.log(id * id))
()=>1

6.4 申明类

class People{
    age:number=0
    name:string="无名氏"

    //构造函数
    constructor(age:number,name:string){
        this.age=age //修改对象的属性
        this.name=name
    } 
}

let p=new People(18,"")
p.age=18
p.name="张三"

console.log(p)
console.log(p.name)
console.log(p.age)
console.log(typeof p)

改变变量位置

class People{
    age:number=0
    name:string="无名氏"

    //构造函数
    constructor({age,name}:{age:number,name:string}){
        this.age=age //修改对象的属性
        this.name=name
    } 
}
 
let p=new People({name:"张三",age:18}) //变量位置可以改版
p.age=18
p.name="张三"

console.log(p)
console.log(p.name)
console.log(p.age)
console.log(typeof p)