TS 小记(1)TypeScript 入门

49 阅读2分钟

前言

因为工作原因,需要学习类 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 天,点击查看活动详情