ts知识点整理

 1、ts 中的 any 和 unknown 有什么区别？

any 和 unknown 都是顶级类型，但是 unknown 更加严格，不像 any 那样不做类型检查，反而 unknown 因为未知性质，不允许访问属性，不允许赋值给其他有明确类型的变量。

let foo: any = 123;
console.log(foo.msg); // 符合TS的语法
let a_value1: unknown = foo; // OK
let a_value2: any = foo; // OK
let a_value3: string = foo; // OK
let bar: unknown = 222; // OK
console.log(bar.msg); // Error
let k_value1: unknown = bar; // OK
let K_value2: any = bar; // OK
let K_value3: string = bar; // Error

因为bar是一个未知类型(任何类型的数据都可以赋给 unknown 类型)，所以不能确定是否有msg属性。不能通过TS语法检测；而 unknown 类型的值也不能将值赋给 any 和 unknown 之外的类型变量

2、TS是什么?

TypeScript 是 JavaScript 的类型的超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等

3、类型批注

通过类型批注提供在编译时启动类型检查的静态类型，这是可选的，而且可以忽略而使用JavaScript常规的动态类型
 

function Add(left: number, right: number): number {return left + right;
}

4、类型推断

当类型没有给出时，TypeScript编译器利用类型推断来推断类型，如下：

let str = 'string'

变量str被推断为字符串类型，这种推断发生在初始化变量和成员，设置默认参数值和决定函数返回值时，如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态any类型

5、接口interface

接口简单来说就是用来描述对象的类型 数据的类型有number、null、string等数据格式，对象的类型就是用接口来描述的

• 可读属性：当我们定义一个接口时，我们的属性可能不需要全都要，这是就需要 ? 来解决
• 只读属性：用 readonly修饰的属性为只读属性，意思是指允许定义，不允许之后进行更改
• 任意属性：这个属性极为重要，它是可以用作就算没有定义，也可以使用，比如 [data: string]: any。比如说我们对组件进行封装，而封装的那个组件并没有导出对应的类型，然而又想让他不报错，这时就可以使用任意属性

interface Props {a: string;b: number;c: boolean;d?: number; // 可选属性readonly e: string; //只读属性[f: string]: any //任意属性
}let res: Props = {
a: '小杜杜',
b: 7,
c: true,
e: 'Domesy',
d: 1, // 有没有d都可以
h: 2 // 任意属性，之前为定义过h
}let res.e = 'hi' // error, 原因是可读属性不允许更改

6、TS 与 JS 的区别

• TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法
• TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译
• TypeScript 文件的后缀名 .ts （.ts，.tsx，.dts），JavaScript 文件是 .js
• 在编写 TypeScript 的文件的时候就会自动编译成 js 文件

7、为什么推荐使用 TypeScript ?

TypeScript简化了JavaScript代码，使其更易于阅读和调试。

TypeScript是开源的。

TypeScript为JavaScript ide和实践（如静态检查）提供了高效的开发工具。

TypeScript使代码更易于阅读和理解。

使用TypeScript，我们可以大大改进普通的JavaScript。

TypeScript为我们提供了ES6（ECMAScript 6）的所有优点，以及更高的生产率。

TypeScript通过对代码进行类型检查，可以帮助我们避免在编写JavaScript时经常遇到的令人痛苦的错误。

强大的类型系统，包括泛型。

TypeScript只不过是带有一些附加功能的JavaScript。

TypeScript代码可以按照ES5和ES6标准编译，以支持最新的浏览器。

与ECMAScript对齐以实现兼容性。

以JavaScript开始和结束。

支持静态类型。

TypeScript将节省开发人员的时间。

TypeScript是ES3、ES5和ES6的超集。

8、TypeScript 的内置数据类型有哪些

• 基本类型：string、number、boolean、symbol、bigint、null、undefined
• 引用类型：array、 Tuple(元组)、 object(包含Object和{})、function
• 特殊类型：any、unknow、void、nerver、Enum(枚举)
• 其他类型：类型推理、字面量类型、交叉类型

参考：https://blog.csdn.net/lbPro0412/article/details/126035641

9、类型断言

类型断言会告诉编译器，你不用给我进行检查，相信我，他就是这个类型

• 尖括号
• as:推荐

//尖括号
let num:any = '小杜杜'
let res1: number = (<string>num).length; // React中会 error// as 语法
let str: any = 'Domesy';
let res: number = (str as string).length;

注意：尖括号语法在react中会报错，原因是与jsx语法会产生冲突，所以只能使用as语法

10、确定赋值断言

允许在实例属性和变量声明后面放置一个 ! 号，以告诉TS该属性会被明确赋值。

let num: number;
let num1!: number;const setNumber = () => num = 7
const setNumber1 = () => num1 = 7setNumber()
setNumber1()console.log(num) // error
console.log(num1) // ok

11、非空断言

在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。

12、const断言

const x = { text: "hello" } as const;

13、类型守卫

常有的类型守卫共有4种：in关键字、typeof关键字、interfaceof关键字和类型谓词（is)

14、type和interface区别

相同点：都是用来定义函数或对象的形状

它俩也支持继承,并且可以互相继承。但是具体的形式稍有差别。

interface是通过extends实现的，type是通过&实现的。

type aa = {name: string}interface bb {name: string}type cc = aa & {age: number}type cc = bb & {age: number}interface dd extends aa {age: number}interface dd extends bb {age: number}

15、断言与类型守卫的区别

断言与类型守卫的概念非常相似，都是确定参数的类型，但断言更加霸道，它是直接告诉编辑器，这个参数就是这个类型，而类型守卫更像确定这个参数具体是什么类型

16、泛型

ts中的泛型就跟any差不多，不过与any不同的是，any会丢失类型而泛型不会

function test <T> (arg:T):T{console.log(arg);return arg;
}
test<number>(111);// 返回值是number类型的 111
test<string | boolean>('hahaha')//返回值是string类型的 hahaha
test<string | boolean>(true);//返回值是布尔类型的 true

使用方式类似于函数传参，传什么数据类型，T就表示什么数据类型， 使用表示，T也可以换成任意字符串。