前言
因为工作原因,需要学习类 RN 的跨端开发框架,用到的语言是 TypeScript,因此来学习一下它的使用,记录学习笔记以备忘。
什么是 TypeScript?
TypeScript 是由微软开发并开源的编程语言。它是 JavaScript 的超集,支持 ECMAScript 6 标准。它在 JavaScript 的基础上增加了很多语法特性及编译检查,可以避免 JavaScript 动态类型带来的一些隐患,使得 JavaScript 可以更好地应用于大型前端工程中。TypeScript 可以通过编译器编译成 JavaScript,可以和 JavaScript 代码互相调用。
TypeScript 和 JavaScript 的关系如图:
安装 TypeScript
使用 npm
工具来安装 TypeScript(npm 是 Node.js 的包管理工具)。
npm install -g typescript
安装后可以使用 tsc
命令来执行 TypeScript 相关代码,如查看版本号:
$ tsc -v
Version 4.9.5
推荐的 IDE
推荐使用 VS Code 作为前端工程的 IDE。
TypeScript 版本的 Hello World
尝试使用 TypeScript 输出 Hello World。
首先新建一个 hello.ts
的文件,TypeScript 代码文件的扩展名为 .ts
。在文件中写下如下代码:
const hello: string = "Hello World";
console.log(hello);
然后执行下面的命令将 TypeScript 编译成 JavaScript 代码:
tsc hello.ts
这时会在当前目录下(和 hello.ts 同一目录)生成一个 hello.js
文件,代码如下:
var hello = "Hello World";
console.log(hello);
最后使用 node 命令来执行 hello.js 文件:
$ node hello.js
Hello World
体验 TypeScript 的编译检查
让我们再进一步,体验一下 TypeScript 提供的静态类型检查等能力。
新建一个 greeter.ts
文件,写下如下代码:
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
console.log(greeter(user));
可以看到,函数 greeter
的参数 person 的类型是 string
,但传入的 user
类型是一个数组(number[]
),看下这时候使用 tsc 命令编译会发生什么:
$ tsc greeter.ts
greeter.ts:6:21 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
6 console.log(greeter(user));
~~~~
Found 1 error in greeter.ts:6
在命令行中给出了错误提示,告诉我们 Argument of type 'number[]' is not assignable to parameter of type 'string'
,也就是 'number[]' 类型不能赋值给 'string' 类型
。
注意:尽管 TypeScript 编译器给出了错误提示,但还是会生成 greeter.js
文件,就算代码里有错误,还是可以使用 TypeScript。
生成的 JavaScript 代码如下:
function greeter(person) {
return "Hello, " + person;
}
var user = [0, 1, 2];
console.log(greeter(user));
参考文档
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天,点击查看活动详情