组件库项目中使用的TS语法笔记1 | 青训营笔记

203 阅读7分钟

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

基础类型(TS -- 1)

我认为这个TypeScript跟C语言

是很像的,对语言的定义都有严格的规范。

 let str:string = "这是字符串类型"
 //上方我们将str这个变量定义为了string类型,如果对他输入其他类型的内容就会报错,例如:
 ​
 let str:string = 666
 //这个就会报错了,会提示你不能将类型"number"分配给类型"string"
 ​
 let muban:string = `web${str}`
 //我们也可以使用ES6中的模板字符串
 ​
 let u:void = undefined
 let u:void = null
 //空值类型能够有这两种内容。void的内容也是不能去赋值给别人的
 //某种程度上来说,void 类型像是与 any 类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void
 ​
 function fnvoid():void{
     return//函数也可以定义为空值,如果定义了void则不能返回内容
 }
 ​
 //undefined跟null类型的也可以交换着用的,具体区别放在了下面

八种内置类型

 let str: string = "jimmy";
 let num: number = 24;
 let bool: boolean = false;//这里接收的是布尔值,不是布尔值对象(let b:boolean = new Boolean())
 let u: undefined = undefined;
 let n: null = null;
 let obj: object = {x: 1};
 let big: bigint = 100n;
 let sym: symbol = Symbol("me"); 

注意点

null 和 undefined

默认情况下 nullundefined 是所有类型的子类型。 就是说你可以把 nullundefined 赋值给其他类型。

 // null和undefined赋值给string
 let str:string = "666";
 str = null
 str= undefined
 ​
 // null和undefined赋值给number
 let num:number = 666;
 num = null
 num= undefined
 ​
 // null和undefined赋值给object
 let obj:object ={};
 obj = null
 obj= undefined
 ​
 // null和undefined赋值给Symbol
 let sym: symbol = Symbol("me"); 
 sym = null
 sym= undefined
 ​
 // null和undefined赋值给boolean
 let isDone: boolean = false;
 isDone = null
 isDone= undefined
 ​
 // null和undefined赋值给bigint
 let big: bigint =  100n;
 big = null
 big= undefined
 ​

如果你在 tsconfig.json 指定了 "strictNullChecks":truenullundefined 只能赋值给 void 和它们各自的类型。

number 和 bigint

虽然 numberbigint 都表示数字,但是这两个类型不兼容。

 let big: bigint =  100n;
 let num: number = 6;
 big = num;
 num = big;

会抛出一个类型不兼容的 ts (2322) 错误。

任意类型(TS -- 2)

 npm install @types/node -D
 npm install ts-node -g(装全局的)

类型(任意值) -- any

 let anys:any = "张三穿黑丝"
 ​
 anys = []
 anys = 18
 anys = {}
 anys = Symbol('666')
 //any类型就跟原生的是一样的,能够给任意的类型进行定义,所以在在 TypeScript 中,任何类型都可以被归为 any 类型。这让 any 类型成为了类型系统的 顶级类型 (也被称作 全局超级类型 )。

作用的地方:

  1. 有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any 类型来标记这些变量
  2. 在对现有代码进行改写的时候,any 类型是十分有用的,它允许你在编译时可选择地包含或移除类型检查。 你可能认为 Object 有相似的作用,就像它在其它语言中那样。 但是 Object 类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法,即便它真的有这些方法
  3. 当你只知道一部分数据的类型时,any 类型也是有用的。 比如,你有一个数组,它包含了不同的类型的数据

unknown类型

unknown类型比any类型更安全

就像所有类型都可以被归为 any,所有类型也都可以被归为 unknown。这使得 unknown 成为 TypeScript 类型系统的另一种顶级类型(另一种的any

 let unknow:unknown = {a:():number =>123}
 unknow.a()//报错
 //unkonwn类型是不能够去调用属性跟函数的,它是 any 类型对应的安全类型

接口和对象类型(TS -- 3)

typescript 中,我们定义对象的方式要用关键字 interface(接口),张三的理解是使用 interface 来定义一种约束,让数据的结构满足约束的格式。

我的理解是interface是一个国企部门只招一个人的话,他们会针对走后门的那个人量身定制招聘要求,到面试的时候,这些条件少一个都不行,多了也不行,毕竟已经内定了,再叼、这些条件不仅满足了而且还会更多的技能也没用,别人就是不要你。(留下心酸的眼泪)

interface类型

 interface A{
      readonly name:string//这个readonly是只读属性,意思就是说只能读取,不能将其他值赋值给他
     age?:number//这个问号就是可选的意思,条件稍微宽松了一些,下面引用这个age的话有没有这个属性都可以,不会报错
 }
 ​
 let obj:A = {
     name = "张三嗷嗷叫"//这里如果不写name就会报错,因为我们在上面定义了A类型集合,并且在这个变量中引入了(里面必须要有name属性且类型为字符串)
     age  = 18
 }

注意:这个规定的属性不能多也不能少,参考我上面的案例

可选属性 -- ?操作符

 interface A{
      readonly name:string
     age?:number//这个问号就是可选的意思,条件稍微宽松了一些,下面引用这个age的话有没有这个属性都可以,不会报错
 }
 ​
 let obj:A = {
     name = "张三嗷嗷叫"
     age  = 18//age写不写无所谓
 }

任意属性 -- [propName:string]

需要注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集

 interface Person{
     name:string,
     age?:number,
     [propName:stirng]:string|number//这个属性一旦定义了,引用这个Person的对象就能够写入任意属性,属性的形式主要看冒号后面你定义了什么类型,比如在这里定义的类型就是string和number类型,不是这两者的类型就会报错,包括在Person里面定义除了string跟number之外其他类型也会报错
     //可以理解为这个 [propName:stirng]任意属性的优先度相当高
     
     注意stringnumber中间的 `|` 符号,小飞棍来咯,这是联合类型,后面笔记会写,这里就当作将stringnumber类型关系到了一块,有点像逻辑或,满足联合起来的其中一个条件都行,两个也可以
 }

只读属性 -- readonly

只读属性必须在声明时或构造函数里被初始化。

 interface A{
      readonly name:string//这个readonly是只读属性,意思就是说只能读取,不能将其他值赋值给他
 }
 ​
 ​
 let obj:A = {
     name = "张三嗷嗷叫"
 }
 ​
 obj.name = "张三芳龄18"//报错
 console.log(obj)//能够读取
 let name1 = obj.name
 console.log(name1)

继承属性 -- extends

儿子在前面,父亲在后面。也就是说顺序是 儿子 继承于 父亲

父亲的部分会继承给儿子,父亲的部分如果没有使用?操作符的话,引用儿子的 对象 是必须将父亲的部分都写下去。一说到这个就想到现在有的地方买房子,出政策能够绑定3代人一起还款,父债子还,跑不掉的,连债务都继承了还不能摆脱,这政策太鸡儿黑心了,绝户计

 interface A{
     name:string
 }
 ​
 interface B extends A{
     age:number
 }
 ​
 let p:B{
     name:"有看到张三的裤子吗?"
     age:88//两种类型都要写
 }