Typescript常见问题

const list = [4, 5, 6];
list.every((val, index, array) => {
  // val 当前值
  // index 索引值
  // array 数组
  return true; // cotinues
  // return false will quit the interation
})

// 基本类型用typeof, string,number,object,null,undefined
console.log(typeof str == 'string')
console.log(typeof b1)

// 引用类型，接口，类类型，Array和RegExp 用instanceof
console.log(a instanceof Achild);
console.log([] instanceof Array;
console.log({} instanceof Object);
console.log(/\d/ instanceof RegExp);

// 断言，as和<>的用法
console.log((p1 as String).length);
console.log((<String>p1).length);

// 非空断言
// 当你明确知道某个值不可能为 undefined 和 null 时，你可以用 在变量后面加上一个 !（非空断言符号）来告诉编译器："嘿！相信我，我确信这个值不为空！"
function fun(value: string | undefined | null) {
  const str: string = value; // error value 可能为 undefined 和 null
  const str: string = value!; //ok
  const length: number = value.length; // error value 可能为 undefined 和 null
  const length: number = value!.length; //ok
}

const data = `{
    "name": "Alex",
    "age": 20,
    "grade": "A",
    "marks": [
        {"sub1" : 80},
        {"sub2" : 30}
    ]
}`;

let json = JSON.parse(data);
console.log(json);

console.log(`name: ${json.name} sub1: ${json.marks[0].sub1} sub2: ${json.marks[1].sub2}`);

import * as fs from 'fs';

const file = 'text.txt';

// 同步的方法
fs.existsSync(file)

// 检查文件是否存在于当前目录中。
fs.access(file, fs.constants.F_OK, (err) => {
  console.log(`${file} ${err ? '不存在' : '存在'}`);
});

// 检查文件是否可读。
fs.access(file, fs.constants.R_OK, (err) => {
  console.log(`${file} ${err ? '不可读' : '可读'}`);
});

// 检查文件是否可写。
fs.access(file, fs.constants.W_OK, (err) => {
  console.log(`${file} ${err ? '不可写' : '可写'}`);
});

// 检查文件是否存在于当前目录中、以及是否可写。
fs.access(file, fs.constants.F_OK | fs.constants.W_OK, (err) => {
  if (err) {
    console.error(
      `${file} ${err.code === 'ENOENT' ? '不存在' : '只可读'}`);
  } else {
    console.log(`${file} 存在，且可写`);
  }
});

import * as path from 'path'

path.dirname(p) // 获取指定路径中目录名，如果当前为目录，则返回上一级目录

path.basename(p,[ext]) //获取路径中文件名,后缀是可选的，如果加，请使用'.ext'方式来匹配，则返回值中不包括后缀名

path.resolve(path1, [path2]..[pathn]) //获取绝对路径

path.relative(from, to) //获取相对路径

path.join([...paths]) //将给定的路径拼接起来，如果给定的路径长度为零，则返回”.“,表示当前的目录

var alpha =  [ “a” ， “b” ， “c” ];  
VAR num =  [ 1 ， 2 ， 3 ];

var alphaNumeric = alpha.concat(num);  

// install xml2js
npm i --save xml2js

import * as xml2js from 'xml2js'
import * as fs from 'fs';

let data = fs.readFileSync(uri.fsPath);
xml2js.parseString(data, async function (err, result) {
    if (err) {
        console.log(err);
        return;
    }
    result.element...
})

let reg1 = new RegExp('\d'); // 表示的 d (如果需要\,必须转义\\)
let reg2 = new RegExp('\\d'); // 表示的 \d
let reg3 = /\d/; // 表示的 

var str = 'b123bc456d';
var res = str.replace(/\d/g,'Q')
console.log(res) // "bQQQbcQQQd" 将所有的数字替换字符Q

var str = '123aaa456';
var reg = /\d+/;  //只捕获一次,一次尽可能多的捕获
var res = str.match(reg)
console.log(res)  // ["123", index: 0, input: "123aaa456"]
reg = /\d+?/g; //解决贪婪性、懒惰性
res = str.match(reg)
console.log(res)  // ["1", "2", "3", "4", "5", "6"]

const numArray: number[] = [6,5,8,2,1];
numArray.sort();

numArray.sort(function(x,y) {
    return x-y
});

function getSomething() {
  let r = 0;
  return new Promise(function(resolve){
    setTimeout(function(){
      r = 2;
      resolve(r);
    }, 10)
  })
}

async function compute() {
  let x = await getSomething();
  console.log(x*2)
}
compute()

const a;  // a为undefined
const b=!!a; // !a = true, !!a = false, b = false

function isString(test: any): test is string{
    return typeof test === "string";
}

function example(foo: any){
    if(isString(foo)){
        console.log("it is a string" + foo);
        console.log(foo.length); // string function
        // 如下代码编译时会出错，运行时也会出错，因为 foo 是 string 不存在toExponential方法
        console.log(foo.toExponential(2));
    }
    // 编译不会出错，但是运行时出错
    console.log(foo.toExponential(2));
}
example("hello world");

type MyType = {
  foo: string;
} & Record<string, unknown>;

interface MyType extends Record<string, unknown> {
  foo: string;
}

const myObject: MyType = {
  foo: 'bar',
  baz: 42,
};

// 默认值
function test1(a:string, b:string, c:string = 'test1') {
}

// 可选参数
function test2(a:string, b?:string, c:string = 'test2') {
}

function add(x: number, y: number): number {
  return x + y;
}

const result1 = add(1, 2); // result1 的值为 3
const result2 = add; // result2 的类型为 (x: number, y: number) => number
// result1 的值为 3，因为 add(1, 2) 表示调用函数 add 并返回它的返回值。
// 而 result2 的类型为 (x: number, y: number) => number，表示它是一个函数类型，接受两个参数并返回一个数字。

const obj = {
  add(x: number, y: number): number {
    return x + y;
  }
};

const result = obj.add(1, 2); // result 的值为 3

export class TestCallAndThis {
    /**
     * 不推荐的回调写法
     * 外部调用必须【必须】【必须】在回调参数方法后面添加.bind(this),
     * 否则可能会this异常
     */
    public static callBackTest(arg:number,callBack:Function):void
    {
        //返回 2 x arg
        let result:number=arg*2;
        //不推荐直接调用回调方法，应使用callBack.call(caller,result);
        callBack(result);
    }
    /**
     * 推荐的回调写法
     * @param arg 参数
     * @param caller 调用域 
     * @param method 指定的回调方法（兼容.bind(this) 也可以不加.bind(this) ）
     */
    public static callMethod(arg:number,caller:any,method:Function):void
    {
        //返回 2 x arg
        let result:number=arg*2;
        //推荐的做法 .call(caller,result);
        method.call(caller,result);
      
    }
}

export class Luna {
　//注意观察，this异常的时候的isLoading的值是undefind
  private isLoading:boolean = false;
  private getResult(rst:number):void
  {
      console.log("get rusult:"+rst+this.isLoading);
    
  }
  constructor()
  {
      //不推荐的回调写法， 遗漏了bind（this）
      logic.TestCallAndThis.callBackTest(1,this.getResult);
      //不推荐的回调写法， 使用了bind（this）（ √ ）
      logic.TestCallAndThis.callBackTest(1,this.getResult.bind(this));
    
      //提倡的回调写法 ，有无bind(this)都可以
      logic.TestCallAndThis.callMethod(1,this,this.getResult);
      logic.TestCallAndThis.callMethod(1,this,this.getResult.bind(this));
  }
}

promise.then(function(result) {
  console.log(result);
}, function(error) {
  console.log(error);
});
// 这将在 promise 成功时输出 result，在 promise 失败时输出 error。

type userName = string; // 基本类型
type userId = string | number; // 联合类型
type arr = number[]; 

// 对象类型
type Person = {
    id: userId; // 可以使用定义类型
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
};
// 泛型
type Tree<T> = { value: T };

const user: Person = {
    id: "901",
    name: "椿",
    age: 22,
    gender: "女",
    isWebDev: false,
};

const numbers: arr = [1, 8, 9];

interface Person {
    id: userId;
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
}

// 都可以描述 Object和Function
type Point = {
  x: number;
  y: number;
};
type SetPoint = (x: number, y: number) => void;

interface Point {
  x: number;
  y: number;
}
interface SetPoint {
  (x: number, y: number): void;
}

// 都可以被继承
// interface 继承 interface
interface Person{
    name:string
}
interface Student extends Person { stuNo: number }
// interface 继承 type
type Person{
    name:string
}
interface Student extends Person { stuNo: number }
// type 继承 type
type Person{
    name:string
}
type Student = Person & { stuNo: number }
// type 继承 interface
interface Person{
    name:string
}
type Student = Person & { stuNo: number }

// 实现 implements
interface ICat{
    setName(name:string): void;
}
class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}

// type 
type ICat = {
    setName(name:string): void;
}
class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}

// type可以定义基本类型别名, 但是interface无法定义
type userName = string
type stuNo = number

// type可以声明联合类型
type Student = {stuNo: number} | {classId: number}

// type可以声明 元组类型
type Data = [number, string];

// type不支持声明合并
// 如果你多次声明一个同名的接口，TypeScript 会将它们合并到一个声明中，并将它们视为一个接口。这称为声明合并
interface Person { name: string }
interface Person { age: number }
let user: Person = {
    name: "Tolu",
    age: 0,
};

type Person { name: string }; 
// Error: 标识符“Person”重复。ts(2300)
type Person { age: number }

const n = Number('1234');

// 判断字符串能否转为数字，当字符串不能转换为数字，得到的结果是NaN
isNaN(Number('abcd'))