这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

js是动态类型——执行时报错/弱类型语言——类型转换 ts是静态类型——编译时报错/弱类型语言

学习js/ts区别

基础类型

ts中接口类型首字母为大写的I

函数类型

ts函数重载

数组类型

ts补充类型

泛型——先不指定具体类型，在使用时在指定

——函数泛型，在函数前用<T>

type gatt = <T>(target:T)=>T[]

反省关键字

extends——必须在xxx范围内
number——默认类型

类型别名

type——定义一种类型，并且命名 as——类型断言

ts高级

联合/交叉类型

联合类型|：表示一个值可以是几种类型之一交叉类型&：多种类型叠加在一起成为一种类型,包含了所需的所有类型的特性

type IBookList = Array<{
    author: string;
} & ({
    type:'history';
    range: string;
} | {
    type:'story';
    theme:string;
})>

类型保护/类型守卫

类型保护：对输入参数类型进行判断根据输入参数类型不同，访问联合类型时，仅能访问联合类型中的交集部分

类型守卫：通过as进行类型断言，通过自定义函数判断

可以通过联合类型+类型保护进行自动类型推断

功能应用

web/node.js

web应用

配置webpack loader相关配置
配置tsconfig.js文件
运行webpack启动/打包
loader处理ts文件时，进行编译和类型检查

补充知识点：ts开始学习

运行ts需

将ts文件编译成js tsc 文件名.ts
运行js文件 node 文件名.js

ts注意点：

TypeScript 会忽略程序中出现的空格、制表符和换行符。
ts区分大小写(与js相同)

ts类型

js有的：number string boolean undefined null bigint symbol 引用:object

ts:

标题	类型
js	number string	boolean undefined null bigint symbol	引用:object
ts	any 数组元组 enum枚举 void never	联合类型

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同 enum类型是对JavaScript标准数据类型的一个补充(使用枚举类型可以为一组数值赋予友好的名字 )

元祖数组区别数组保证元素类型相同元祖不用

如果数组声明时未设置类型，则会被认为是 any 类型，在初始化时根据第一个元素的类型来推断数组的类型。

类型断言

语法格式：

<类型>值

或:

值 as 类型

类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。——赋值后此变量类型就确定了，赋值其他类型会

ts函数

可以对参数进行类型校验
设置可选参数——?——————js通过...arg进行多个参数获取
可以确定函数返回类型
可以函数重载————重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。

函数重载

定义函数重载需要定义重载签名和一个实现签名。重载签名定义函数的形参和返回类型，没有函数体。一个函数可以有多个重载签名(不可调用)

let suits = ["hearts", "spades", "clubs", "diamonds"];
// 定义重载签名
function greet(person: string): string;
function greet(persons: string[]): string[];
// 定义实现签名
function greet(person: unknown): unknown {
    if (typeof person === 'string') {
        return `Hello, ${person}!`;
    } else if (Array.isArray(person)) {
        return person.map(name => `Hello, ${name}!`);
    }
    throw new Error('Unable to greet');
}
console.log(greet(suits[0]));
console.log(greet(suits));

接口

接口是一系列抽象方法的声明，是一些方法特征的集合
类是对象的抽象，接口实方法的抽象包括属性定义和方法定义
需要注意接口不能转换为 JavaScript。它只是 TypeScript 的一部分。

var customer = { 
    firstName: "Tom", 
    lastName: "Hanks", 
    sayHi: function () { return "Hi there"; } 
};

通过接口设置数组的索引和存储值，索引可以为number或字符串

interface namelist { 
   [index:number]:string 
} 

interface ages { 
    [index:string]:number 
} 
var agelist:ages; 
// 类型正确 
agelist["runoob"] = 15

ts类

ts类有多态的特性——多个子类继承同一父类方法，重写后表现出不同效果

ts命名空间

命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口，则需要在类和接口添加 export 关键字。

namespace SomeNameSpaceName {
    export interface ISomeInterfaceName {} 
    export class SomeClassName { } 
}

TypeScript 命名空间

命名空间一个最明确的目的就是解决重名问题。

假设这样一种情况，当一个班上有两个名叫小明的学生时，为了明确区分它们，我们在使用名字之外，不得不使用一些额外的信息，比如他们的姓（王小明，李小明），或者他们父母的名字等等。

命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。

TypeScript 中命名空间使用 namespace 来定义，语法格式如下：

namespace SomeNameSpaceName { export interface ISomeInterfaceName { } export class SomeClassName { } }

以上定义了一个命名空间 SomeNameSpaceName，如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口，则需要在类和接口添加 export 关键字。

要在另外一个命名空间调用语法格式为：

SomeNameSpaceName.SomeClassName;

如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：

/// <reference path = "SomeFileName.ts" />

ts声明文件——帮助检验第三方库的类型

声明文件以 .d.ts 为后缀
声明文件或模块的语法格式如下：

declare module Module_Name {
}

TypeScript 引入声明文件语法格式：

/// <reference path = " runoob.d.ts" />

完结，撒花✿✿ヽ(°▽°)ノ✿

Ts入门｜ 青训营笔记