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

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

js特点(不足)

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

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

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

在大型项目中,代码可维护性可延展性等等尤为很重要,因此面向对象开发显得尤为重要,但是js没有class,extends,interface,implements,public,static等等概念,因此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));

初识Typescript及vscode环境配置的更多相关文章

  1. 免安装方式的Python之VSCode环境配置

    概述 本文旨在介绍免安装方式,在VSCode中搭建Python(3.73)的配置环境.至于Python是什么.它能做些什么,诸如此类的介绍均不在此文中介绍,相信能看此文的人,多多少少都会有些了解. V ...

  2. golang之vscode环境配置

    go语言开发,选择vscode作为IDE工具也是一个不错的选择,毕竟goland收费,老是破解也挺麻烦,除了这点,不过说实话挺好用的.vscode的话相对来说就毕竟原始,适合初学者. 1.vscode ...

  3. mac系统vscode环境配置,以及iTerm2配置Zsh + on-my-zsh shell

    https://segmentfault.com/a/1190000013612471?utm_source=tag-newest https://ohmyz.sh/ 一:安装iTerm2终端 htt ...

  4. vscode环境配置(二)——C Program Debug

    一.任务准备 launch.json { "version": "0.2.0", "configurations": [ { "n ...

  5. vscode环境配置

    "go.goroot": "/home/ken/go", "go.gopath": "/home/ken/gopath" ...

  6. vscode环境配置(三)——解决控制台终端中文输出乱码

    由于系统终端默认编码为GBK,所以需要修改为UTF-8 方法一 打开cmd输入chcp查看编码格式,查看以及修改如下图所示: 方法二

  7. vscode环境配置(一)——C Program运行

    ctrl + shift +p 打开应用商店 搜索 C/C++  和 Code Runner(一键编译运行)  

  8. 前端自动化测试 —— TDD环境配置(React+TypeScript)

    欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...

  9. Git环境配置+VSCode中文乱码问题

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 1.VSCode中文乱码问题 (files.autoguessEncoding= ...

随机推荐

  1. asp.net mvc4 不支持EF6

    参考文章:http://www.cnblogs.com/zeusro/p/3403771.html http://q.cnblogs.com/q/40926/ 解决方法是 1.把EF6删除改用EF5. ...

  2. 【WIP】Ruby JSON

    创建: 2018/03/22 以后有空补上 注: JSON.generate 参数只能是Obejct或者Array, 不可以是Hash https://docs.ruby-lang.org/ja/la ...

  3. Linux 常用命令一 ls

    一.ls命令 用于查看目录下的文件信息. ls 当前目录下都有哪些文件: wang@wang:~$ ls examples.desktop workpalce 模板 图片 下载 桌面 tools 公共 ...

  4. ionic2 如何引入第三方cordova插件

    例如:cordova-plugin-wechat 这个插件可以做微信登录,分享支付等 首先第一步:ionic plugin add cordova-plugin-wechat --variable w ...

  5. python的Debug调试

    先打开Shell的Debug-->Debugger调试, 然后点击程序的运行 点击Debug的step按钮查看每一步的结果

  6. 浅谈算法——线段树之Lazy标记

    一.前言 前面我们已经知道线段树能够进行单点修改和区间查询操作(基本线段树).那么如果需要修改的是一个区间该怎么办呢?如果是暴力修改到叶子节点,复杂度即为\(O(nlog n)\),显然是十分不优秀的 ...

  7. 通过Fiddler监控Java应用发送请求及相应数据

    Fiddler可以很好的监控浏览器发送的各种请求及响应数据,对于JAVA程序默认情况下是无法监控的,但实际需求中需要监控JAVA程序发送HTTP请求及返回数据是否正确. Fiddler默认配置的监听端 ...

  8. Android SQLite(1)简单示例-增,删,改,查

    1.主要核心类,Sqlite编程要继承SQLiteOpenHelper import android.content.Context; import android.database.sqlite.S ...

  9. C# winform与Javascript的相互调用[转]

    原文链接<html> <head> <meta http-equiv="Content-Language" content="zh-cn&q ...

  10. 使用mysql实现mybatis的分页效果

    1.mybatis.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configur ...