前端技术分享

{
  /****** 根选项 ******/
  "include": ["./src/**/*"],  // 指定被编译文件所在的目录，** 表示任意目录，* 表示任意文件
  "exclude": [],              // 指定不需要被编译的目录
  files: ["demo.ts"],         // 指定被编译的文件

  
  /****** 项目选项 ******/
  "compilerOptions": {
    "target": "ES6",              // 目标语言的版本
    "module": "commonjs",         // 生成代码的模板标准
    "lib": ["DOM", "ES5", "ES6", "ES7", "ScriptHost"], // TS需要引用的库
    "outDir": "./dist",           // 指定输出目录
    "rootDir": "./",              // 指定输出文件目录(用于输出)，用于控制输出目录结构
    "allowJs": true,              // 允许编译器编译JS，JSX文件
    "checkJs": true,              // 允许在JS文件中报错，通常与allowJS一起使用
    "removeComments": true,       // 删除注释
    "esModuleInterop": true,      // 允许export=导出，由import from 导入

    /****** 严格检查选项 ******/
    "strict": true,               // 开启所有严格的类型检查
    "alwaysStrict": true,         // 在代码中注入'use strict'
    "noImplicitAny": true,        // 不允许隐式的any类型
    "noImplicitThis": true,       // 不允许this有隐式的any类型
    "strictNullChecks": true,     // 不允许把null、undefined赋值给其他类型的变量
    "strictBindCallApply": true,  // 严格的bind/call/apply检查
    "strictFunctionTypes": true,  // 不允许函数参数双向协变
    "strictPropertyInitialization": true,   // 类的实例属性必须初始化
  
    /****** 额外检查 ******/
    "noUnusedLocals": true,             //是否检查未使用的局部变量
    "noUnusedParameters": true,         //是否检查未使用的参数
    "noImplicitReturns": true,          //检查函数是否不含有隐式返回值
    "noImplicitOverride": true,         //是否检查子类继承自基类时，其重载的函数命名与基类的函数不同步问题
    "noFallthroughCasesInSwitch": true, //检查switch中是否含有case没有使用break跳出
    "noUncheckedIndexedAccess": true,   //是否通过索引签名来描述对象上有未知键但已知值的对象
    "noPropertyAccessFromIndexSignature": true, //是否通过" . “(obj.key) 语法访问字段和"索引”( obj[“key”])， 以及在类型中声明属性的方式之间的一致性
  
    /****** 实验选项 ******/
    "experimentalDecorators": true,     //是否启用对装饰器的实验性支持，装饰器是一种语言特性，还没有完全被 JavaScript 规范批准
    "emitDecoratorMetadata": true,      //为装饰器启用对发出类型元数据的实验性支持
  
    /****** 高级选项 ******/
    "forceConsistentCasingInFileNames": true,   //是否区分文件系统大小写规则
    "extendedDiagnostics": false,               //是否查看 TS 在编译时花费的时间
    "noEmitOnError": true,                      //有错误时不进行编译
    "resolveJsonModule": true,                  //是否解析 JSON 模块
  },
}

// 不使用泛型
function getName01(name: string): string {
  return name
}
console.log(getName01('翠花'))  // 翠花

// 使用泛型
function getName02<T>(name: T): T {
  return name
}
console.log(getName02<string>('翠花'))  // 翠花

// 不使用泛型
function getName01(name: string | number): string | number {
  return name
}
console.log(getName01('翠花'))   // 翠花
console.log(getName01(123))     // 123

// 使用泛型
function getName02<T>(name: T): T {
  return name
}
console.log(getName02<string>('翠花'))   // 翠花
console.log(getName02<number>(123))     // 123

function getName03<T>(name: T): T {
  return name
}
console.log(getName03<string>('隔壁老王'))  // 隔壁老王

interface GetName04 {
  <T>(name: T): T
}
function getName05<T>(name: T): T {
  return name
}
let my_name: GetName04 = getName05
console.log(my_name('小红'))  // 小红

interface GetName06 {
  <T>(name: T): T;
  <U>(age: U): U;
}
function getName07<T, U>(args: { name: T, age: U }) : { name: T, age: U } {
  return args
}
let my_name_age: GetName06 = getName07
console.log(my_name_age({ name: '小红', age: 18 }))  // { name: '小红', age: 18 }

class Add<T> {
  value: T;
  addFn: (a: T, b: T) => T
}
let add_a_b = new Add<number>()
add_a_b.value = 666
console.log(add_a_b.value)  // 666
add_a_b.addFn = (a, b) => {
  return a + b
}
console.log(add_a_b.addFn(2, 3))  // 5

function getName08<T>(name: T): T {
  return `我是${name}`  // 不能将类型“string”分配给类型“T”。
}
console.log(getName08<string>('隔壁老王'))

function getName08<T>(name: T): any {
  return `我是${name}`
}
console.log(getName08<string>('隔壁老王'))  // 我是隔壁老王

interface Str {
  name: String
}
function getName08<T extends Str>(person: T): any {
  return `我是${person.name}呀`
}
console.log(getName08({ name: '隔壁老王'}))  // 我是隔壁老王呀

function getObj<T, U extends keyof T>(obj: T, search: U) {
  return obj[search]
}
const students = {
  1: { name: '张三', age: 16 },
  2: { name: '李四', age: 17 },
  3: { name: '王五', age: 18 },
  4: { name: '赵六', age: 19 },
  5: { name: '老七', age: 20 }
}
console.log(getObj(students, 3)) // { name: '王五', age: 18 }
console.log(getObj(students, 5)) // { name: '老七', age: 20 }
console.log(getObj(students, 6)) // 类型“6”的参数不能赋给类型“2 | 3 | 1 | 4 | 5”的参数。

const a = Symbol()
console.log(typeof a) // symbol

let b = Symbol('key')
let c = Symbol('key')
console.log(b === c)  // false

let d = Symbol()
let e = {
  [d]: 'value'
}
console.log(e[d]) // value

const f = Symbol()
class G {
  [f]() {
    return 'value'
  }
}
const h = new G()
console.log(h[f]()) // value

const i = Symbol('i')
console.log(i.toString()) // Symbol(i)
console.log(Boolean(i))   // true

const name = Symbol('name')
const person = {
  [name]: '老王',
  age: 30,
  sex: '男'
}
let for_key = []
for (let key in person) {
  for_key.push(key)
}
console.log(for_key)    // [ 'age', 'sex' ]
console.log(Object.keys(person))  // [ 'age', 'sex' ]
console.log(Object.getOwnPropertyNames(person)) // [ 'age', 'sex' ]
console.log(JSON.stringify(person))   // {"age":30,"sex":"男"}

const name = Symbol('name')
const person = {
  [name]: '老王',
  age: 30,
  sex: '男'
}
console.log(Object.getOwnPropertySymbols(person)) // [ Symbol(name) ]

const name = Symbol('name')
const person = {
  [name]: '老王',
  age: 30,
  sex: '男'
}
console.log(Reflect.ownKeys(person))  // [ 'age', 'sex', Symbol(name) ]

enum Type01 {
  red,
  green,
  blue
}
console.log(Type01.red)   // 0
console.log(Type01.green) // 1
console.log(Type01.blue)  // 2

enum Type02 {
  red = 1,
  green,
  blue
}
console.log(Type02.red)   // 1
console.log(Type02.green) // 2
console.log(Type02.blue)  // 3

enum Type03 {
  red,
  green = 3,
  blue
}
console.log(Type03.red)   // 0
console.log(Type03.green) // 3
console.log(Type03.blue)  // 4

enum Type04 {
  red = 'red',
  green = 'green',
  blue = 'blue'
}
console.log(Type04.red)   // red
console.log(Type04.green) // green
console.log(Type04.blue)  // blue

enum Type05 {
  red,      // 正常
  green = 'green',
  blue      // 枚举成员必须具有初始化表达式
}
console.log(Type05.red)   // 0
console.log(Type05.green) // green

enum Type06 {
  no = 0,
  yes = 'yes'
}
console.log(Type06.no)  // 0
console.log(Type06.yes) // yes

enum Type07 {
  name = '老王',
  sex = '男'
}
interface Person {
  name: Type07.name,
  sex: Type07.sex
}
let person: Person = {
  name: Type07.name,
  sex: Type07.sex
}
console.log(person.name)  // 老王
console.log(person.sex)   // 男

// 如下，Type08 中的第一个成员 name 没有初始化，在这种情况下，它被赋值为 0，而第二个成员sex的值是第一个成员name的值加1。
enum Type08 {
  name,
  sex,
  age = 18
}
console.log(Type08.name)  // 0
console.log(Type08.sex)   // 1
console.log(Type08.age)   // 18

const enum Type09 {
  red,
  green,
  blue
}
const color = [
  Type09.red,
  Type09.green,
  Type09.blue
]
console.log(color)  // [ 0, 1, 2 ]

// const 声明
const enum Type10 {
  name = '老王'
}
console.log(Type10.name)

// 编译后
console.log("\u8001\u738B" /* Type10.name */);

// 普通声明
enum Type11 {
  name = '老王'
}

// 编译后
var Type11;
(function (Type11) {
    Type11["name"] = "\u8001\u738B";
})(Type11 || (Type11 = {}));

enum Type12 {
  name
}
const n = Type12.name
console.log(Type12[n])    // name

// 编译后
var Type12;
(function (Type12) {
    Type12[Type12["name"] = 0] = "name";
})(Type12 || (Type12 = {}));
var n = Type12.name;
console.log(Type12[n]); // name

// 元素隐式具有 "any" 类型，因为类型为 "Type13.name" 的表达式不能用于索引类型 "typeof Type13"。
  类型“typeof Type13”上不存在属性“[Type13.name]”。
enum Type13 {
  name = '张三'
}
const na = Type13.name
console.log(Type13[na])    // 报错

enum Type14 {
  A,
  B,
  C
}
function fn(obj: { A: number }) {
  console.log(obj.A)  // 0
}
fn(Type14)

enum Type15 {
  A,
  B
}
Type15.A = 1  // 无法为“A”赋值，因为它是只读属性

enum Type16 {
  A = 1,
  B = 2
}
let C: Type16 = 3 // 已声明“C”，但从未读取其值，不能将类型“3”分配给类型“Type16”

// 解决方法
enum Type16 {
  A = 1,
  B = 2
}
let C: Type16 = 2

// 或者
enum Type16 {
  A = 1,
  B = 2,
  C = 3
}
let C: Type16 = 3

enum Type17 {
  A,                  // 默认值
  B = 2,              // 常量
  C = 3 + 4,          // 常量表达式
  D = 'abc'.length,   // 非常量表达式
  E = Math.random(),  // 随机数
  F,  // 枚举成员必须具有初始化表达式
  G   // 枚举成员必须具有初始化表达式
}

enum Type17 {
  A,                  // 默认值
  B = 2,              // 常量
  C = 3 + 4,          // 常量表达式
  D = 'abc'.length,   // 非常量表达式
  E = Math.random(),  // 随机数
  F = 0,
  G
}

enum Week{
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday
}

enum People {
  name = '小红',
  age = 18
}
console.log(People.name)
console.log(People.age)

enum Week{
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday
}

type Tuple = [ string, number ]
const person_01: Tuple = [ '张三', 24 ]

const person_02: [ string, number ] = [ '李四', 30 ]

let person_03: [ string, number ] = [ '王五', 18 ]
person_03[0] = '老六'
person_03[1] = 25
console.log(person_03[0])  // 老六
console.log(person_03[1])  // 25
console.log(person_03)     // [ '老六', 25 ]

let PersonFn = (person: [ string, number ]) => {
  console.log(person[0])  // 小七
  console.log(person[1])  // 20
  // console.log(person[2])
  console.log(person)     // [ '小七', 20 ]
}
PersonFn([ '小七', 20 ])

// 长度为 "2" 的元组类型 "[string, number]" 在索引 "2" 处没有元素。
console.log(person[2])

let TupleFn = (person: [ string, number ]) => {
  const [name, age] = person
  console.log(`我是${name}，今年${age}岁`)  // 我是老王，今年28岁
}
TupleFn([ '老王', 28 ])

type Man = [string, number, string?]
function ManFn(person: Man) {
  console.log(person.length)
}
ManFn(['老王', 40])       // 2
ManFn(['老王', 40, '男']) // 3

let person: [string, number, string] = ['老王', 40, '男']
const [name, age, sex] = person
console.log(`我是${name}，今年${age}岁，${sex}`)  // 我是老王，今年40岁，男

// ts
class Person<T> {}

// 编译成js后
var Person = /** @class */ (function () {
    function Person() {
    }
    return Person;
}());

class Person<T> {
  // 字段
  name: string
  // 构造函数
  constructor(name: string) {
    this.name = name
  }
  // 方法
  getName() {
    return 'getName: ' + this.name
  }
}
// 创建一个对象
const person = new Person('老王')
// 访问字段
console.log(person.name)  // 老王
// 访问方法
console.log(person.getName()) // getName: 老王

class Person<T> {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}
class Info extends Person<unknown> {
  sex: string
  constructor(name: string, age: number, sex: string) {
    super(name, age)
    this.sex = sex
  }
  getInfo() {
    return `姓名：${this.name}，年龄：${this.age}，性别：${this.sex}`
  }
}
const info = new Info('翠花', 18, '女')
console.log(info.getInfo()) // 姓名：翠花，年龄：18，性别：女

class Person<T> {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}
class Like extends Person<unknown> {
  mylike: string
  constructor(name: string, age: number, mylike: string) {
    super(name, age)
    this.mylike = mylike
  }
}
class Info extends Like {
  sex: string
  constructor(name: string, age: number, mylike: string, sex: string) {
    super(name, age, mylike)
    this.sex = sex
  }
  getInfo() {
    return `姓名：${this.name}，年龄：${this.age}，性别：${this.sex}，爱好：${this.mylike}`
  }
}
const info = new Info('翠花', 18, '游泳', '女')
console.log(info.getInfo()) // 姓名：翠花，年龄：18，性别：女，爱好：游泳

class Father<T> {
  loveFn() {
    console.log('我是父类，我爱喝红牛')
  }
}
class Son extends Father<unknown> {
  loveFn() {
    console.log('我是子类，我爱喝饮料')
  }
}
const son = new Son()
son.loveFn()  // 我是子类，我爱喝饮料

class Father<T> {
  loveFn() {
    console.log('我是父类，我爱喝红牛')
  }
}
class Son extends Father<unknown> {
  loveFn() {
    super.loveFn()
    console.log('我是子类，我爱喝饮料')
  }
}
const son = new Son()
son.loveFn()  // 我是父类，我爱喝红牛   我是子类，我爱喝饮料

class Person<T> {
  static person_name: string
  static getName() {
    return Person.person_name
  }
}
Person.person_name = '翠花'
console.log(Person.getName()) // 翠花

class Person<T> {}
const person = new Person()
console.log(person instanceof Person) // true

interface Info {
  name: string,
  age: number
}
class Person implements Info {
  name: string
  age: number
  sex: string
  constructor(name: string, age: number, sex: string) {
    this.name = name
    this.age = age
    this.sex = sex
  }
  getInfo() {
    return `姓名：${this.name}，年龄：${this.age}，性别：${this.sex}`
  }
}
const person = new Person('翠花', 18, '女')
console.log(person.getInfo()) // 姓名：翠花，年龄：18，性别：女

class Person {
  _name: string
  get name() {
    return this._name
  }
  set name(n:string) {
    this._name = n
  }
}
const person = new Person()
person.name = '老王'
console.log(person._name) // 老王

class Person {
  static _name: string
  get name() {
    return Person._name
  }
  set name(n: string) {
    Person._name = n
  }
  static {
    console.log('static类中的块')
    Person._name = '老王'
  }
}
const person = new Person()
console.log(person.name)  // 老王
person.name = '翠花'
console.log(person.name)  // 翠花

// 抽象类
abstract class A {
  // 抽象属性
  abstract name: string
  // 抽象方法
  abstract getName(): void
  // 具体方法
  setName(name: string) {
    this.name = name
  }
}
class B extends A {
  name: string
  constructor(name: string) {
    super()
    this.name = name
  }
  getName(): string {
    return this.name
  }
}
const b = new B('老王')
console.log(b.getName())  // 老王
b.setName('翠花')
console.log(b.getName())  // 翠花

class Person {
  name: string
  age: number
}

// 类型别名
type A_Type = {
  name: string,
  age: number
}
type B_Type = (args: boolean) => void
const a:B_Type = (args: boolean) => args

//接口类型
interface C_Interface {
  name: string,
  age: number
}
interface D_Interface {
  (args: boolean): void
}
const b:D_Interface = (args: boolean) => args

type A_Type = {
  name: string,
}
type B_Type = {
  age: number
}
interface C_Interface {
  sex: string,
}
interface D_Interface {
  phone: number | string
}

// type 继承 type
type Type_Extends_Type = A_Type & B_Type & { adrress: string }
const a: Type_Extends_Type = {
  name: '翠花',
  age: 18,
  adrress: '中国'
}

// interface 继承 interface
interface Interface_Extends_Interface extends C_Interface, D_Interface {
  job: string
}
const b: Interface_Extends_Interface = {
  sex: '女',
  phone: 13222222222,
  job: '程序员'
}

// type 继承 interface
type Type_Extends_Interface = A_Type & C_Interface
const c: Type_Extends_Interface = {
  name: '翠花',
  sex: '女',
}

// interface 继承 type
interface Interface_Extends_Type extends B_Type, D_Interface {}
const d: Interface_Extends_Type = {
  age: 18,
  phone: 13222222222,
}

// interface
interface IDog {
  setNameFn(name: string): void
}
class Dog implements IDog {
  setNameFn(name: string): void {
      console.log('取名成功')
  }
}

// type
type ICat = {
  setNameFn: (name: string) => void
}
class Cat implements ICat {
  setNameFn(name: string): void {
    console.log('取名成功')
  }
}

// ts
type AA = {
  name: string
}
interface BB {
  age: number
}
const cc: AA = {
  name: '老王'
}
const dd: BB = {
  age: 30
}

// 编译成js后
var cc = {
    name: '老王'
};
var dd = {
    age: 30
};

type PersonType = {
  name: string
}
interface PersonInterface {
  name: string
}

type A = string
type b = number

type C = string | number
type D = { name: string } | { age: number }
const e: D = { name: '老王' }
const f: D = { age: 30 }
const g: D = { name: '老王', age: 30 }

type H = [ string, number, boolean ]
const i: H = [ '老王', 30, true ] 

interface Info_Interface {
  name: string
}
interface Info_Interface {
  age: number
}
const j: Info_Interface = {
  name: '老王',
  age: 30
}

interface K {
  name: string
}
interface L {
  age: number
}
interface M extends K, L {
  sex: string
}
const n: M = {
  name: '老王',
  age: 30,
  sex: '男'
}
console.log(n)  // { name: '老王', age: 30, sex: '男' }

type O = {
  name: string
}
type P = {
  age: number
}
type Q = {
  sex: string
} & O & P
const r: Q = {
  name: '老王',
  age: 30,
  sex: '男'
}
console.log(r)  // { name: '老王', age: 30, sex: '男' }

const div = document.createElement('div')
type S = typeof div   // HTMLDivElement

type Keys = 'name' | 'age'
type T = {
  [ key in Keys ]: string | number
}
const u: T = {
  name: '老王',
  age: 30
}
console.log(u)  // { name: '老王', age: 30 }

type num = number
const a: num = 1

type info = number | string
const x: info = 2
const y: info = 'info'
const z: info = true    // 报错，类型别名info并没有布尔类型对象类型别名

type obj = {
  name: string,
  age: number
}
const b: obj = {
  name: '老王',
  age: 18
}
console.log(b)    // { name: '老王', age: 18 }

type fn = (name: string) => string
const c:fn = (name: string) => name
console.log(c('翠花'))    // 翠花

type arr = [ string, number ]
const data: arr = [ '老王', 18 ]
console.log(data)   // [ '老王', 18 ]

type Person = {
  name: string,
  age: number
} & {
  sex: string
}
const person = {
  name: '翠花',
  age: 18,
  sex: '女'
}
console.log(person) // { name: '翠花', age: 18, sex: '女' }