TS 文档自学 - 记录1

已于 2024-01-10 15:56:12 修改
阅读量166 收藏
点赞数
分类专栏： TS 文章标签： 前端框架 typescript 前端 学习
于 2023-11-07 20:27:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53008757/article/details/134269734
版权

学习文档 : https://wangdoc.com/typescript/intro
学习阮一峰大神的TS，编写边记录重点。全文均已 TypeScript 教程为准。

简介

1.概述： TS 是 JS的超集（superset），是一个独立的类型系统。
2.概念：一组具有相同特征的值。类型是人为添加的一种编程约束合用法提示，可以帮助开发人员在开发过程中，得到更多的验证。提高代码质量，减少错误。
3. 类别：
动态类型 - JS，弱类型，可以随时更改数据类型
动态类型 - TS，不可改变类型
4. 优点：TypeScript 有助于提高代码质量，保证代码安全，更适合用在大型的企业级项目
《1. 有利于代码的静态分析，开发阶段运行静态检查，发现问题，降低线上风险。
（代码的静态分析：根据类型，不必运行代码，就可以确定变量的类型，从而推断代码有没有问题。）
《2. 有利于发现错误。
《3. 有更好的IDE支持，做到语法提示跟自动补全。
《4. 有代码文档（typedoc）
《5. 有助于代码重构
5. 缺点：兼容性问题、不一定适合那些小型的、短期的个人项目
《1. 丧失了动态代码的灵活性。
《2. 增加了编程工作量。
《3. 更改的学习成本
《4. 独立的编译步骤
《5. 兼容性问题

基础用法

  1. 类型声明：一律为在标识符后面添加“冒号 + 类型”。函数参数和返回值，也是这样来声明类型。
let foo:string;
变量 foo 后使用**冒号**，声明了类型为**string**
function toString(num:number):string{
	return String(num)
}
函数toString()的参数num的类型是number。参数列表的圆括号后面，声明了返回值的类型是string

** TypeScript 规定，变量只有赋值后才能使用，否则就会报错
  1. 类型推断
    TypeScript 会自己推荐类型。
let foo = 123;
变量 foo 并么有声明类型，由于他被赋值为一个数值，此时 ts 推荐 foo 的类型为 number。如果后面将 foo 改为其他类型的值，跟推断的不一样，ts 会报错。
foo = 'hello'; //报错

ts 也可以推断返回值
function toString(num:number){
	return String(num)
}
toString() 没有声明类型，ts 推断为字符串。因为ts的类型推断，所以**函数返回值的类型通常是省略不写的**

ts 的设计思路，类型声明是可选的，你可以加，也可以不加。不加类型声明，依然是有效的ts代码，只是不能保证正确的推断出类型。这也是 js 代码都是合法的ts 代码的原因。

  1. TS的编译
    ts -> js 的过程 叫做编译（compile）。
    ts 官方只提供编译器。
    ts 的类型检查只是编译时的类型检查，代码编译为js 后，运行时不会在检查类型了。

  2. 值与类型
    值：value 类型：type
    “类型” 是针对 ”值” 的，“类型”是“值”的一个元属性。每一个值在TS里都是有类型的。比如， 3 是一个值，他的类型是 number
    ts 只涉及类型。
    ts项目包括两种代码：底层的“值代码”和上层的“类型代码”。“值代码” - > js 语法，“类型代码” -> ts 语法。
    可以分离。ts编译过程实际是把“类型代码”全部拿掉，只保留“值代码”。

  3. TypeScript Playground：官方的在线编译页面。

  4. tsc 编译器：官方编译器。ts脚本的后缀名：.ts，tsc 就是将 .ts 脚本转变成 .js

6.1 安装 npm install -g typescript 版本：-v
6.2 帮助信息 -h --all
6.3 编译脚本 tsc app.ts 生成一个 app.js 的脚本文件。 tsc 1.ts 2.ts 3.ts 4.ts 编译多个
–outFile 将多个ts 编译成一个js : tsc file1.ts file2.ts --outFile app.js
–outDir 参数可以指定保存到其他目录。 tsc app.ts --outDir dist 会在 dist 生成 app.js
–target tsc --target es2015 app.ts 可以编译支持不同版本的 js
6.4 编译错误的处理 （tsc 命令的更多参数，详见《tsc 编译器》一章）
6.5 tsconfig.json
将 编译参数 写在配置文件 tsconfig.json 里。
{ "files":["1.ts","2.ts"], "compilerOptions":{ "outFile":"dist/app.js" }}
有了配置文件，编译时直接调用 命令就行： tsc

  1. ts-node 模块 非官方的 npm 模块，可以直接运行ts代码。
    简单运行ts代码看效果， ts-node 是一个便捷的方法
全局安装ts-node  
npm i -g ts-node
运行
ts-node script.ts

直接输入 tsc 不带参数 会给一个大于号，此时进入了 ts 的 REPL运行环境。可以逐步输入代码运行。
$ ts-node
> const twice = (x:string）=> x+x;
> twice('abc')
'abcabc'
> .exit

不安装 ts-node 
npx ts-node script.ts  
npx 在线调用 ts-node

any 类型，unknown 类型，never 类型

any 类型 - “顶层类型”（top type），涵盖了所有下层。
  1. 含义：any 类型表示没有任何限制，该类型的变量可以赋予任意类型的值。设置为any时，ts实际上会关闭这个变量的类型检查，只要句法正确，都不会报错。
  2. 类型推断问题：
    《1. tsc --noImplicitAny xxx.ts 打开该选项，推断出any 类型就报错。
    《2. let var 声明的变量，打开noImplicitAny，不赋值，不指定类型 不报错，建议用 const
  3. 污染问题：污染其他具有正确类型的变量，把错误留到运行时。
unknown 类型 - 类型不确定，严格版的 any。‘顶层类型’，除any以外其他类型的全集。
  1. 跟 any 一样，所有的类型的值都可以分配给unknown类型。
  2. 跟 any 不同，不能直接使用。
let v:unknown = 123;
let v1:boolean = v; // 报错
let v2:number = v; //  报错
v 是 unknown 类型，赋值给any 和 unknown 以外的类型都会报错。这样就避免了污染问题。
  1. 不能直接调用 unknown 类型变量的方法和属性。
let v1:unknown = {foo:123};
		v1.foo //  报错  
let v2:unknown = 'hello'; 
		v2.trim() // 报错
let v3:unknown = (n=0)=>n+1;
		v3() // 报错
直接调用 unknown 类型变量的属性 和 方法 ，或者直接当做函数执行，都会报错
  1. unknown 类型变量能够进行的运算是有限的。
    《1. 比较运算（== 、=== 、!= 、!== 、|| 、&& 、？）
    《2. 取反运算（！）
    《3. typeof
    《4. instanceof
  2. 使用 unknown 类型变量。 -> ‘类型缩小’ ，缩小 unknown 变量的类型范围，确保不会出错。
never类型：空类型->类型为空，不包含任何值。 – ‘底层类型’（bottom type）
let x:server;
x 的类型是never,不可能赋给它任何值，否则都会报错。
  1. 使用场景：类型运算之中，保证类型运算的完整性。
  2. 不可能返回值的函数，返回值的类型就可以写成never
  3. 变量有多种类型（联合类型）。处理所有可能的类型之后，剩余的情况就属于 never 类型。
  4. 特点：可以赋值给任意其他类型。
function f():never{
	throw new Error('Error');
}
let v1:number = f(); //不报错
let v2:string = f(); //不报错
let v3:boolean = f(); //不报错
函数 f() 会抛出错误，所以返回值类型可以写成never，即不可能返回任何值。
  1. never 类型可以赋值给其他类型的原因：跟集合论有关系，空集是任何集合的自己。

总之，TypeScript 有两个“顶层类型”（any和unknown），但是“底层类型”只有never唯一一个。

类型系统

基本类型

  1. 概述：js 类型
    · boolean
    · string
    · number
    · bigint ----？
    · symbol ----？
    · object
    · undefined
    · null
    ts 继承了 js 的类型设计，以上八种可以看做 ts 的基本类型。
    注意：上面所有的类型名称都是小写字母，首字母大写的 Number、String、Boolean 等在JS语言中都是内置对象，不是类型名称。

  2. boolean 类型：true 和 false 两个布尔值。

  3. string 类型：包含所有的字符串

  4. number 类型：包含所有整数和浮点数

  5. bigint 类型：包含所有的大整数

const x:bigint = 123n;
const y:bigint = 0xffffn;
**bigint 与 Number 类型不兼容**
**bigint 类型的值 不能是整数和小数**
**注意，bigint 类型是 ES2020 标准引入的。如果使用这个类型，TypeScript 编译的目标 JavaScript 版本不能低于 ES2020（即编译参数target不低于es2020）。**
  1. symbol 类型：包含所有的 Symbol 值（需看一下 《Symbol》一章）
  2. object 类型：包含了所有的对象、数组和函数。
const x:object = { foo:123 };
const y:object = [1,2,3]; 
const z:object = (n:number) => n+1;
  1. undefined 类型，null类型。
    《1. undefined ：包含一个值undefined，表示未定义(即还未给出定义，以后可能会有定义)。
let x:undefined = undefined;
	上述 第一个undefined 是 “类型” ；第二个undefined 是 ”值”

《2. null : 包含一个值 null， 表示为空（即此处没有值）。

**注意，如果没有声明类型的变量，被赋值为undefined或null，在关闭编译设置noImplicitAny和strictNullChecks时，它们的类型会被推断为any。**

// 关闭 noImplicitAny 和 strictNullChecks
let a = undefined; // any
const b = undefined; // any
let c = null; // any
const d = null; // any

如果希望避免这种情况，需要打开编译选项：strictNullChecks。
// 打开编译设置 strictNullChecks
let a = undefined; // undefined
const b = undefined; // undefined
let c = null; // null
const d = null; // null
打开编译设置strictNullChecks以后，赋值为undefined的变量会被推断为undefined类型，赋值为null的变量会被推断为null类型。
包装对象类型
  1. 包装对象的概念：
    1.1 原始类型（primitive value）：最基本的，不可再分的值。
    特殊值：undefined 和 null
    符合类型：object
    · boolean
    · string
    · number
    · bigint
    · symbol
    以上五种为原始类型，都有对应的包装对象（wrapper object）。所谓“包装对象”，值得是这些值在需要时，会自动产生的对象。
	'hello'.charAt(1) // 'e'
	字符串 hello 执行了 charAt() 方法。但是在JS中，只有对象才有方法。原始类型的值本身没有方法。上述代码运行，是因为在调用方法时，字符串会自动转为包装对象， charAt() 方法其实是定义在包装对象上。
	以上五种包装对象中，symbol类型和bigint类型无法直接获取他们的包装对象（ 即Symbol() 和 Bigint()，不能作为构造函数使用），剩下的三种可以：
	· Boolean()
	· String()
	· Number() 
	以上三个构造函数，执行后可以直接获取某个原始类型值的包装对象。
	**三个构造函数只有当做构造函数使用时（即带有 new 命令调用），才会返回包装对象。**
  1. 包装对象类型与字面量类型
    因为包装对象的存在，导致每个原始类型的值都有包装对象和字面量 两种情况。
'hello'; // 字面量
new String('hello');// 包装对象
两个都是字符串。
区分：
· Boolean 和 boolean
· String 和 string
· Number 和 number
· Bigint 和 bigint
· Symbol 和 symbol

大写类型同时包括包装对象和字面量两种情况
小写类型只包含字面量
const s1:String = 'hello'; //正确
const s2:String = new String('hello'); // 正确

const s3:string = 'hello';// 正确
const s4:string = new String('hello'); // 报错

建议使用小写类型。因为绝大部分使用原始类型的场合，都是使用字面量，不适用包装对象。而且 TS 把很多内置方法的参数，定义为小写类型，使用大写类型会报错。

注意：目前在TS里面，symbol 和 Symbol 两种写法没有差异，bigint 和 Bigint 也是如此，建议始终使用 小写的。
Object 类型与 object 类型
  1. Object 类型
    广义对象 - 所有可以转化对象的值，都是Object 类型，这囊括了几乎所有的值。
let object:Object;  // || object:{};
object = true;
object = 'hi';
object = 1;
object = { foo :123 };
object = [1,2];
object = (a:number)=>a +1;
原始类型值、对象、数组、函数都是合法的 Object 类型。除了 undefined 和 null 以外，其他任何值都可以赋值给 Object 类型。

简写形式：{}   //空对象
  1. object 类型
    狭义对象 - 可以用字面量表示的对象 ，只包含对象、数组和函数，不包括原始类型的值。
let object:object;  // || object:{};
object = { foo :123 }; // 对象
object = [1,2]; // 数组
object = (a:number)=>a +1; // 函数

// 原始类型值  报错
object = true; // 报错
object = 'hi'; // 报错
object = 1; // 报错

大多数时候，我们使用对象类型，只希望包含真正的对象，不希望包含原始类型，所以建议都使用小写。
** 无论大写还是小写，都只包含JS内置对象原生的属性和方法，不包括自定义在这两种类型里的属性和方法。
undefined 和 null 的特殊性
  1. undefined 和 null 即是值，又是类型。
  2. 作为值：任何其他的类型的变量都可以赋值为 undefined 或 null。
let age:number = 24;
age = null;
age = undefined;
JS 的行为是，变量如果等于 undefined 就表示还没有赋值；如果等于 null 就表示值为空。
所以 TS 允许了任何类型的变量都可以赋值为这两个值。
但是 当下编译不报错，运行时会报错。 undefined   不是对象，没有包含对象方法。

解决：
 tsc --strictNullChecks app.ts 打开 --strictNullChecks 选项，undefined 和 null 就不能赋值给其他类型的变量（any 和 unknown 类型 除外）。
在 tsconfig.json 配置
{
	"compilerOptions":{
		"strictNullChecks":true
	}
}
** 打开后，undefined 和 null 两种值也不能相互赋值了。只能赋值给自身，或者any类型和unknown 类型。
值类型
  1. 定义：单个值也是一种类型，成为 ‘值类型’。let x:‘hello’; x 的类型就是 字符串 ‘hello’
  2. const 没有注明类型，就会推断该变量是值类型。
联合类型
  1. 定义：多个类型组成的一个新类型，使用符号 | 表示。（A|B，可以属于A，也可以属于B）
let x:number|string;
x = 123;
x = 'abd'
// x 既可以是数字 也可以是 字符串 ，联合类型值的多少，表达了变量的取值范围有多少。
// 联合类型可以包含 空值
let aa:string|null;
aa = '2sr3'
aa = null
  1. 类型缩小（type narrowing）：区分值的类型，进行下一步处理。
    typeof | switch
  2. 联合类型本身是一种 ‘类型放大’(type widening)，所以处理时就需要 ‘类型缩小’（type narrowing）
交叉类型
  1. 定义：多个类型组成的一个新类型，用 & 表示。（A&B，同时属于A和B）
  2. 用途：表示对象的合成。为对象类型添加新属性
type A = { foo:number }
type B = A & { bar:number }
type 命令
  1. 定义：定义一个类型的别名。（就是给类型起了一个“艺名”）
  2. 优点：让类型的名字更有意义，增加代码的可读性，便利的使用复杂类型，方便修改变量类型。
  3. 重点：别名不允许重名。
  4. 别名的作用域是块级作用域。
  5. 别名支持表达式
  6. 别名允许嵌套
typeof 运算符
  1. 一元运算符，返回一个字符串，代表操作数的类型。
  2. 操作数 是一个值
  3. JS 只可能返回八种结果，都是字符串
  4. TS返回不是字符串，是 当前值的 TS 类型，只能用在类型运算之中，不能用在值运算。
  5. TS typeof 参数只能是标识符
  6. TS typeof 参数不能是类型
块级类型声明
  1. 类型可以声明在代码块（大括号）里面，并且只在当前代码块有效。
类型的兼容
  1. 某些类型可以兼容其他类型
  2. 子类型（subtype）：类型A的值可以赋值给类型B，A 就成为B的子类型。
  3. 凡是可以用父类型的地方，都可以使用子类型，但是反过来不行。
啥时候成大佬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ts官方文档翻译-Generic范型
qq_40486952的博客
11-28 1088
TypeScript官方文档学习和翻译
ts应用文档
Javahtml12的博客
12-02 168
使用any定义时存在的问题：虽然知道传入值的类型但是无法获取函数返回值的类型；另外也失去了ts类型保护的优势。泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。在什么时候需要使用泛型呢？通常在决定是否使用泛型时有以下两个参考标准。2.当函数、接口或类在多个地方使用该数据类型时。（后续可能进行拓展不同类型）当我们定义一个变量不确定类型的时候有两种解决方式。1.当你的函数、接口或类将处理多种数据类型时。
TypeScript学习文档
最新发布
zsy1833579605的博客
05-29 1344
ts学习教程，一些基础的语法。
ts 较好的文档
weixin_30640291的博客
08-16 635
https://ts.xcatliu.com/advanced/type-aliases https://www.tslang.cn/docs/home.html https://jkchao.github.io/typescript-book-chinese/#why 转载于:https://www.cnblogs.com/alww/p/11365055.html
TS解析文档
qq_43157273的博客
04-16 1073
TS格式解析 简介： ts文件为传输流文件，视频编码主要格式h264/mpeg4，音频为acc/MP3。 ts的包是一个一个188字节的包组成，这188字节里面由一个0x47开头的包作为同步。 也就是说，如果你找到了0x47，如果与它相隔188个字节的地方又是一个0x47，基本上就是一个ts的包。 注：ts包中有内容为0x47，所以分割时确定是ts包之后，直接以188字节分割。 结构： ts文件...
TS文件格式
qq_16334327的博客
07-15 8097
ts文件分为三层：ts层（Transport Stream）、pes层（Packet Elemental Stream）、es层（Elementary Stream）。es层就是音视频数据，pes层是在音视频数据上加了时间戳等对数据帧的说明信息，ts层是在pes层上加入了数据流识别和传输的必要信息。 1、TS层 TS层的包都是固定等长的188字节包，由ts header、adaptation ...
扒官方文档学Ts类型编程（一）
高灯GFE
02-25 176
泛型的特点就是通用；反应的语法：，其中T是通配符，常见的通配符还有K，U等，下面代码中的Type也是通配符；在下面执行identity时通过泛型约束了传入类型为string，那么按函数功能返回的类型也将是string，可以点击进入演练场验证答案；return arg;return arg;return arg;
TS格式详解
weixin_39399492的博客
03-05 9383
ts格式详解，主要介绍直播、点播情况下ts文件的内部结构以及解析过程
TS---基础
luoxiaonuan_hi的博客
03-21 984
ts安装 （查看版本号）：ts-node 安装（可直接运行ts文件）：npm i -g ts-node （ts-node (文件路径)src/tsutil/01-hello.ts）把当前ts环境变为模块化环境防止命名冲突 ：在当前文件中添加 export {} 即可，编译时可识别为模块化文件ts-node运行ts报错时 ：先运行 tsc --init命令，初始化一下文件。
TypeScript开发手册
weixin_34024034的博客
11-26 70
返回TS学习总目录 基本类型（Basic Types） 接口(Interfaces) 类(Classes) 模块(Modules) 函数(Functions) 泛型(Generics) 常见错误(Common Errors) 混合类型(Mixins) 声明合并（Declaration Merging） 类型推断（Type Inference） 类型兼容（Type Compatibility） ...
TypeScript入门指南(基础篇)
油墨香^-^的博客
05-16 2056
写在前面 ts是拥有类型系统的js的超集，近年来非常火热。可以这么说，ts才是真正意义上的js。虽然ts的官方文档非常全面，但是对于原来没有接触过ts的同学来说，全篇通读下来需要耗掉不少时间，这篇文章旨在为尝试入门ts的同学使用。 本文将从以下几部分进行总结： TypeScript的优势 强类型与弱类型的区别 动态类型与静态类型的区别 基础类型 接口类型 函数 类 泛型 TypeScript的优势 1.帮助更好地重构代
【TypeScript】阮一峰TypeScript教程笔记：基本用法、any 类型等、类型系统
karshey的博客
10-09 2827
TypeScript 可以看成是 JavaScript 的超集（superset），即它继承了后者的全部语法，所有 JavaScript 脚本都可以当作 TypeScript 脚本（但是可能会报错），此外它再增加了一些自己的语法。TypeScript 对 JavaScript 添加的最主要部分，就是一个独立的类型系统。类型系统类型是人为添加的一种编程约束和用法提示。目的：提早发现错误。，在TypeScript中会报错，但在JS中不会。动态类型与静态类型JS是动态类型语言，TS是静态类型语言。
TypeScript基础学习笔记
jason_renyu的博客
07-13 2008
以下为在学习ts过程中笔记，为自己认为需要谨记的点，再次整理出来为了以后自己能温故知新，若有幸被哪位读者所读到也有所帮助的，还是非常庆幸的。 由于下方为个人的学习笔记，基础知识内容不多，如有需要的朋友可以到TypeScript官网学习，这里推荐阮一峰的《TypeScript 入门教程》 《TypeScript 入门教程》师傅领进门修行在个人，感觉基础的看完研究透彻，然后上项目历练效果挺好的。ts官方的定义是 Typed JavaScript at Any Scale. （添加了类型系统的JavaScript
Typescript教程——中文文档
dabaooooq的博客
04-01 7120
TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
【前端进阶】-TypeScript类型声明文件详解及使用说明
热门推荐
xuxuii的博客
09-19 1万+
今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。这些第三方库不管是否是用TS编写的，最终都要编译成JS代码，才能发布给开发者使用。我们知道是TS提供了类型，才有了代码提示和类型保护等机制。但在项目开发中使用第三方库时，你会发现它们几乎都有相应的TS类型，这些类型是怎么来的呢？类型声明文件类型声明文件：用来为已存在的JS库提供类型信息。这样在TS项目中使用这些库时，就像用TS一样，都会有代码提示，类型保护等机制了。TS的两种文件类型类型声明文件的使用说明。
JSTS介绍和功能简单示例
GIS小虫的博客
03-08 4636
JSTS是一个符合OGC标准的，包含空间拓扑功能的JavaScript类库。和turf类似，区别在于，JSTS是通过原始JTS Java 源代码翻译来的，保留了JTSAPI；而turf来自MapBox。个人感觉JSTS的文档不如turf明了(一些网址还404了)，但是可以直接适用OpenLayers（以下简称OL）的几何对象，对JTS API熟悉的话在OL工程里可能会更方便。 JSTS的参考文档比较分散，GitHub库里有比较全面的简介，这个地址里有一些简单的示例，JTS API直接用的JavaAPI，.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值