Ts学习笔记 01

2019/7/23 typescript

typescript是javascript的一个超集,也就是说Js有的它都有。js没有的它也有,比如类型系统。

# 七里八里一下

typescript是javascript的一个超集,也就是说Js有的它都有。js没有的它也有,比如类型系统。 类型系统:类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了, 可以在编译阶段就发现大部分错误,这总比在运行时候出错好。这也是现在很多大项目都在用Ts的原因,当然这也是为何我们老大今年主推学习Ts

# 安装Typescript

  1. 全局环境下安装 tsc 命令,安装完成之后,我们就可以在任何地方执行 tsc 命令了。
  npm install -g typescript 
1
  1. 编译一个 TypeScript 文件其实很简单:
  tsc hello.ts
1

约定使用 TypeScript 编写的文件以 .ts 为后缀,用 TypeScript 编写 React 时,以 .tsx 为后缀。

# Hello TypeScript

将以下代码复制到 hello.ts 中:

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = 'Tom';
console.log(sayHello(user));
1
2
3
4
5
6

然后执行

tsc hello.ts
1

这时候会生成一个编译好的文件 hello.js

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));
1
2
3
4
5

TypeScript 中,使用 : 指定变量的类型,: 的前后有没有空格都可以。

而且在编译为 js 之后,并不会将检查的代码插入进去。

因为TypeScript 只会进行静态检查,如果发现有错误,编译的时候就会报错。

下面这段代码就能体现出Ts的作用:

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = [0, 1, 2];
console.log(sayHello(user));
1
2
3
4
5
6

编辑器中会提示错误,编译的时候也会出错:

index.ts(6,22): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
1

但是还是生成了 js 文件:

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = [0, 1, 2];
console.log(sayHello(user));
1
2
3
4
5

TypeScript 编译的时候即使报错了,还是会生成编译结果,我们仍然可以使用这个编译之后的文件。

如果要在报错的时候终止 js 文件的生成,可以在 tsconfig.json 中配置 noEmitOnError 即可。关于 tsconfig.json,请参阅官方手册 (opens new window)中文版 (opens new window))。


Last Updated: 2022/8/15 上午1:01:16