typescript基础语法

//基础类型
//字符串
const name: string = '小明';
// const name2: String = new String('小明'); 包装类
// name = 1;

//数字类型
const age: number = 18;

//布尔类型
const isStudent: boolean = true;

//null 类型
const nullValue: null = null;

//undefined 类型
const undef: undefined = undefined;

//Symbol 类型 唯一标识符
const sym = Symbol('key');

//bigint 类型
const bigNum: bigint = 123n;

//任意类型 放弃了类型检测
let anyValue: any = 123;
anyValue = 'abc';
anyValue = true;
let city: string = '北京';
city = anyValue;

//unknown 类型 : 类型安全的any
let unknownValue: unknown = 123;
//city = unknownValue;
if (typeof unknownValue === 'string') {
  city = unknownValue;
}
//断言
city = unknownValue as string;
city = <string>unknownValue;
console.log('city', city, typeof city);

//字面量类型
let direction: 'North' | 'South' | 'East' | 'West' = 'North';

//联合类型 可以是多种类型之一
let id: number | string = 123;
id = '123';

//函数类型限定
const add = (a: number, b: number): number => {
  return a + b;
};
add(1, 2);
//void 空返回值
const logMsg = (): void => {
  console.log('hello');
};
console.log('logMsg', logMsg());
//never 永远不存在的值
const throwErr = (): never => {
  throw new Error('error');
  // return 'error';
};
//throwErr();
// let neverValue: never = '1';

//数字数组
const nums: number[] = [1, 2, 3];
const nums2: Array<number> = [1, 2, 3];
//字符串数组
const text: string[] = ['a', 'b', 'c'];
const text2: Array<string> = ['a', 'b', 'c'];
//元组 固定长度和类型的数组
const person: [string, number, boolean] = ['小明', 18, true];

//只读数组
const arrReadonly: readonly string[] = ['a', 'b', 'c'];
// arrReadonly[0] = 'd'; 不可以修改
// arrReadonly.push
// arrReadonly.pop
const arrReadonly2: ReadonlyArray<number> = [1, 2, 3];

// type interface
type strnum = string | number;
let strnumValue: strnum = 123;
strnumValue = '123';

//交叉类型
type strnum2 = string & number;
// let strnumValue2: strnum2 = 123;

//接口
interface User {
  readonly id: number | string;
  name: string;
  age?: number;
  sayHello?: () => void;
  getAge?: () => number;
}

const user1: User = {
  id: 1,
  name: '小明',
  age: 18,
  sex: '男',
  sayHello() {
    console.log('hello');
  },
  getAge() {
    return 19;
  }
};
// user1.id = 2; 只读
const user2: User = {
  id: 2,
  sex: '女',
  name: '李四'
};

// eslint-disable-next-line no-redeclare
interface User {
  sex: string;
}

interface User2 {
  name: string;
}

interface User3 {
  age: number;
}

type User4 = User2 & User3;
const user4: User4 = {
  name: '小明',
  age: 18
};
//函数类型
type Add = (a: number, b: number) => number;
const add2: Add = (a: number, b: number) => {
  return a + b;
};

//索引类型
interface User5 {
  name: string;

  [key: string]: string;
}

const user5: User5 = {
  name: '小明',
  age: '18',
  sex: '男'
};
type User6 = {
  name: string;
  [key: string]: string;
};

//枚举类型
// enum OnOffStatus {
//   On,
//   Off
// }
enum OnOffStatus {
  On = '1',
  Off = '0'
}

console.log('OnOffStatus', OnOffStatus);
console.log('On', OnOffStatus.On);
console.log('Off', OnOffStatus.Off);
console.log('0', OnOffStatus[0]);
console.log('1', OnOffStatus[1]);
// const onOff = (val: string) => {
//   if (val === '0') {
//     console.log('关闭的');
//   } else {
//     console.log('打开的');
//   }
// };
const onOff = (val: OnOffStatus) => {
  if (val === OnOffStatus.Off) {
    console.log('关闭的');
  } else {
    console.log('打开的');
  }
};
onOff(OnOffStatus.Off);
onOff(OnOffStatus.On);

const fn = (val: number): number => {
  return val;
};
console.log('fn(10)', fn(10));
// fn('10');

const fn2 = <T>(val: T): T => {
  return val;
};
console.log('fn2(10)', fn2(10));
console.log('fn2("10")', fn2('10'));
const fn3 = <T, U>(a: T, b: U): T | U => {
  if (typeof a === 'string') {
    return a;
  } else {
    return b;
  }
};
console.log(fn3('30', 10));
console.log(fn3(20, 10));