typescript基础之变量声明、基本数据类型、泛型介绍

在介绍变量声明、基本数据类型、泛型之前我们来先了解一下typescript

1、什么是typescript?

TypeScript简称TS。
TS和JS之间的关系其实就是Less/Sass和CSS之间的关系。
就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展。
就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JS。
TypeScript是JavaScript的超集，因为它扩展了JavaScript，有JavaScript没有的东西。
硬要以父子类关系来说的话，TypeScript是JavaScript子类，继承的基础上去扩展。

2、为什么要使用 typescript?

 1） 简单来说就是因为JavaScript是弱类型, 很多错误只有在运行时才会被发现
而TypeScript提供了一套静态检测机制, 可以帮助我们在编译时就发现错误。

 2）  支持诸如C,C++,Java,Go等后端语言中的特性 (枚举、泛型、类型转换、命名空间、声明文件、类、接口等)

 在我们了解typescript之后我们来了解下typescript中的变量声明、类型、和泛型

1、变量声明

TypeScript 变量的命名规则：

• 变量名称可以包含数字和字母。

• 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。

• 变量名不能以数字开头。

变量使用前必须先声明，我们可以使用 var 来声明变量。

我们可以使用以下四种方式来声明变量：

1)声明变量的类型及初始值：

 2)声明变量的类型，但没有初始值，变量值会设置为 undefined：

3)声明变量并初始值，但不设置类型，该变量可以是任意类型： 

4)声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

var uname:string = "lilei"; 
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2 
console.log("名字: "+uname) 
console.log("第一个科目成绩: "+score1) 
console.log("第二个科目成绩: "+score2) 
console.log("总成绩: "+sum)

 2、基本数据类型

1）八种内置类型

const str: string = ‘中国万岁’;
const num: number = ‘666’;
const bool: boolean = true;
const u: undefined = undefined;
const n: null = null;
const big: bigint = 100n;
const sym: symbol = Symbol(‘me‘);
const obj: object = {x: 1};

2）新增（下文会详细介绍新增的几种类型用法)

枚举 enum

任意类型 any

空类型 void

元祖类型 Tupl

注意:

• null 和 undefined

  默认情况下null和undefined是所有类型的子类型，可以把null和undefined赋值给其它任何类型：

  // null 和 undefined 赋值给 number
  let num: number = 1;
  num = null;
  num = undefined;
   
  // null 和 undefined 赋值给 boolean
  let bool: boolean = false;
  bool = null;
  bool = undefined;
  
  // null 和 undefined 赋值给 object
  let obj: object = {};
  obj = null;
  obj = undefined;
  复制代码

  如果在tsconfig.json里配置了"strictNullChecks": true，null就只能赋值给any、unknown和它本身的类型（null），undefined就只能赋值给any、unknown、void和它本身的类型（undefined）。

  number 和 bigint

  虽然number和bigint都表示数字，但是这两个类型并不兼容，比如下文会报错：

  let big: bigint = 100n;
  let num: number = 1;
  num = big; // Type 'bigint' is not assignable to type 'number'

  元祖类型 Tupl

•  众所周知，数组一般由同种类型的值组成，但有时我们需要在单个变量中存储不同类型的值，这时候我们就可以使用元组。在 JavaScript 中是没有元组的，元组是 TypeScript 中特有的类型，其工作方式类似于数组。

• 元组最重要的特性是可以限制数组元素的个数和类型，它特别适合用来实现多值返回。

• // [string, number] 就是元组类型。数组 x 的类型必须严格匹配，且个数必须为2
  let x: [string, number]; 

  x = [‘Hi’, 666]; // OK 
  x = [666, ‘Hi’]; // error
  x = [‘Hi’, 666, 888]; // error

• 元组类型的可选元素

  在定义元组类型时，我们也可以通过?来声明元组类型的可选元素：

  // 要求包含一个必须的字符串属性，和一个可选的布尔值属性
  let arr: [string, boolean?];
  
  arr = ['一个能打的都没有', true];
  console.log(arr); // ['一个能打的都没有', true]
  
  arr = ['如果暴力不是为了杀戮'];
  console.log(arr); // ['如果暴力不是为了杀戮']
  复制代码

  元组类型的剩余元素

  元组类型里最后一个元素可以是剩余元素，形式为...x，你可以把它当作 ES6 中的剩余参数。剩余元素代表元组类型是开放的，可以有0个或者多个额外的元素。例如，[number, ...string[]]表示带有一个number类型的元素和任意数量string类型的元素的元组类型。举个栗子：

  let arr: [number, ...string[]];
  arr = [1, '赵信']; // ok
  arr = [1, '赵信', '吕布', '亚索']; // ok

• 空类型 void

 void表示没有任何类型，和其他类型是平等关系，不能直接赋值:

let a: void; 
let b: number = a; // Error
复制代码

你只能为它赋予null和undefined（在strictNullChecks未指定为true时）。声明一个void类型的变量没有什么大用，我们一般也只有在函数没有返回值时去声明。

值得注意的是，方法没有返回值将得到undefined，但是我们需要定义成void类型，而不是undefined类型。否则将报错:

function fun(): undefined {
  console.log("this is TypeScript");
};
fun(); // Error

  any类型

在 TS 中，任何类型都可以被归为any类型，any类型是类型系统的顶级类型。

如果是一个普通类型，在赋值过程中改变类型是不被允许的：

let a: string = '伊泽瑞尔，你需要地图吗？';
a = 666; // Type 'number' is not assignable to type 'string'
复制代码

但如果是any类型，则允许被赋值为任意类型：

let a: any = 666;
a = '哈哈哈';
a = false;
a = null;
a = undfined;
a = [];
a = {};
复制代码

如果变量在声明的时候，未指定其类型，那么它会被识别为any类型：

let something;
something = '啦啦啦';
something = 888;
something = false;
复制代码

等价于：

let something: any;
something = '啦啦啦';
something = 888;
something = false;
复制代码

使用any类型就失去了使用TS的意义，长此以往会放松我们对自己的要求，尽量不要使用any。

enum枚举

enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

// 默认情况从0开始为元素编号，也可手动为1开始
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

let colorName: string = Color[2];
console.log(colorName);  // 输出'Green'因为上面代码里它的值是2
复制代码

另一个很好的例子是使用枚举来存储应用程序状态。

3、泛型 Generics

软件工程的一个主要部分就是构建组件，构建的组件不仅需要具有明确的定义和统一的接口，同时也需要组件可复用。支持现有的数据类型和将来添加的数据类型的组件为大型软件系统的开发过程提供很好的灵活性。

在C#和Java中，可以使用”泛型“来创建可复用的组件，并且组件可支持多种数据类型。这样便可以让用户根据自己的数据类型来使用组件。

1） 泛型方法

在TypeScript里，声明泛型方法有以下两种方式：

function gen_func1<T>(arg: T): T {
    return arg;
}
// 或者
let gen_func2: <T>(arg: T) => T = function (arg) {
    return arg;
}
复制代码

调用方式也有两种：

gen_func1<string>('Hello world');
gen_func2('Hello world'); 
// 第二种调用方式可省略类型参数，因为编译器会根据传入参数来自动识别对应的类型。
复制代码

2） 泛型与Any

Ts 的特殊类型 Any 在具体使用时，可以代替任意类型，咋一看两者好像没啥区别，其实不然：

// 方法一：带有any参数的方法
function any_func(arg: any): any {
    console.log(arg.length);
		return arg;
}

// 方法二：Array泛型方法
function array_func<T>(arg: Array<T>): Array<T> {
	  console.log(arg.length);
		return arg;
}
复制代码

• 方法一，打印了arg参数的length属性。因为any可以代替任意类型，所以该方法在传入参数不是数组或者带有length属性对象时，会抛出异常。
• 方法二，定义了参数类型是Array的泛型类型，肯定会有length属性，所以不会抛出异常。

3）泛型类型

泛型接口：

interface Generics_interface<T> {
    (arg: T): T;
}
 
function func_demo<T>(arg: T): T {
    return arg;
}

let func1: Generics_interface<number> = func_demo;
func1(123);     // 正确类型的实际参数
func1('123');   // 错误类型的实际参数

代码007普通

打赏 收藏 海报 链接