有两种方式安装TypeScript:
对于npm用户,可以直接使用下面的命令行安装:
nmp install -g TypeScript
打开editor,最好使用VSCode并且安装TypeScript插件支持。创建greeter.ts文件,并写入:
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerhtml = greeter(user);
TypeScript文件后缀都是.ts。虽然我们使用的是ts后缀,但是上面写的这些code就只是JavaScript内容,你可以直接copy一下,然后使用这些内容进行测试。打开终端,找到该文件所在目录,执行以下命令:
tsc greeter.ts
便会声称一个greeter.js文件,里面内容如下:
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerhtml = greeter(user);
其实刚才的ts文件内容和编译出来的js内容是一样的,在web application中,可以直接使用编译出来的js文件。
现在,可以使用TypeScript的一些新特性,添加 : string来注释person的类型:
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
在TypeScript中,Type annotations可以用来标识变量或者参数的类型,在上面的例子中,使用了string类型来标识person。那么这个时候一旦将代码更改为:
function greeter(person: string) {
return "Hello, " + person;
}
let user = [1,2,3];
document.body.innerHTML = greeter(user);
编译器就会报错:
greeter.ts(7,35): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
同样地,如果在调用greeter函数的时候什么也不传入,则会报错误:
greeter.ts(7,27): error TS2554: Expected 1 arguments, but got 0.
也就是说,TypeScript会根据代码结构和提供的类型注释提供代码静态分析。
虽然报错,但greeter.js还是被生成了,你可以继续使用包含错的的TypeScript,但是结果可能不会满足你的预期。
还是在上面的demo代码基础上进行修改,我们可以使用interface来描述一个对象有firstName和lastName两个属性。在TypeScript中,如果其内部结构兼容,则两种类型兼容。这就说明了我们可以通过Interface来实现对象,而不需要implement去实现。
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = {firstName: "Jane", lastName: "User"};
document.body.innerHTML = greeter(user);
这里需要注意,interface里面只能声明属性或者签名,而无法添加方法。
TypeScript支持JavaScript的新功能,其中很重要的一个功能就是基于类的面向对象编程(OOP)。
这里创建一个Student的类,它有一个构造函数和一个属性。看一下下面的代码,你会发现类和Interface在一起结合的很完美,程序员可以自己决定正确的抽象。另外,还有一个public的关键字,和java中的public类似:
class Student {
fullName: string;
constructor(public firstName: string,public middleInitial: string,public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane","M.","User");
document.body.innerHTML = greeter(user);
值得关注的是,我们将上面代码进行编译为js文件,你可以看到编译后的文件为:
var Student = /** @class */ (function () {
function Student(firstName, middleInitial, lastName) {
this.firstName = firstName;
this.middleInitial = middleInitial;
this.lastName = lastName;
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
return Student;
}());
function greeter(person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
其实就是个Student的函数。说了这么多,怎么能直接看到运行效果呢?很简单,创建一个html文件,然后在里面引用编译的js文件即可:
<!DOCTYPE html>
<head>
<title>TypeScript Greeter</title>
</head>
<body>
<script src="greeter.js"></script>
</body>
</html>
使用浏览器打开此html文件即可运行 ~ ~另外,VSCode的提供也是很强大的,具体自己感受。
来源:https://www.cnblogs.com/zhanggui/archive/2018/06/12/9173660.html
近些日子,我使用了新语言编程,从JavaScript,切确地说是Elm,转成TypeScript。在本文中,我将继续深挖一些我非常喜欢的TypeScript特性。
ts配置文件中有个选项strictNullChecks 如果设置值为false,那么以下代码都不是问题 ,如果设置为true, 以下代码可以说明undefined和null在ts中的区别
最近几个月我已经全面抛弃 JavaScript,完全使用 TypeScript 进行前端开发(只在上课的时候用到 JS)。先说优点:bug 显著减少,之前会遇到的 xxx 为空的问题几乎不会出
我应该使用noImplicitAny TypeScript编译器标志吗?noImplicitAny编译器选项所做的,基本上是将TypeScript从可选类型语言转换为强制类型检验语言。这使得TypeScript离JavaScript的超集稍微远了一些,因为简单的:
如果你来自传统的强类型语言,可能会很熟悉 void 的概念:一种类型,告诉你函数和方法在调用时不返回任何内容。void 作为运算符存在于 JavaScript 中,而作为基本类型存在于 TypeScript 中。在这两个世界中
谷歌在很早之前就张开双臂拥抱 Web 应用程序,Gmail 已经发布 14 年了。当时,JavaScript 的世界是疯狂的。Gmail 工程师不得不为 IE 糟糕的垃圾回收算法捏一把汗,他们需要手动将字符串文字从 for 循环中提取出来,以避免 GC 停顿
用 Typescript 写 React 可比写 Vue 舒服太多了,React 对 ts 的支持可谓天生搭档,如果要用 ts 重构项目,不像 Vue 对项目破坏性极大,React 可以相对轻松的实现重构
使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。有关TypeScript声明类型声明相关的目前就总结了这些比较常用的
在 TypeScript中,any 和 unknown 是包含所有值的类型。在本文中,我们将会研究它们是怎样工作的。any 和 unknown 在 TypeScript 中是所谓的顶部类型。
使用 TypeScript 还可以增强重构能力,并且在对修改后的代码运行 TypeScript 编译器时,可以立即识别出代码中断(例如方法签名的更改)。TypeScript 带来了良好的类型检查,并且绝对比没有类型检查器或仅使用普通的 eslint 要更好
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!