TypeScript初探
TypeScript初探
TypeScript是什么?跟JavaScript有什么区别?要不要值不值得学习TypeScript?接下来我将介绍一下TypeScript,将讲述从零开始到HelloWorld的过程,初探一下TypeScript,整个过程下来后,上边的疑问应该都会有个结果。
基本介绍
TypeScript是微软开发的开源编程语言,是JavaScript的一个超集,扩展了JavaScript的语法,添加了静态类型和基于类的面向对象编程,是一种强类型语言。现有的JavaScript程序可以不作任何改变就能在TypeScript下工作。学过ES6的话,会觉得ES6和TypeScript很像,是的,TypeScript实现了ES6的特性,并且进行了扩展,最大的改善是增加了类型系统,两者都需要编译才能在浏览器运行,编译目标都是JavaScript。
实现TypeScript版HelloWorld
有句话叫show me the code,don’t ……;其实挺有道理的,那么我们就先来实现一个TypeScript的HelloWorld,先感受一下再讨论吧。
①安装TypeScript
本人使用的是npm方法安装,使用的是淘宝镜像cnpm,打开控制台输入: cnpm install typescript -g
回车,等待 typescript
安装完成。
②编写ts文件
新建一个名为TypeScript的文件夹,在文件夹里新建一个名为 hello.ts
的文件,打开一个编辑器,推荐使用VS,因为同样是Microsoft的产品,输入以下代码:
function hello(word) {
return 'hello, ' + word
}
let word = 'TypeScript'
console.log(hello(word))
即:
打开控制台,进入TypeScript文件夹,输入以下命令编译hello.ts tsc hello.ts
可以看到,TypeScript文件夹下多了一个hello.js文件,此文件由hello.ts文件编译而来。
运行编译出来的js文件
本人使用的是node的方式,不喜欢使用node的话,也可以在网页中引入编译出来的js文件然后再浏览器看结果。
在控制台输入以下命令: node hello.js
随后,TypeScript版HelloWorld就会打印出来。
是不是觉得hello.ts跟编译出来的hello.js一样?是的,这正是证实了JavaScript程序可以不做修改地在TypeScript下工作这个结论。上边的两个程序一样,是因为还没有加上TypeScript相对于JavaScript扩展的新特性。
更TypeScript的HelloWorld
为什么说更呢?接下来我们使用一些TypeScript相对JavaScript特有的东西修改我们的hello.ts,将hello.ts修改成以下写法:
function hello(word: string) {
return 'hello, ' + word
}
let word = 111
console.log(hello(word))
会发现编译器报了以下错误:
为什么会报错?因为我们使用了TypeScript的类型注解,类型注解是一种为函数或变量添加约束的方式,也就是上边的代码中,word只能是string类型,否则会报错,要想正确运行以上代码,需要对hello()中的参数类型改为number或者对函数外的word改为字符串类型。
修改后便不会报错,使用之前的方法,将ts文件编译成js文件,然后再次 node hello.js
可以看到
再次将hello.ts代码改为如下写法:
class Student {
fullName: string
constructor(public firstName, public lastName) {
this.fullName = firstName + " " + lastName
}
}
interface Person {
firstName: string
lastName: string
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName
}
let user = new Student("Kobe", "Bryant")
console.log(greeter(user))
跟之前一样运行编译出来的js,可以看到:
是不是挺有意思的?可是为什么会这样?还有其他更有意思的知识吗?本文只是讲解一下TypeScript是什么,以及实现HelloWorld,更多内容可留意本人后续博客或者直接访问TypeScript官网学习,有错误欢迎指出,谢谢。
祝学习愉快~~~~
TypeScript官网:http://www.typescriptlang.org/
上一篇: Typescript初探--接口