首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TypeScript 上手和 hello world

本文内容如题,开始前希望你有已经具备如下相关知识:npm、终端工具使用、JavaScript。

现在开始。

1. 安装和使用

TypeScript是需要安装才能使用的,其带有一些命令行工具。使用npm来安装,通过-g安装到全局环境。

npm install -g typescript

安装到全局之后便可以在任何地方调用相关命令,比如,查看安装的TypeScript版本:

tsc --version

如果接着输出版本号,那就安装成功了,代表着可以正式开始TS编码并运行了。

也有很多编辑器自带有插件来支持TypeScript,但是原则上都只是一种工具,不论好坏。如果可以接受,个人还是推荐命令行。

2. Hello world

区别于浏览器可以执行JavaScript代码,TypeScript并不能直接被浏览器识别,它需要被编译成JavaScript代码后执行

因为JavaScript代码放到浏览器环境下运行需要依赖HTML页面,相对繁琐。为了更加直接明确的展示TypeScript代码的运行效果,这里使用node来运行JavaScript。

新建hello.ts文件,写入如下代码:

const text: string = "hello world";

console.info(text);

在文件所在目录打开终端,运行

tsc hello.ts

此时可以看到,在当前目录下已经生成了hello.js文件。tsc就是安装TypeScript时引入的命令行工具,作用就是将 .ts编译生成.js文件。那么,接着运行这个JavaScript文件吧:

node hello.js

此时在终端就会输出hello world,至此,已经完成了TypeScript版本的hello world

3. 原始数据类型

查看上面生成的hello.js文件,代码如下:

var text = "hello world";

console.info(text);

可以看到,ts 文件中的:string没有了,这是什么意思呢?

对于上面的通过tsc命令生成js文件的操作,一些编辑器可能会在生成js文件之后对ts文件报错,表示在hello.js文件中也生成了text变量。变量直接写在文件中,相当于是全局的,TypeScript 并不推荐这样存在两个同名的全局变量。目前来说,该错误可忽略。

但也侧面体现出TS检测了JavaScript文件中的变量,是可以和 JavaScript文件一起使用的。

:string实际上就是指定了该变量的类型,为字符串类型。

也就是说,TypeScript可以在变量声明的时候指定类型,数据类型和JavaScript基本一致,还增加了几种"特殊"类型,后面会逐一介绍,这里只说原始类型。

原始数据类型,也就是布尔,数值,字符串,null 和 undefined。

布尔。TS 使用boolean定义布尔值类型。let isOK:boolean=false;(引申:注意区分Boolean构造函数和boolean数据类型,new Boolean(1)的返回值的是Boolean引用类型而不是boolean布尔类型的)

数值。TS 使用number定义数值类型。let age:number=18;

字符串。TS 使用string表示字符串类型。如上例hello world。

空值。TS 中新加入了void的概念,表示没有任何返回值的函数。

function alert(): void {

alert('hello');

}

也可以声明void类型的变量,但是其值只能是undefined和null。

let data:void = null;

这样写可行,但这并没有实质性的用处。

null 和 undefined。null 和 undefined 是所有类型的字类型,可以赋值给所有其他类型的变量,也就是说,你可以这样写:

let n: string = undefined;

let m: number = null;

数据类型的具体化,是对JavaScript的一大改进,可以避免数据类型的错乱导致不必要的问题,对于一个有着具体数据类型的变量,是不能再赋给其他类型的值的,更多详细请等下一篇~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200927A00MXR00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券