初识Typescript
Posted hhopeforlife
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识Typescript相关的知识,希望对你有一定的参考价值。
什么是typescript?
Typescript是一种由微软开发的自由和开源的语言,是原生javascript的超集,Typescript在原生javascript的基础上添加了可选的静态类型和基于类的面向对象编程.
可是尽管如此,Typescript在编译时还是需要将其转化成javascript.其诞生是提升生产力,增强了Javascript编写应用的开发和调试环节.
1.安装NodeJs
安装node很简单,去官网下载即可,安装完了之后,使用命令
node -v // node版本
npm -v // npm版本
提示版本号说明安装成功.
2.安装Typescript
win系统下
npm install typescript -g
tsc --version // 提示版本号
Mac系统
sudo npm install typescript -g
tsc --version // 提示版本号
如果显示版本号说明安装成功
3.强大的HelloWrold
当我们安装完成了typescript之后,我们学习任何语言都需要学习Helloworld,那么我们来使用typscript来编写Helloworld.
1.首先我们需要初始化我们的项目
npm init -y // 初始化node项目
tsc --init // 初始化typescript项目
touch helloworld.ts // 创建typescript文件
接着在helloworld.ts文件中写相关代码
helloworld.ts文件
var a:string = "HelloWorld"
console.log(a)
写完了之后,运行
tsc helloworld.ts // 编译ts文件
当命令结束,我们可以看到同级目录下会生成一个文件,helloworld.js
文件。文件内容和原生的javascirpt一样,没区别。
所以,当我们使用node
命令
node helloworld.js // 输出HelloWorld
3.变量类型
Typescript和原生的JavaScript不同的是,typescript的变量是强类型的。也就是说,在声明变量之前,我们必须给它一个类型,比如
金额,一定得声明是Number,
名字,一定得声明是String。
那么typescript有哪些呢?Typescript中的数据类型有:
- Undefined
- Number
- string
- Boolean
- enum // 枚举类型,类似数组
- any // 任意类型,啥都做
- Array
- Tuple // 元组类型
- Null
我想以上的大部分类型我们都知道是啥类型了吧,有JavaScript基础都知道。
但是我们还是需要再复习一下。简单说一下
undefined:声明了一个变量但未赋值
比如
var a:string
console.log(a) // undefined
Number: 声明一个数字,不分整数还是小数
var age:number = 18
var price:number = 99.9
console.log(age) // 18
console.log(price) // 99.9
string:声明字符串
正如helloworld一样
var a:string = "Helloworld"
console.log(a) // Helloworld
boolean:布尔类型,分为true,false
var isEmpty:boolean = true
var isEmpty_1:boolean = false
console.log(isEmpty)
console.log(isEmpty_1)
enum:枚举类型
抽象实物的细分。比如
enum Car {
"大卡车",
"火车",
"小轿车"
}
console.log(Car.大卡车) // 0 打印对应的下标,和数组类似
简单的enum
类型,如果需要赋值,
enum Car {
a = "大卡车",
b = "火车",
c = "小轿车"
}
console.log(Car.a) // 大卡车
any: 任意类型,就是它啥都是,不用硬性指定类型,比如:
var a:any = 10
a = "hope"
a = false
console.log(a)
Null: 空类型
在面试当中经常会被问到undefined 和 null有啥区别,这两兄弟都是空,但是undefined代表的是声明变量但是未赋值,null指的是空指针。暂时我是这么理解的。
。。。
以上是关于初识Typescript的主要内容,如果未能解决你的问题,请参考以下文章
初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段
初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段
typescript Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming/angular-2/
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming