deno run index.ts
就可以了。同样的也输出了10。后面的例子我们继续使用 Node.js。
tsconfig.json
我们打开tsc 生成的 js 文件看一下,发现里边除了去掉了类型之外,没有什么变化。那么,JavaScript 版本那么多,TSC 怎么知道要编译成哪一版呢?答案是,TSC 默认会编译成 ES3 那一版。我们可以试试写一个 async 的函数:
async function func() {}
再编译一次看看:
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
// …
发现生成了好多复杂的代码来支持 async。那我如果要生成 ES2017的代码呢?毕竟 aync/await是这个版本出现的?答案很简单,在项目根目录下新建一个 tsconfig.json
文件,这个是配置 typescript 项目的,我们可以通过 compilerOptions
属性来配置 tsc 编译器,然后使用 target
属性来指定要编译成的版本,那么这里设置成 ES2017:
{
“compilerOptions”: {
“target”: “ES2017”
}
}
保存一下,现在再运行 tsc,后边就不需要加文件名了,因为有了 tsconfig 文件之后,这
真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】
个文件夹会自动成为 typescript 项目,tsc 会自动找到 ts 文件进行编译,如果指定了文件名,那么这个 tsconfig 的配置就会被忽略。打开生成的 js 文件,发现 aync 的函数和 ts 源代码里的一样了:
let a = 10;
console.log(a);
async function func() { }
TypeScript 的核心就是类型,这里咱们重点看一下它的语法。
基本类型
TypeScript 的基本类型跟 JavaScript 中的保持一致,有 boolean, number, string, undefined, null 等常用类型。给变量定义类型有两种方式,一种是隐式的,一种是显式的。
隐式
隐式类型是由 TypeScript 根据变量的值来推断类型,这样的话,代码的写法跟 JS 就一样了,但不同的是它后边不能用其他类型的值来给他重新赋值,比如定义一个变量 a,不给它指定类型,但是给它赋上一个数字类型的值,10,然后再把它改成字符串类型的"hello",那么就会产生编译错误,提示"hello"字符串不能赋值给数字类型:
let a = 10;
a = “hello”;
// error TS2322: Type ‘“hello”’ is not assignable to type ‘number’.
显式
显式类型的定义,就跟之前运行的 TS 代码示例一样,我们用 :
+ 类型
来显式的规定,这个变量是什么类型的,比如定义一个boolean 类型的变量 b:
let b: boolean = true;
如果想让一个变量可以是任何类型的,就像 JS 中可以随意更改,那么可以把它的类型定义为 any,例如定义一个变量 a,类型为 any,开始给它一个数字类型的值,10,然后再改成"hello",这时就不提示错误了:
let a: any = 10;
a = “hello”;
类型也可以用在函数的参数和返回值中,比如定义一个加法函数,它接收一个参数 a,类型是 number,还接收参数b,也是number 类型,最后返回值类型也是 number,返回值的类型定义在参数列表的小括号后边,然后它的后边才是函数体,里边直接返回 a + b,返回值的类型可以省略,因为 typescript 可以根据 a+b 推断出它的返回值也是 number 类型:
function add(a: number, b: number): number {
return a + b;
}
这里我们可以使用add(1, 2)来正常调用这个函数:
add(1, 2)
如果使用一个字符串类型的变量来接收函数的返回值,那么就会出错:
let res: string = add(1, 2);
提示: Type 'number' is not assignable to type 'string'.
number 类型不能赋给 String 类型。
如果给函数传递一个字符串进去:
add(“1”, 2);
那么编译器就会提示 Argument of type '"1"' is not assignable to parameter of type 'number'
字符串"1"不能传给 number 类型的参数。
另外调用函数时,必须传递跟参数列表数量相同的参数,不像 JS,可以不传或只传前边几个参数,这里如果只传一个参数的话:
add(1);
会提示 An argument for 'b' was not provided.
没有给 b 传值。
最后,如果函数不返回值的话,可以使用 void 类型代表函数没有返回值:
function printLog(log: string): void {
console.log(log);
}
组合类型
如果一个变量可以有多个类型,但是又不想使用 any 破坏类型检查,那么可以使用组合类型,组合类型使用一条竖线,也就是或操作符,来定义,比如一个变量既可以是 number 也可以是 string类型,那么可以这样来定义,给它赋上一个数字类型的值10,然后后边修改成字符串也没问题:
let a: number | string = 10;
a = “hello”;
类型别名
这样代码看起来不太方便,并且这个组合类型只能给 a 使用,如果有一个变量 b 也可以同时是 number 或 string 的类型的话,还要重复定义这个类型。要解决这个问题,我们可以使用 type 关键字来给这个组合类型起个别名,让代码更易读,也方便其他变量使用,这里定义一个 type 名字叫 NumStr,自定义的类型名字推荐首字母大写:
type NumStr = number | string;
然后 a 变量就可以这样定义,给它一个数字值:
let a: NumStr = 10;
同样也可以再定义一个 b 变量,给它一个字符串值:
let b: NumStr = “hello”;
另外,组合类型也可以直接使用字面值来定义,这样就规定了一个变量的取值范围,比如我想让一个字符串类型的变量c,只能取"on"或"off"两者之一,那么我们可以这样定义,在 c 后边直接使用"on" | “off” 来定义它能取的值:
let c: “on” | “off” = “on”;
现在它的值是 on,如果给它赋值 off 是可以的,但是赋其他值就会出错,比如给它赋一个"other"字符串:
let c: “on” | “off” = “on”;
c = “off”;
c = “other”;
提示 error TS2322: Type '"other"' is not assignable to type '"on" | "off"'.
other 不能赋值给用 “on” 或 “off” 定义的类型里边。
对象类型(interface)
上边介绍的都是基本类型,那么如果要检查对象里的属性是不是符合规范呢?那就要使用 interface,接口了。接口是用来规范一个对象里应该都有哪些属性,包括它的名字,还有它的类型。我们来看一个例子,比如有一个 post 文章对象,我想让它有 title 和 author 属性,并且都是 string 类型的,那么我们可以使用接口来定义一个 Post 类型,使用 interface 关键字,后边是接口的名字,这里叫 Post,然后后边跟一对大括号,里边写上该有的属性和类型,注意每个属性后边用分号结尾,不是逗号:
interface Post {
title: string;
author: string;
}
接着定义一个 post 对象,让它使用 Post 接口类型:
let post: Post = {
title: “标题”,
author: “fh”,
};
这里没有问题,如果再添加一个"publishDate"属性,那么就会出现错误
let post: Post = {
title: “标题”,
author: “fh”,
publishDate: “2020-06-01”,
};
提示 error TS2322: Type '{ title: string; author: string; publishDate: string; }' is not assignable to type 'Post'. Object literal may only specify known properties, and 'publishDate' does not exist in type 'Post'.
说对象里边只能包括接口里定义的属性。同样的,少定义一个属性,例如去掉 title 属性,会提示 Property 'title' is missing in type '{ author: string; }' but required in type 'Post'.
缺少 title 属性。
接口作为函数参数类型
接口除了可以查检对象是否符合规范外,也可以用于函数参数的类型检查,这里需要注意的是,如果传递进来的对象没有定义类型的话,那么只要它的属性满足接口中的规范,就可以通过查检,哪怕它有额外的属性,比如,有一个函数接收 post 类型的参数,里边获取它的 title 属性并打印出来:
function getTitle(post: Post) {
console.log(post.title);
}
然后定义一个 post 变量,不指定类型,然后还包括额外的 publishDate
属性:
let post = { title: “标题”, author: “fh”, publishDate: “2020-06-01” };
定义好之后把它传给 getTitle 函数,发现没有问题:
getTitle(post);
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料
Post) {
console.log(post.title);
}
然后定义一个 post 变量,不指定类型,然后还包括额外的 publishDate
属性:
let post = { title: “标题”, author: “fh”, publishDate: “2020-06-01” };
定义好之后把它传给 getTitle 函数,发现没有问题:
getTitle(post);
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料
[外链图片转存中…(img-rrJ5R7B4-1720849264210)]