中达建设网站,微信网页版登录二维码,沈阳大型网站制作公司,网站制作公司获取客户1、ts 中的 any 和 unknown 有什么区别#xff1f;
any 和 unknown 都是顶级类型#xff0c;但是 unknown 更加严格#xff0c;不像 any 那样不做类型检查#xff0c;反而 unknown 因为未知性质#xff0c;不允许访问属性#xff0c;不允许赋值给其他有明确类型的变量。… 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.dtsJavaScript 文件是 .js在编写 TypeScript 的文件的时候就会自动编译成 js 文件7、为什么推荐使用 TypeScript ?
TypeScript简化了JavaScript代码使其更易于阅读和调试。
TypeScript是开源的。
TypeScript为JavaScript ide和实践如静态检查提供了高效的开发工具。
TypeScript使代码更易于阅读和理解。
使用TypeScript我们可以大大改进普通的JavaScript。
TypeScript为我们提供了ES6ECMAScript 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 (stringnum).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;
}
testnumber(111);// 返回值是number类型的 111
teststring | boolean(hahaha)//返回值是string类型的 hahaha
teststring | boolean(true);//返回值是布尔类型的 true
使用方式类似于函数传参传什么数据类型T就表示什么数据类型 使用表示T也可以换成任意字符串。
