TypeScript - TypeScript-S - 《🥇前端进阶目录》

快速上手
- vscode中自动编译
- 使用webpack打包TS
基本语法

快速上手

//全局安装
npm install -g typescript

//查看版本
tsc -v

一个例子

//hello.ts
function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));

执行

tsc hello.ts

vscode中自动编译

tsc --init

终端 - 运行任务

注：如果出现报错，需要配置默认终端为powerShell。配置完成之后一定要关闭 vscode 在重新打开

使用webpack打包TS

npm install -D typescript 
npm install -D webpack@4.41.5 webpack-cli@3.3.10 webpack-dev-server@3.10.2
npm install -D html-webpack-plugin clean-webpack-plugin  ts-loader  cross-env
//为防止错误
"devDependencies": {
  "clean-webpack-plugin": "3.0.0",
  "cross-env": "^7.0.3",
  "html-webpack-plugin": "^4.5.0",
  "ts-loader": "^8.0.11",
  "typescript": "^4.4.2",
  "webpack": "^4.41.5",
  "webpack-cli": "^3.3.10",
  "webpack-dev-server": "^3.10.2"
}

基本语法

基础类型

布尔值

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

数字

let a1: number = 10 // 十进制

字符串

let name:string = 'tom'
name = 'jack'
// name = 12 // error
let age:number = 12
const info = `My name is ${name}, I am ${age} years old!`

undefined 和 null

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

数组

//方式一
let list1: number[] = [1, 2, 3]
//方式二  Array<元素类型>
let list2: Array<number> = [1, 2, 3]

元祖（Tuple）
元祖类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

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

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

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

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

any
有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any 类型来标记这些变量：

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

在对现有代码进行改写的时候，any 类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。并且当你只知道一部分数据的类型时，any 类型也是有用的。比如，你有一个数组，它包含了不同的类型的数据：

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

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

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))

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

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

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

function getLength(x: number | string) {
  // return x.length // error
  if (x.length) { // error
    return x.length
  } else {
    return x.toString().length
  }
}

类型断言
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 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))

类型推断
类型推断: TS会在没有明确的指定类型的时候推测出一个类型
有下面2种情况: 1. 定义变量时赋值了, 推断为对应的类型. 2. 定义变量时没有赋值, 推断为any类型

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

接口

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

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

readonly vs cosnt
最简单判断该用 readonly 还是 const 的方法是要看要把它作为变量使用还是作为一个属性，作为变量使用的话用const,若作为属性则使用 readonly

类

对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件，从ES6开始， JavaScript 程序员将能够使用基于类的面向对象的方式

基本示例

/* 
类的基本定义与使用
*/
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())

继承
在 TypeScript 里，我们可以使用常用的面向对象模式。基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。

/* 
类的继承
*/
class Animal {
  run (distance: number) {
    console.log(`Animal run ${distance}m`)
  }
}
class Dog extends Animal {
  cry () {
    console.log('wang! wang!')
  }
}
const dog = new Dog()
dog.cry() 
dog.run(100) // 可以调用从父中继承得到的方法

公共，私有与受保护的修饰符
默认为 public ，在TypeScript 里，成员都默认为public
private ，它就不能在声明它的类的外部访问
protected , 它的成员在派生类中仍然可以访问

readonly修饰符
readonly , 将属性设置为只读的，只读属性必须在声明时或构造函数里被初始化

class Person {
  readonly name: string = 'abc'
  constructor(name: string) {
    this.name = name
  }
}
let john = new Person('John')
// john.name = 'peter' // error

存取器
TypeScript 支持通过 getters/setters 来截取对对象成员的访问。它能帮助你有效的控制对对象成员的访问。

class Person {
  firstName: string = 'A'
  lastName: string = 'B'
  get fullName () {
    return this.firstName + '-' + this.lastName
  }
  set fullName (value) {
    const names = value.split('-')
    this.firstName = names[0]
    this.lastName = names[1]
  }
}
const p = new Person()
console.log(p.fullName)
p.firstName = 'C'
p.lastName =  'D'
console.log(p.fullName)
p.fullName = 'E-F'
console.log(p.firstName, p.lastName)

静态属性
我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。

/* 
静态属性, 是类对象的属性
非静态属性, 是类的实例对象的属性
*/
class Person {
  name1: string = 'A'
  static name2: string = 'B'
}
console.log(Person.name2)
console.log(new Person().name1)

抽象类
抽象类做为其它派生类的基类使用。它们不能被实例化。不同于接口，抽象类可以包含成员的实现细节。 abstract 关键字是用于定义抽象类和在抽象类内部定义抽象方法。

/* 
抽象类
  不能创建实例对象, 只有实现类才能创建实例
  可以包含未实现的抽象方法
*/
abstract class Animal {
  abstract cry ()
  run () {
    console.log('run()')
  }
}
class Dog extends Animal {
  cry () {
    console.log(' Dog cry()')
  }
}
const dog = new Dog()
dog.cry()
dog.run()

观看记录
https://www.bilibili.com/video/BV1CK411u75G?p=29&spm_id_from=pageDriver

文档地址
https://24kcs.github.io/vue3_study/chapter2/1_type.html#%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80