初识Typescript及vscode环境配置

什么是typescript?为什么要用它?

typescript简称ts,是js语法的一个超级,由微软团队维护的

 

js特点(不足)

 

弱类型:js中的数据变量没有确定的类型,可以存储对象,可以存储数字,可以存储字符串等等

 

动态的:我定义的变量,到底是什么类型的,需要多少存储空间,我们定义时不知道,只有在执行的时候临时分配

因此开发者希望js像强类型语言那样,可以在运行前将内存空间分配出来,所以ts就是基于这种思想设计出来的,是一个强类型的语言

在大型项目中,代码可维护性可延展性等等尤为很重要,因此面向对象开发显得尤为重要,但是js没有classextendsinterfaceimplementspublicstatic等等概念,因此js中的类、继承等都是模拟的,这样就要增加一些额外的开销,这些开销在大型项目中是不可忽视的。因此ts实现了这些功能

 

 

ts实现了太多的功能,但是没有被浏览器支持,所以我们要编译

一、下载安装node环境,这个就不用多介绍了。

1、新建一个练习目录,在该目录下的终端(cmd )直接输入 tsc --init 它会给我们创建一个tsconfig.json的文件,相当于初始化一个项目目录。

2、在终端输入 npm typescript -g 他就会在全局下安装ts需要的环境。

3、好了,我们开始写以 xxx.ts后缀的文件,并执行 tsc xxx.ts,或者 tsc xxx.ts --watch 这时他就会制动编译成一个与之同名的xxx.js文件 这样一来浏览器就可以识别了,我们就可以尽情地练习Ts的语法了。

4、当我们每次修改时都要编译,很麻烦 vscode可以做以下配置即可:

在tsconfig.json 中做一下修改:"outDir": "./js",然后选择vscode 任务-运行任务-监视tsconfig.json

二、变量的数据类型

let a:string = 'bbb';
let num:number = 123;
let bol:boolean = true;
let color: any = 'red';

var other:number[] = [1,2,3];
let y:[number,string] =  [1,'hello'];//元组
console.log(bol)

三、定义函数

// 定义函数
// 如果一个参数,返回num1+10,如果两个参数,返回两个参数之和
function add(num1, num2) {
    if (typeof num2 === 'undefined') {
        return num1 + 10;
    }
    else {
        return num1 + num2;
    }
}
console.log(add(10));
console.log(add(10, 20));

 

转载于:https://www.cnblogs.com/jervy/p/9750963.html

VSCode(Visual Studio Code)是一款轻量级但功能强大的代码编辑器,支持多种编程语言,包括TypeScriptTypeScript是一种静态类型的JavaScript超集,增加了编译时类型检查和更丰富的面向对象编程特性。要在VSCode中配置TypeScript环境,你需要完成以下几个步骤: 1. **安装VSCode**: 首先确保你已经下载并安装了最新版本的VSCode。 2. **安装TypeScript扩展**: 打开VSCode,点击右下角的“扩展”或转到`Extensions`菜单,搜索“TypeScript”,然后安装官方的"TypeScript"扩展。 3. **创建项目目录**: 创建一个新的项目文件夹,并进入该文件夹。 4. **初始化TypeScript项目**: 在终端或命令提示符中,导航到项目根目录并运行以下命令(假设你的项目名是myProject): ``` npm init -y 或 yarn create tsc --init ``` 5. **打开tsconfig.json**: 这将自动创建一个tsconfig.json文件,这是TypeScript项目的配置文件。你可以在这里设置编译选项、目标模块系统等。 6. **配置vscode**: 在VSCode中,打开`settings.json`(可以通过`File > Preferences > Settings`或快捷键`Ctrl + ,`)。添加以下内容,使VSCode关联`.ts`文件: ```json { "files.associations": { "*.ts": "typescript" } } ``` 7. **编写TypeScript文件**: 创建一个`.ts`文件开始编写TypeScript代码。VSCode会自动检测并提供语法高亮和智能提示。 8. **编译和查看错误**: 右键点击源文件或按下`Ctrl + Shift + B`(Windows/Linux)或`Cmd + Shift + B`(Mac),运行TypeScript编译器。如果存在错误,VSCode会在侧边栏显示编译错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值