ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

TypeScript学习

2022-04-23 21:31:25  阅读:172  来源: 互联网

标签:TypeScript string Object number 学习 let 类型 name


1.TypeScript简介

首先官网祭天 ---> https://www.tslang.cn/

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

我们使用一张图来说明TypeScript和JavaScript的关系:

 

使用更加简单的说法:

TypeScript = JavaScript + 类型约束 + 高级特性

 

二.环境准备

TypeScript最终会编译成js来运行,所以我们需要先准备好将TypeScript编译为js的环境。

a.安装TypeScript

首先全局安装ts

npm install -g typescript

然后可以使用命令来验证安装是否成功了。

tsc --version

b.使用tsc命令编译ts为js

tsc ./src/xxx.ts

然后我们就可以执行对应的js文件

c.配置tsconfig文件

但是每次都使用tsc命令编译单个文件会比较麻烦,所以我们可以做一个统一配置

先使用 tsc --init 命令初始化一个 tsconfig.json 文件

里面配置如下:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "./dist",
    "skipLibCheck": true,
     ...
  }
}

然后我们只需要tsc一下,所有的ts文件就能被编译了

d.自动编译

之后我们只需要启动vscode的监听任务功能,就能自动编译了。

1.选择终端 -> 运行任务

2.选择typescript类型的任务

3.选择监视任务

 

三.变量类型约束

3.1.原始类型

string,number,boolean,symbol,null,undefined

export {}; // 第一行增加这个是为了使文件里的变量不污染全局
let num: number = 1; // number
let str: string = "2"; // string
let bool: boolean = true; // boolean
let sy: symbol = Symbol(); // symbol
let undef: undefined = undefined; // undefined
let nul:null = null; // null
let vd: void = undefined; // 可以把undefined类型赋值给void类型,但是反过来不行
// 函数没有返回值,那么函数的返回值类型就是void
function fn(): void {
  return undefined;
}

注意:

  1. void只用在函数没有返回值的情形下。

  2. undefined和null最大的价值主要体现在接口类型上,表示可缺省、未定义的属性;null表示对象或者属性是空值。这个可以先有个印象,后面说到接口会讲

  3. 单纯声明 undefined 或者 null 类型的变量是无比鸡肋的,上面的例子只是说明原始类型

  4. 如果不写类型,typescript是可以推断类型的,但注意let、const的区别

 

3.2.非原始类型

小object, 大Object, {}

小object:代表的是非原始类型的类型,也就是不能是string,number,boolean,symbol,严格模式:多包括null,undefined

let obj1: object = 3; // 报错
let obj2: object = "3"; // 报错
let obj3: object = true; // 报错
let obj4: object = null; // 报错
let obj5: object = undefined; // 报错
let obj6: object = Symbol(); // 报错
let obj7:object = {a: 1, b: '2'};
let obj8:object = [1, 2, 3];

大Object :代表所有拥有 toString、hasOwnProperty 方法的类型,所以所有原始类型、非原始类型都可以赋给 Object,严格模式下不包括null,undefined。{}空对象类型和大 Object 一样。

let obj1: Object = 3; 
let obj2: Object = "3"; 
let obj6: Object = Symbol(); 
let obj3: Object = true; 
let obj4: Object = null; // 报错
let obj5: Object = undefined; // 报错
let obj7: Object = { a: 1, b: "2" };
let obj8: Object = [1, 2, 3];

注意: 1. 官方文档说可以使用小 object 代替大 Object,但是我们仍要明白大 Object 并不完全等价于小 object。 2. 上面的例子看起来,大Object是小object的父类型,但并不是!!!真实的情况是大Object才是小object的子类型

 

3.3.数组类型

数组类型的定义:

let arr1: Array<number> = [1, 2, 3];
arr1.push('3'); // 报错
arr1.push(5);
let arr2: string[] = ['4', '5', 'a'];
arr2[3] = '6';

 

3.4.字面量类型和联合类型和交叉类型

export {};

// 字面量类型
let num: 2 = 2;
// num = 3;

let str: "hello";
str = "hello";
// str = "123";

let bool: true;
// bool = false;//报错

// 联合类型 a | b
let num1: 2 | "3";
num1 = 2;
num1 = "3";
// num1 = true;//报错

// 交叉类型 a & b
let str1: string & number;

let obj: { name: string } & { age: number };
obj = {
  name: "张三",
  age: 20,
};

// 联合类型|要比交叉类型&优先级要低
let obj1:
  | ({ id: number } & { name: string })
  | ({ id: string } & { age: number });
obj1 = {
  id: 1,
  name: "",
};
obj1 = {
  id: "",
  age: 1,
};

 

3.5.any类型和unknown类型

export {};

// any: 任意类型, 跳过类型检测
// unknown: 未知, Typescript3.0,描述类型不确定的变量,它会进行类型检测

let num: any = 1;
num.toFixed(2);

let num1: unknown;

if (true) {
  num1 = 1;
}
// num.a=1; //报错
(num1 as {a:number}).a=3

// 类型缩小
if (typeof num1 === "number") {
  num1.toFixed(2);
}

// 类型缩小
(num1 as number).toFixed(2);//断言

 

3.6.never类型

never表示永远不会发生值的类型

function throwErrFn():never {
    throw new Error('出错了');
}

注意:

  1. 如果函数里是死循环,返回值类型也是never

  2. never 是所有类型的子类型

 

四.接口

TypeScript 不仅能帮助前端改变思维方式,还能强化面向接口编程的思维和能力,而这正是得益于 Interface 接口类型。

4.1.定义变量和函数的类型

使用接口定义变量和函数参数的类型

interface PersonInfo {
  name: string;
  age: number;
}

// 定义变量的类型
let zhangsan: PersonInfo = {
  name: "张三",
  age: 20,
};

// 定义数组的类型
interface ArrayNumber {
  [idx: number]: number;
}

let arr1: ArrayNumber = [1, 2, 3];

// 定义函数的类型
interface PersonFn {
  (p: PersonInfo): void;
}

let Person1: PersonFn = (obj)=> {
  console.log(obj.name, obj.age);
};

注意:

  1. 很少使用接口类型来定义函数的类型,更多使用内联类型或类型别名配合箭头函数语法来定义函数类型;

 

4.2.继承

多个不同接口之间是可以实现继承的,但是如果继承的接口PersonInfo和被继承的接口NameInfo有相同的属性,并且类型不兼容,那么就会报错。

 

interface NameInfo {
  name: string;
}

interface AgeInfo {
  age: number;
}

interface PersonInfo extends NameInfo, AgeInfo {
  height: number;
}

let zs: PersonInfo = {
  name: "张三",
  age: 20,
  height: 177,
};

多个不同的接口可以实现继承,组合成一个新的接口,那么如果出现多个相同名字的接口会怎么样?

 

4.3. 多个相同接口

多个相同名字的接口,会进行合并,得到一个新的接口;这个接口的特性一般用在扩展第三方库的接口类型。

interface PersonInfo {
    name: string,
    age: number
}

interface PersonInfo {
    name: string,
    height: number
}

let zs: PersonInfo = {
  name: "张三",
  age: 20,
  height: 177,
};

 

4.4. 缺省和只读特性

interface PersonInfo {
  name?: string; // 缺省
  readonly height: number; // 只读
}

 

 

五.类型别名

接口类型的一个作用是将内联类型抽离出来,从而实现类型可复用。其实,我们也可以使用类型别名接收抽离出来的内联类型实现复用。格式:type 别名名称 = 类型定义。

export {};
// type 类型名称 = 类型定义

type ArrType<V> = { [index: number]: V };
let arr: ArrType<number> = [1, 2];

type ObjType = { name?: string; age?: number };

let obj: ObjType = {
  name: "",
  age: 1,
};

// 类型别名不能重名
// type ObjType

// 类型别名是可以直接使用交叉类型和联合类型,接口类型不能
type Type1 = number | string | boolean;
type Type2 = ArrType<number> & ObjType;

// 定义函数
type FnType = (num: number, str: string) => 1;
let fn: FnType = function (num, str) {
  return 1;
};

// Required是Typescript自带的工具类型
type ReType = Required<ObjType>;

 Interface 与 Type 的区别

实际上,在大多数的情况下使用接口类型和类型别名的效果等价,但是在某些特定的场景下这两者还是存在很大区别。

  1. 重复定义的接口类型,它的属性会叠加,这个特性使得我们可以极其方便地对全局变量、第三方库的类型做扩展

  2. 如果我们重复定义类型别名,那么就会报错

 

六.函数类型

6.1. 基础定义

显式指定函数参数和返回值的类型

const add = (a: number, b: number): number => {
     return a + b;
}

或者用type来声明函数类型

type addFnType = (a: number, b:number) => number;
let addFn: addFnType = (num1, num2) => {
    return num1 + num2;
}

6.2. 函数参数类型

参数一般有:可选参数、默认参数、剩余参数;

1. 可选参数

在类型标注的:前添加?表示 log 函数的参数 x 就是可缺省的;

function log(msg?: string):void {
    console.log(msg);
}

可缺省是不是相当于msg参数的类型就是和string | undefined等价呢?这个当然不是,string | undefined的意思是这两个类型中的一种,而可缺省是不传的意思。

2. 默认参数

function addFn1(num1: number = 1, num2: number = 2):number {
    return num1 + num2;
}

3. 剩余参数

function sum(...nums: number[]) {
    return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2); // => 3
sum(1, 2, 3); // => 6

 

标签:TypeScript,string,Object,number,学习,let,类型,name
来源: https://www.cnblogs.com/liyunxi/p/16183647.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有