TS入门指南-基本认识TS是个什么? TypeScript是JavaScript类型的超集，它可以编译成纯avaScri

TS是个什么?

TypeScript是JavaScript类型的超集，它可以编译成纯avaScript。

TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

安装

npm install -g typescript

第一个程序

新建一个文件greeter.ts

// greeter.ts
function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

运行

在命令行输入

tsc greeter.ts

类型注解

值得注意的是TS最有具价值的地方就是类型检测,可以帮助我们在编码过程就报出错误提示.这就大大规避了JS弱类型语言的缺点.比如:

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

重新编译，你会看到产生了一个错误。

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

此时由于我们调用函数时,传入的数据类型与定义时的类型注解不同,所以会报错.

基础类型

TS的基础类型除了JS的基础类型外,还有一些拓展,值得注意的是类型名的大小写不同.

布尔型(boolean) 数字(number) 字符串(string) 数组(number[]或Array<number>) 元组([string, number])

接口

接口是TS中非常重要的一个概念,日常开发中我们也是优先使用接口来定义复杂的类型约束.值得注意的是,TS是结构相同即可,不需要接口名等全部保持一致,我个人理解是,接口名仅仅相当于一个标识符,方便我们引用和说明.

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);