TypeScript学习日记一

前端小白zrt123
112 阅读4分钟

TypeScript学习日记一

  • 公司用TypeScript + Angular + rxjs开发项目,一个没学过，从今天开始学习。
  • TypeScript特性：强类型、编译性、js的超集
  • 规范数据的类型，提高代码的可维护性。

1.jpg

一.TypeScript开发环境搭建

1.下载Node.js稳定版

Node.js官网: nodejs.org/en

2.安装Node.js

node -v 检查node安装是否完成

3.安装TypeScript

npm i -g typescript

4.ts文件的创建

5.使用tsc对ts文件进行编译

二.TypeScript的数据类型

1.类型声明

类型声明给变量设置了类型，使得变量只能存储某种类型的值

  let 变量: 类型;
  let 变量: 类型 = 值;
  function fn(参数:类型，参数:类型):函数返回值类型{
    ...
  }

2.自动类型判断

ts拥有自动的类型判断机制
当对变量的声明和赋值是同时进行的,ts编译器会自动判断变量的类型 如果你的变量的声明和赋值同时进行的，可以省略类型声明，类型推断

  • 类型:
    image.png

3.any类型的使用

  any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
  使用TS时，不建议使用any类型
  let d:any;

  声明变量如果不指定类型，则TS解析器会自动判断变量的类型any (隐式的any)
  let d;
  d = 10;
  d = 'hello';
  d = true;

4.unknown类型的使用

  unknow表示未知类型的值,可以赋任何值,表示安全的any,不能直接赋值给其他变量
  let e:unknown;
  e = 10;
  e = "hello"
  e = true

5.any类型和unknown类型的区别

  let s:string;
  let e:unknown;
  let t:any;
  e = 'hello';
  t = 'ttt';
  s = t   可以成功
  s = e   报错
 
  if(typeof e === "string") {
     s = e;
  }
  总结：any类型会感染其他数据类型；unknown类型不可以用于赋值，无关它的值是什么类型的.

6.类型断言，告诉解析器当前变量是什么数据类型

  复用上述s,e
  s = e 报错
  s = e as string  成功
  等同于
  s = <string> e
  
  e = 1
  s = e 报错
  s = e as string

7.void类型用来表示空，表示没有返回值 可以用return null 和 return underfined

  function fn1():void {
    //可以return null | underfined
  }

8.never类型表示永远不会返回结果

function fn2():never {
   throw new Error('报错了！')
}

9.object类型

  • 第一种
  let a: object;
  a = {};
  a = function(){};
  • 第二种
  {} 用来表示指定对象中可以包含哪些属性
  语法：{属性名:属性值,属性名:属性值}
  在属性名后边加上?，表示属性是可选
  let b: {name: string, age?: number};
  b = {name:'孙悟空',age:18}
  b = {name:'孙悟空'}
  b = {name:'孙悟空',sex:'男'}   报错

  [propName: string]: ant 表示任意值类型的属性,任意个数的属性
  let c = {name: string,[propName: string]: any};
  c = {name:'猪八戒',value:'200元'}

  设置函数结构的类型声明:
    语法：（形参: 类型，形参：类型）=> 返回值类型
  let d: (a: number,b: number)=>number;
  d = function (n1: string, n2: string): number {
     return n1 + n2
  }

10.array数组类型

数组类型的声明

  • 方式一
  类型[]
  let e: string[];
  e = ['a','b','c']
  e = [1,'a']   报错
  • 方式二
  Array<类型>
  let g: Array<number>
  g = [1,2,3]
  g = ['1','2',1]   报错

11.元组类型

元组就是固定长度的数组

  语法：[类型，类型，类型...]
  let h: [string,string,number];
  h = ['hello','text',123]
  h = ['hello','text']    报错
  h = ['hello',123,'text']    报错

12.enum枚举类型

用于多个值的不同结果,不说了直接上代码

  定义枚举类 Gender
  enum Gender {
    Male = 0,
    Female = 1
  }
  let i: {name: string, gender: Gender};
  i = {
    name:'孙悟空',
    gender:Gender.Male       'male'
  }
  console.log(i.gender === Gender.Male);   返回true
  console.log(i.gender)   返回0

13.可以使用 | 符号来连接多个类型,表示与

  可以使用 | 来连接多个类型,也可以使用多个不同的固定值
  let b2: "male" | "female";
  b2 = "male"
  b2 = "female"
  b2 = "sex"   //报错,只能赋值 male 或 female
  let c:boolean | string
  c = true;
  c = "hello"
  c = 1     //报错，只能赋值 boolean 和 string 类型

14.可以用 & 符号来表示同时满足的条件,表示且

  let j: {name: string} & {age: number};
  j = {name: '孙悟空'}  报错
  j = {name: '孙悟空',age:18}  成功

15.类型的别名

  let k: 1 | 2 | 3 | 4 | 5
  let l: 1 | 2 | 3 | 4 | 5
  let m: 1 | 2 | 3 | 4 | 5
  太过繁琐
  修改后:
  type myType = 1 | 2 | 3 | 4 | 5
  let k: myType;
  let l: myType;
  let m: myType;
avatar
文章
阅读
粉丝