精通系列）webpack（常用语法）WebStorm版本

Posted 2022-09-10 蓝盒子itbluebox

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了精通系列）webpack（常用语法）WebStorm版本相关的知识，希望对你有一定的参考价值。

TypeScript 快速入门之语法详解（一篇文章精通系列）（常用语法【二】）【WebStorm版本】

1、基础类型

紧接上篇文章建立的项目（项目案例模板下载：https://download.csdn.net/download/qq_44757034/86504095）

在main.ts当中引入

import './01_基本数据类型'

在01_基本数据类型.ts当中写一些内容

运行项目

（1）布尔值

最基本的数据类型就是简单的 true/false 值，在javascript 和 TypeScript 里叫做 boolean（其它语言中也一样）。

let isDone: boolean = false;
isDone = true;
// isDone = 2 // error

运行测试

（2）数字

和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。这些浮点数的类型是 number。除了支持十进制和十六进制字面量，TypeScript 还支持 ECMAScript 2015中引入的二进制和八进制字面量。

let a1: number = 10 // 十进制
let a2: number = 0b1010  // 二进制
let a3: number = 0o12 // 八进制
let a4: number = 0xa // 十六进制

（3）字符串

JavaScript 程序的另一项基本操作是处理网页或服务器端的文本数据。像其它语言里一样，我们使用 string 表示文本数据类型。和 JavaScript 一样，可以使用双引号（"）或单引号（'）表示字符串。


let username:string = 'tom'
// @ts-ignore
username = 'jack'
// name = 12 // error
let age:number = 12
const info = `My name is $username, I am $age years old!`
console.log(info)

（4）undefined 和 null

TypeScript 里，undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null。它们的本身的类型用处不是很大：

let u: undefined = undefined
let n: null = null

默认情况下 null 和 undefined 是所有类型的子类型。就是说你可以把 null 和 undefined 赋值给 number 类型的变量。

（5）数组

TypeScript 像 JavaScript 一样可以操作数组元素。有两种方式可以定义数组。第一种，可以在元素类型后面接上[]，表示由此类型元素组成的一个数组：

let list1: number[] = [1, 2, 3]

第二种方式是使用数组泛型，Array<元素类型>：

let list2: Array<number> = [1, 2, 3]

let list1: number[] = [1, 2, 3]
let list2: Array<number> = [1, 2, 3]

console.log(list1)
console.log(list2)

list1.forEach((value, index, array)=>
    console.log(value + ":"+index+":"+array[index])
)
list2.forEach((value, index, array)=>
    console.log(value + ":"+index+":"+array[index])
)

（6）元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
比如，你可以定义一对值分别为 string 和 number 类型的元组。

let t1: [string, number]
t1 = ['hello', 10] // OK
t1 = [10, 'hello'] // Error

循环遍历

t1.forEach((value)=>
    console.log(value)
)

当访问一个已知索引的元素，会得到正确的类型：

console.log(t1[0].substring(1)) // OK
console.log(t1[1].substring(1)) // Error, 'number' 不存在 'substring' 方法

（7）枚举

enum 类型是对 JavaScript 标准数据类型的一个补充。使用枚举类型可以为一组数值赋予友好的名字。

enum Color 
  Red,
  Green,
  Blue


// 枚举数值默认从0开始依次递增
// 根据特定的名称得到对应的枚举数值
let myColor: Color = Color.Green  // 1
console.log(myColor, Color.Red, Color.Blue)

默认情况下，从 0 开始为元素编号。

你也可以手动的指定成员的数值。

例如，我们将上面的例子改成从 1 开始编号：

enum Color Red = 1, Green, Blue
let c: Color = Color.Green

或者，全部都采用手动赋值：

enum Color Red = 1, Green = 2, Blue = 4
let c: Color = Color.Green

enum Color Red = 1, Green = 2, Blue = 4
let c: Color = Color.Blue

console.log(c)

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字：

enum Color Red = 1, Green, Blue
let colorName: string = Color[2]

console.log(colorName)  // 'Green'

enum Color Red = 1,Green,Blue

let colorName:string = Color[2]

console.log(colorName)

（8）any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。

这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。

这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。

那么我们可以使用 any 类型来标记这些变量：

let notSure: any = 4
notSure = 'maybe a string'
notSure = false // 也可以是个 boolean

在对现有代码进行改写的时候，any 类型是十分有用的，

它允许你在编译时可选择地包含或移除类型检查。

并且当你只知道一部分数据的类型时，any 类型也是有用的。

比如，你有一个数组，它包含了不同的类型的数据：

let list: any[] = [1, true, 'free']

list[1] = 100

（9）void

某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。

当一个函数没有返回值时，你通常会见到其返回值类型是 void：

/* 表示没有任何类型, 一般用来说明函数的返回值不能是undefined和null之外的值 */
function fn(): void 
  console.log('fn()')
  // return undefined
  // return null
  // return 1 // error

运行测试

声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null：

let unusable: void = undefined

（10）object

object 表示非原始类型，也就是除 number，string，boolean之外的类型。

使用 object 类型，就可以更好的表示像 Object.create 这样的 API。

例如：


function fn2(obj:object):object 
    console.log('fn2()', obj)
    return 
    // return undefined
    // return null

console.log(fn2(new String('abc')))
// console.log(fn2('abc') // error
console.log(fn2(String))

（11）联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种
需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值

function toString2(x: number | string) : string 
    return x.toString()


console.log(toString2(1))
console.log(toString2('1'))

需求2: 定义一个一个函数得到一个数字或字符串值的长度

function getLength(x: number | string) 

  // return x.length // error

  if (x.length)  // error
    return x.length
   else 
    return x.toString().length

（12）类型断言

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。
类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。
它没有运行时的影响，只是在编译阶段起作用。
TypeScript 会假设你，程序员，已经进行了必须的检查。

类型断言有两种形式。
其一是“尖括号”语法, 另一个为 as 语法
在参数多种类型的时候，当传入数据不确定的时候，需要通过断言确定对应的数据类型

/* 
类型断言(Type Assertion): 可以用来手动指定一个值的类型
语法:
    方式一: <类型>值
    方式二: 值 as 类型  tsx中只能用这种方式
*/

/* 需求: 定义一个函数得到一个字符串或者数值数据的长度 */
function getLength(x: number | string) 
  if ((<string>x).length) 
    return (x as string).length
   else 
    return x.toString().length
  

console.log(getLength('abcd'), getLength(1234))

（13）类型推断

类型推断: TS会在没有明确的指定类型的时候推测出一个类型
有下面2种情况:

定义变量时赋值了, 推断为对应的类型.
定义变量时没有赋值, 推断为any类型

/* 定义变量时赋值了, 推断为对应的类型 */
let b9 = 123 // number
// b9 = 'abc' // error

/* 定义变量时没有赋值, 推断为any类型 */
let b10  // any类型
b10 = 123
b10 = 'abc'

2、接口

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)

（1）创建接口

需求: 创建人的对象, 需要对人的属性进行一定的约束

id是number类型, 必须有, 只读的
name是string类型, 必须有
age是number类型, 必须有
sex是string类型, 可以没有

下面通过一个简单示例来观察接口是如何工作的：

/* 
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型
接口: 是对象的状态(属性)和行为(方法)的抽象(描述)
接口类型的对象
    多了或者少了属性是不允许的
    可选属性: ?
    只读属性: readonly
*/
/* 
需求: 创建人的对象, 需要对人的属性进行一定的约束
  id是number类型, 必须有, 只读的
  name是string类型, 必须有
  age是number类型, 必须有
  sex是string类型, 可以没有
*/
// 定义人的接口
interface IPerson 
  id: number
  name: string
  age: number
  sex: string

const person1: IPerson = 
  id: 1,
  name: 'tom',
  age: 20,
  sex: '男'

console.log(person1)

类型检查器会查看对象内部的属性是否与IPerson接口描述一致, 如果不一致就会提示类型错误

（2）可选属性

接口里的属性不全都是必需的。有些是只在某些条件下存在，或者根本不存在

interface IPerson 
  id: number
  name: string
  age: number
  sex?: string

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。
可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。

const person2: IPerson = 
  id: 1,
  name: 'tom',
  age: 20,
  // sex: '男' // 可以没有

如果不加问号会报错

（3）只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 readonly 来指定只读属性:

interface IPerson 
  readonly id: number
  name: string
  age: number
  sex?: string

一旦赋值后再也不能被改变了。

const person2: IPerson = 
  id: 2,
  name: 'tom',
  age: 20,
  // sex: '男' // 可以没有
  // xxx: 12 // error 没有在接口中定义, 不能有

person2.id = 2 // error

readonly vs const

最简单判断该用 readonly 还是 const 的方法是看要把它做为变量使用还是做为一个属性。

做为变量使用的话用 const，若做为属性则使用 readonly。

（4）函数类型

接口能够描述 JavaScript 中对象拥有的各种各样的外形。

除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。

它就像是一个只有参数列表和返回值类型的函数定义。

参数列表里的每个参数都需要名字和类型。

/* 
接口可以描述函数类型(参数的类型与返回的类型)
*/
interface SearchFunc 
	//参数，返回值类型
  (source: string, subString: string): boolean

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。
下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。

const mySearch: SearchFunc = function (source: string, sub: string): boolean 
  return source.search(sub) > -1

console.log(mySearch('abcd', 'bc'))

（5）类类型

类实现接口

与 C# 或 Java 里接口的基本作用一样，

TypeScript 也能够用它来明确的强制一个类去符合某种契约。

/* 
类类型: 实现接口
1. 一个类可以实现多个接口
2. 一个接口可以继承多个接口
*/
interface Alarm 
  alert(): any;

interface Light 
  lightOn(): void;
  lightOff(): void;

class Car implements Alarm 
  alert() 
      console.log('Car alert');

（6）一个类可以实现多个接口

class Car2 implements Alarm, Light 
    alert() 
        console.log('Car alert');
    
    lightOn() 
        console.log('Car light on');
    
    lightOff() 
        console.log('Car light off');
    

var car2 = new Car2();
car2.alert()
car2.lightOn()
car2.lightOff()

（7）接口继承接口

和类一样，接口也可以相互继承。

这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

interface LightableAlarm extends Alarm, Light

3、类

对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。

从 ECMAScript 2015，也就是 ES6 开始， JavaScript 程序员将能够使用基于类的面向对象的方式。

使用 TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行，而不需要等到下个 JavaScript 版本。

（1）基本示例

下面看一个使用类的例子：

/* 
类的基本定义与使用
*/

class Greeter 
  // 声明属性
  message: string

  // 构造方法
  constructor (message: string) 
    this.message = message
  

  // 一般方法
  greet (): string 
    return 'Hello ' + this.message
  


// 创建类的实例
const greeter = new Greeter('world')
// 调用实例的方法
console.log(greeter.greet())

如果你使用过 C# 或 Java，你会对这种语法非常熟悉。我们声明一个 Greeter 类。

这个类有 3 个成员：一个叫做 message 的属性，一个构造函数和一个 greet 方法。

你会注意到，我们在引用任何一个类成员的时候都用了 this。它表示我们访问的是类的成员。

后面一行，我们使用 new 构造了 Greeter 类的一个实例。

它会调用之前定义的构造函数，创建一个 Greeter 类型的新对象，并执行构造函数初始化它。

最后一行通过 greeter 对象调用其 greet 方法

（2）继承

在 TypeScript 里，我们可以使用常用的面向对象模式。

基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。

看下面的例子

class Animal
    run(distance:number)
        console.log(`Animal run $distancem`)
    

class Dog extends Animal
    cry()
        console.log('wang! wang!')
    

c以上是关于精通系列）webpack（常用语法）WebStorm版本的主要内容，如果未能解决你的问题，请参考以下文章 
 精通系列）webpack（常用语法）WebStorm版本
 Webpack 4.X 从入门到精通 - loader
 精通awk系列：awk命令结构和awk语法结构
 OpenCV | OpenCV实战从入门到精通系列四 --常用函数讲解
 OpenCV | OpenCV实战从入门到精通系列四 --常用函数讲解
 webpack 介绍 & 安装 & 常用命令