TypeScript 基础知识 ​

// 布尔类型
let flag:boolean = false
// 数字
let total: number = 6
// 字符串
let name: string = "liaoyi"
// 使用模板字符串
let name: string = `Hello ${name}!`
// 未定义类型
let hasKnow: undefined = undefined
// 空值
let isNull: null = null

let age: number | string = '22'
age = 34

interface IUser {
  name: string;
  age: string;
  smoking: string;
}
interface IUser1 {
  name: string;
  age: number;
}

// 此时的user 有IUser和IUser1共有属性: name, age
// 并且 age 的类型为 string | number

let user: IUser | IUser1 = {
    name: 'liaoyi',
    age: '4234',
    smoking: '31232'
}

let name:any = 'linYi'
name = 007
name = false
name = ['🎉','👀', '✨']

// 定义类型别名
type Name = string;
// 定义函数别名
type NameResolver = () => string;
// 定义联合类型别名
type NameOrResolver = Name | NameResolver | number;

// 定义值的别名
type Value = boolean | 0 | 1 | '0' | '1'

function getName(n: NameOrResolver): Name {
  if (typeof n === 'string') {
    return n;
  } else {
    return n();
  }
}

let name:Name = '我是liaoyi'
let nameResolver:NameResolver = () => 'Hello 2023!'

let sex:NameOrResolver = '男'
let sex2:NameOrResolver = 1
let sex2:NameOrResolver =  ()=> '男'

// 变量value的值，只能是上面Value中定义的值
let value: Value = true

type Field = string | number
let field: Field

field = 'first'
field = 1

type Field = {
  num: number;
  str: string;
}

interface inter {
  num: number;
  str: string;
}

type Container<T> = {
  value: T
}

let container: Container<string> = {
  // 此时 value 的类型是根据传递的类型参数决定的
  value: 'str'
}

// 也可以使用类型别名来在属性里引用自己
type Content<T> = {
  value: T;
  children?: Content<T>
}

let content: Content<string> = {
  value: 'str',
  children: {
    value: 'str2'
  }
}

// 通过字面量和|可以确定变量的取值范围
let color: 'red' | 'blue' | 'black';
let num: 33 | 44 | 55 | 66;

// 自定义类型
type myType = 'sing' | 'dance' | 'rap' | 'basketball'
let a:myType = 'sing'

interface Colorful {
  color: string
}

interface IRun {
  running: () => void
}

type NewType = Colorful & IRun

const obj: NewType = {
  color: 'red',
  running: function() {
    
  }
}

let list: number[] = [1, 2, 3]
let emogiList: string[] = ['😊', '😂', '🤣']

let tagList: (number | string )[] = [22, 66, 89]

tagList = ['Rap', 'Sing', 'Dance', 8787, 857]

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

let userList: Array<number | string> = ['liaoyi', 22, 'javaScript']

 // 定义一个只能是数字类型的二维数组
let list:number[][] = [ [1, 2, 3], [4, 5, ,6], [7, 8]]  
 // 定义一个只能是数字、字符串类型的二维数组
let list1:number | string [][][] = [[['45', 34, 'Hello']]]

// 使用泛型定义
let list3:Array<Array<number | string >> = [ [1,3,7,'2022'],['九月','二十二']]

enum Types{
    Red = 0,
    Green = 1,
    Blue = 2
}

//默认就是从 0 开始的，可以不写值
enum Types {
    Red,
    Green,
    Blue
}

enum Week{
    MON = 1,
    TUE,
    WED,
    THU,
    FRI,
    STA,
    SUN
}

enum Week{
    MON = '星期一',
    TUE = '星期二',
    WED = '星期三',
    THU = '星期四',
    FRI = '星期五',
    STA = '星期六',
    SUN = '星期天',
}

enum Types{
    yyds,
    dddd
}
interface A {
    red: Types.yyds
}
 
let obj:A = {
    res: Types.yyds,
    red: 1  // 应为Types.yyds是数字枚举，所以这里可以直接给初始值为1
}

enum Week2{
    MON = '星期一',
    TUE = '星期二',
    WED = '星期三',
    THU = '星期四',
    FRI = '星期五',
    STA = '星期六',
    SUN = '星期天',
}

let code: string = '星期一'
if (code === Week2.MON) {
    // Do something
}

var Week2;
(function (Week2) {
    Week2["MON"] = "\u661F\u671F\u4E00";
    Week2["TUE"] = "\u661F\u671F\u4E8C";
    Week2["WED"] = "\u661F\u671F\u4E09";
    Week2["THU"] = "\u661F\u671F\u56DB";
    Week2["FRI"] = "\u661F\u671F\u4E94";
    Week2["STA"] = "\u661F\u671F\u516D";
    Week2["SUN"] = "\u661F\u671F\u5929";
})(Week2 || (Week2 = {}));
var code = '星期一';
if (code === Week2.MON) {
    // Do something
}

const enum Week2{
    MON = '星期一',
    TUE = '星期二',
    WED = '星期三',
    THU = '星期四',
    FRI = '星期五',
    STA = '星期六',
    SUN = '星期天',
}

let code: string = '星期一'
if (code === Week2.MON) {
    // Do something
}

var code = '星期一';
if (code === "\u661F\u671F\u4E00" /* MON */) {
    // Do something
}

enum Types {
  success,
  error
}

let success:number = Types.success  // 获取value值
let key = Types[success]    // 反向映射: 通过value读取key值

console.log(success) 		 // 0

console.log(key)			   // success
console.log(Types[0])    // success
console.log(Types['1'])  // error

enum Types{
    No = 'No',
    Yes = 1
}

enum Person{
  name = "aaa",
  age = 3 * 6  // error
}

// 常量例子
enum Obj{
  index, //枚举表达式字面量
  index1 = index, //引用常量枚举成员
  age = 2 << 1, //枚举表达式字面量参与二元运算符
  num = 30 | 2,
  num1 = 10 + 29
}

// 计算值例子
enum Obj2 {
  nameLen = 'aaa'.length, //不满足上面任何条件，那么是计算值
  num = Math.random() * 100
}

const woman: (string | number)[] = ["pinpang", "teacher", 28];

const woman: (string | number)[] = ["pinpang", 28, "teacher"]

// 元组和数组类似，但是类型注解时会不一样
const woman: [string, string, number] = ["dajiao", "teacher", 28]

"dajiao", "teacher", 28;
"liuying", "teacher", 18;
"cuihua", "teacher", 25;

const csvArr: [string, string, number][] = [
  ["dajiao", "teacher", 28],
  ["liuying", "teacher", 18],
  ["cuihua", "teacher", 25],
]

/*  为什么下面的 Object 可以是数字和字符串？
  	因为会被包装成对象 (如： 调用number方法或字符串方法)
	*/
const num:Object = 123
const str:Object = 'Hello'


interface StringArray {
  [index: number]: string;   
}

let userArray: StringArray;
userArray = ["Bob", "Fred"];

let user: string = userArray[0];

/*  使用Record泛型传入两个类型: 第一个是key的类型，第二个是value的值 */
type A = Record<string, number> 

// A2写法等同于上面的 type A = Record<string, number> 
type A2 = {
  [k: string ]: number
}

/* 注意: 索引类型的key可以为 number string symbol 类型 */

interface StringArray {
  [index: number]: string //索引签名
}

let fronTend: StringArray;

fronTend = {
  1: "HTML",
  2: "CSS",
  3: "JavaScript"
}

console.log(fronTend['2'],fronTend[1]) // CSS HTML


interface LanguageBirth {
  [name: string]: number
  Java: number
}

const language: LanguageBirth = {
  "Java": 1995,
  "JavaScript": 1996,
  "C": 1972
}

// 返回never的函数必须存在无法达到的终点
 
// 因为必定抛出异常，所以 error 将不会有返回值
function error(message: string): never {
    throw new Error(message);
}
 
// 因为存在死循环，所以 loop 将不会有返回值
function loop(): never {
    while (true) {
    }
}

  //void类型只是没有返回值 但本身不会出错
  function Void():void {
      console.log();
  }

  // 只会抛出异常没有返回值
  function Never():never {
  	throw new Error('aaa')
  }

interface A {
    type: "foo"
}
 
interface B {
    type: "bar"
}
type All = A | B ;
function handleValue(val: All) {
    switch (val.type) {
        case 'foo':
            break;
        case 'bar':
            break
        default:
            //兜底逻辑 一般是不会进入这儿如果进来了就是程序异常了
            const exhaustiveCheck:never = val;
            break
    }
}

interface A {
    type: "foo"
}
 
interface B {
    type: "bar"
}
interface C {
    type: "bizz"
}

type All = A | B | C

function handleValue(val: All) {
    switch (val.type) {
        case 'foo':
            break;
        case 'bar':
            break
        default:
            //兜底逻辑 一般是不会进入这儿如果进来了就是程序异常了
            const exhaustiveCheck: never = val
            break
    }
}

const arr = [ 1,'Hello 2023!',true]

// 此时数组下标1 定义虽然是字符串类型，可是缺不能使用length属性
arr[1].length  // 类型'string | number | boolean ' 上不存在属性length

// 使用类型断言解决此问题
(arr[1] as string).length  // 第一种断言方式
<string>arr[1].length // 第二种断言方式，请牢记不要和泛型搞混

// 对于赋值时 any 特性一致
let value: unknown
value = 1 | '1' | true | [] | {} | Symbol() | null | new Person()

// 反过来 unknown 就只能接受 unknown 和 any 类型
let value1: string = value; // 不能将类型“unknown”分配给类型“string”。
let value2: unknown = value
let value3: any = value

let u: unknown;
u.toFixed() // Error 类型“unknown”上不存在属性“toFixed”

// 类型收窄 (保护) 
if (typeof u === 'object') {
  u.toFixed()
}

// 类型的值不能直接赋值给其他变量

let unknowVal: unknow
unknowVal = 'Hello World!'
let strVal: string =  'str'

strval = unknowVal // TS2322: Type 'unknown' is not assignable to type 'string'. 

// 定义一个接口 对对象类型进行约束
interface IPerson  {
  name: string;
  age: number;
}

let tom: IPerson = {
  name: 'Tom',
  age: 18
}

console.log(tom)  // { name: 'Tom', age: 18 }


//  error 定义变量比接口少了会报错
// let joy: IPerson = { name: 'Joy'} 

let joy: IPerson = {
  name: 'Joy',
  age: 26
  // sex: '男'  //  error 定义变量比接口多了也会报错
}

interface IPerson2  {
  name: string;    // 确定属性
  age: number;     // 确定属性
  sex?: string;    // 可选属性 (表示sex为可选属性，在使用时可以不定义sex变量)
}

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

let person2: IPerson = {
  id: 2,
  name: 'tom',
  age: 20
}
person2.id = 2 // error

interface IUserInfo  {
  name: string;
  age: number;
  sex?: string;
  [propName: string]: any; // 任意属性 
}
// 上面的接口中: 确定属性和可选属性只有 string 和 number
// 所以任意属性的类型必须包含string、number这两种类型，否则会报错。

let user: IUserInfo = {
  name: 'linYi',
  age: 22,
  sex: '男',
  action(){
    console.log('Hello World!')
	}
}

// 定义了任意类型后,我们在使用接口时继续添加变量
let user1: IUserInfo = {
  name: 'linYi',
  age: 22,
  sex: '男',
  action(){
    console.log('Hello World!')
  },
  department: '研发部',
  rank: 'p4'
}

user.action() // Hello World!

interface Level {
  level: number
}

// 继承单个接口
interface Person extends Level  {
  name: string
  eating: () => void  // 这里不用写 {}
}

interface Animal {
  running: () => void
}

// 继承多个接口
interface Student extends Person, Animal {
  sno: number
}

const stu: Student = {
  sno: 110,
  level: 4,
  name: 'Pan',
  eating: function () {},
  running: function (): void {}
}

interface Iuser {
  name: string;
}

interface Iuser  {
  age: number;
  sex: number;
}

let tom: IPerson = {
  name: 'Tom',
  age: 18,
  sex: 1,  // 不写会报错,两个同名的接口会被合并
}

type A = Array<string> & { sex: number } & User

interface User {
  name: string
  age: number
}

type User = {  name: string, age: number }
type User = { sex: number }   // error 不能重新赋值

// 接口合并
interface IA  { title: string , state: boolean }
interface IA  { time: string }

// 接口继承
interface IB  extends IA {}

// 比如引入第三方包时拓展某个接口的参数
declare module 'vue' {
    export interface ComponentCustomProperties {
        $filters: Filter
    }
}

// 拓展string方法
declare global {
  interface String{
    padZero( length : number ) :string
  }
}

// 拓展aoios 
import { AxiosRequestConfig } from 'axios'
declare module 'axios' {
    export interface AxiosRequestConfig {
      _autoLoading?: boolean
      _mock?: string
    }
}

const fn1 = (n1: number, n2: number): number => {
    return n1 + n2
}

const fn2 = (s1:string, s2:string):string[] => {
   return [s1,s2]
}

fn1(45, 99)   // 144
fn2('Hello', 'World') // [ 'Hello', 'World' ]

const submit = (formDate:string[]):void => {
    if (formDate) {  // Do something }
}

const telForMat = (phone: number | string, type?: boolean): string => {
    let num: string = String(phone)
    if (type) {
        return ` ${num.substring(0,1)}****${num.substring(10)}`
    } else {
        return `${num.substring(0,3)}****${num.substring(7)}` 
    }
}

telForMat(13246566476)   // 132****6476
telForMat('13246566476',true)  //  1****6

const fn1 = (n1: number = 0, n2: number): number => {
    return n1 + n2
}
fn1(12)  // 12

// function 写法
function getArr(...args:any) {
   // arguments 就是所有传入参数的集合
   console.log(arguments)  // [Arguments] {'0': 4, '1': 5, '2': 6}
  
   // 报错 类数组arguments没有以下属性: pop,push,concat,join及..
   // let arr: number[] = arguments  // 说明 arguments 是一个类数组

   // 使用TS提供的关键字 IArguments 接口
   let arr: IArguments = arguments
}

getArr(4,5,6) 

function print(info: string): void;
// 如果传入两个string类型的参数，都需要打印下来，我们的函数声明可以是这样：
function print(info: string, message: string): void;

// 在更宽泛的范围，我们用可选参数来实现重载
function print(info: string, message ?: string) {
    let printValue: string = info;
    if(message){
        printValue += message;
    }
    console.log(printValue)
}

// function print(info: string): void;
// function print(num: number): void;

// 可以使用联合类型重载
function print(message: string | number) {
    console.log(message)
}

function disp(n1:number,s1:string):void;
function disp(s:string,n:number):void;

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

const fn2 = (s1:string, s2:string):string[] => {
   return [s1,s2]
}

const fn2 = (s1:any, s2:any):any[] => {
   return [s1,s2]
}

// function 写法
function fn5<Type>(s1:Type, s2:Type):Type[] {
   return [s1,s2]
}

// 箭头函数写法
const fn5 = <Type>(s1:Type, s2:Type): Type[] => {
    return [s1,s2]
}

fn5<string>('Hello','2022 !')
fn5<number>(12,20)

// 在这里会推导出它们是字面量类型的，因为字面量类型对于我们的函数也是适用的。
fn5('Hello','2022 !')
fn5(12,20)

function Sub<T,U>(a:T,b:U):Array<T | U> {
    const params:Array<T|U> = [a,b]
    return params
}
 
Sub<Boolean,number>(false,1)

const fn8 = <T,E>(a1:T, a2:E): object => {
    return {a1,a2}
}

function foo<T, E>(al: T, a2: E) { }

function identity<T = string, U = number>(value: T, message: U): T {
  console.log(message);
  return value;
}
identity('', 2);

// 泛型函数类型的两种定义方式,两者等价
type enType<T, U> = (value: T, message: U) => T
type enType1<T, U> = { (value: T, message: U): T }

// 使用泛型
let identity: enType1<string, number> =  (value, message) => {
  return value;
}

// 对象泛型的声明方式
type userType<T> = { name: T; age: number }

// 使用泛型
let user: userType<string> = { name: 'zhangsan', age: 24 }