小鱼的博客 小鱼的博客
首页
  • 《ES6 教程》笔记
  • 《JavaScript教程》笔记
  • 《vue》笔记
  • 《git》学习笔记
  • 《TypeScript》学习笔记
  • 《Java教程》笔记
更多
  • 网站
  • 资源
  • Vue资源
分类
标签
归档
关于
友情链接
GitHub (opens new window)

小鱼

前端界的大佬,后端界的小学生
首页
  • 《ES6 教程》笔记
  • 《JavaScript教程》笔记
  • 《vue》笔记
  • 《git》学习笔记
  • 《TypeScript》学习笔记
  • 《Java教程》笔记
更多
  • 网站
  • 资源
  • Vue资源
分类
标签
归档
关于
友情链接
GitHub (opens new window)
  • 简介

    • 什么是 TypeScript
    • 安装 TypeScript
    • Hello TypeScript
  • 基础

  • 《TypeScript》学习笔记
  • 简介
小鱼
2021-08-25

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 中,我们使用 : 指定变量的类型,: 的前后有没有空格都可以。

上述例子中,我们用 : 指定 person 参数类型为 string。但是编译为 js 之后,并没有什么检查的代码被插入进来。

这是因为 TypeScript 只会在编译时对类型进行静态检查,如果发现有错误,编译的时候就会报错。而在运行时,与普通的 JavaScript 文件一样,不会对类型进行检查。

如果我们需要保证运行时的参数类型,还是得手动对类型进行判断:

function sayHello(person: string) {
    if (typeof person === 'string') {
        return 'Hello, ' + person;
    } else {
        throw new Error('person is not a string');
    }
}

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

let 是 ES6 中的关键字,和 var 类似,用于定义一个局部变量,可以参阅 let 和 const 命令 (opens new window)。

下面尝试把这段代码编译一下:

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

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

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

hello.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)。

在 GitHub 上编辑此页 ! (opens new window)
#TypeScript
上次更新: 2021/09/03, 09:17:45
安装 TypeScript
数据类型

← 安装 TypeScript 数据类型→

最近更新
01
TypeScript泛型
08-26
02
TypeScript 类
08-26
03
TypeScript 接口
08-26
更多文章>
Theme by Vdoing | Copyright © 2021-2022 xiaoyu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式