TS 与 ES6

2022-03-25 2688

什么是 ts

TypeScript 是 JavaScript 的超集，是添加了类型系统的 JavaScript。
可通过编译器(比如tsc)，将后缀名为.ts的文件编译为普通的JS文件,所以不存在跟浏览器不兼容的问题。
它是纯面向对象的，支持静态类型。

ts 与 js 区别

typescript javascript
面向对象的语言 脚本语言
静态类型 没有静态类型
支持可选参数 不支持可选参数
支持接口 不支持接口

为什么在项目中使用typescript

  • 使用 ECMAScript 的新功能
    TypeScript完全兼容ES各个版本的语法，可以使用ES2015及更高版本的功能。

  • 静态类型
    静态类型可以在运行前发现一部分潜在的bug,可在编写代码时发现错误。
    TypeScript 几乎不限制 JavaScript 中原有的隐式类型转换，只是提前了类型检查的时机，通过类型推导在编译时确定结果。

  • IDE 支持
    IDE对TypeScript具有出色的支持，例如VS Code，TS帮助IDE做代码提示、代码补全、接口提示、跳转到定义等

ts的缺点

  • 一些JavaScript库需要兼容，提供声明文件
  • ts编译是需要时间的，这就意味着项目大了以后，开发环境启动和生产环境打包的速度就成了考验

什么是静态类型的语言

静态类型语言中，变量的类型必须先声明。
比如 一旦声明一个变量是number类型，之后就只能将number类型的数据赋值给它，否则就会引发错误，而动态类型则没有这样的限制，你将什么类型的数据赋值给变量，这个变量就是什么类型
动态类型=>运行时检查。静态类型=>编译期检查

什么是泛型

泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，使用时再去指定类型的一种特性。
比如需求场景： 希望传入的值是什么类型，返回的值就是什么类型
传入的值可以是任意的类型，这时候就可以用到 泛型
如果使用 any 的话，就失去了类型检查的意义;
如果对每种类型都得定义一种函数，非常不合理
如果使用函数重载，写法有点麻烦
可以使用泛型， 有关联的地方都改成 <T>，使用的时候再指定类型 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

// 使用的时候再指定类型
let result = createArray<string>(3, 'x');


// 也可以不指定类型，TS 会自动类型推导
let result2 = createArray(3, 'x');
console.log(result);

ts 的变量声明

在 TypeScript 中,声明变量类型的语法，是在变量名称后有一个冒号 : ，后跟其类型。
eg:
let age : number = 20 

1
2
3
4
5
6
7
interface IItem {
  id: number;
  name: string;
}
let arr: IItem[] = [{ id: 1, name: 'coconut' },{ id: 2, name:"blueberry"}];


ts 中内置的基础数据类型

常用：boolean、number、string、array、enum、any、void

ts 中的类

一个类包括以下内容：

构造器（Constructor）
属性（Properties）
方法（Methods）

访问修饰符

TypeScript支持访问修饰符决定了类成员的可访问性:

公共（public），类的所有成员，其子类以及该类的实例都可以访问。

受保护（protected），该类及其子类的所有成员都可以访问它们。 但是该类的实例无法访问。

私有（private），只有类的成员可以访问它们。

ts 中的void

void: 没有任何类型。例如：一个函数如果没有返回值，那么返回值可以定义为void。

tsconfig.json文件

目录中包含tsconfig.json文件，表明该目录是TypeScript项目的根目录。
ts根据它的信息来对代码进行编译

常用配置

  • 一
    include : 用来指定哪些文件需要被编译
    exclude : 用来指定哪些文件不需要被编译 ：默认node_module
    extends : 用来指定继承的配置文件
    files : 用来指定被编译的文件列表，只有编译少量文件才使用
    compilerOptions : 编译器的选项是配置文件中非常重要也是非常复杂的配置选项
  • 二 compilerOptions里的配置

  1. target
    用来指定 ES 版本。 tips: ESNext是指最新版
    ‘ES3’, ‘ES5’, ‘ES6’/‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’, ‘ES2020’, ‘ESNext’
    eg. "target": "ES2020"

  2. module
    指定要使用模块化的规范 : ‘None’, ‘CommonJS’, ‘AMD’, ‘System’, ‘UMD’, ‘ES6’/‘ES2015’
    eg. "module": "CommonJS"

如何在ts项目中引入js的 npm包

  1. 优先选择安装其npm包的typescript版本
    npm install @types/包名 --save
  2. 还可以单独编写.d.ts文件
    例如：
    用 ts 写的模块，在发布的时候仍然是用 js 发布，
    这就导致一个问题：ts 那么多类型数据都没了。
    所以需要一个 d.ts 文件来标记某个 js 库里的对象的类型

tips： typings 就是一个网络上的 d.ts 数据库

查看评论