TypeScript入门学习

• 基础类型

- 布尔值
	- let isDone: boolean = false;
	
- 数字
    - TypeScript里的所有数字都是浮点数，这些浮点数的类型是number。除了支持十进制，还支持二进制、八进制、十六进制
        - 以下示例,结果都是2023
            let decLiteral: number = 2023; // 十进制
             let binaryLiteral: number = 0b11111100111; // 二进制
             let octalLiteral: number = 0o3747; // 八进制
             let hexLiteral: number = 0x7e7; // 十六进制
        
- 字符串
	- let name: string = "Jacky";

• 注意点一: 元组

let x:[string,number];
x = ['hello',10]
console.log(x,typeof x)

1. `let x:[string, number];`

   这一行定义了一个变量 `x`，并指定了它的类型为元组（tuple）。在 TypeScript 中，元组是一种特殊的数组，它允许你表示一个已知元素数量和类型的数组，各元素的类型不必相同。这里的 `[string, number]` 表示 `x` 是一个包含两个元素的数组，第一个元素必须是字符串类型，第二个元素必须是数字类型。

2. `x = ['hello', 10];`

   这一行给变量 `x` 赋值。这里 `'hello'` 是一个字符串，`10` 是一个数字，它们分别符合前面定义的元组类型中的第一个和第二个元素的类型要求。因此，这个赋值操作是合法的。

3. `console.log(x, typeof x);`

   这一行会打印变量 `x` 的值以及 `x` 的类型。由于 `x` 是一个数组，`typeof x` 将返回 `"object"`，因为 JavaScript 中的数组实际上是对象。输出将会是：

[ 'hello', 10 ] "object"

需要注意的是，虽然 `x` 在 TypeScript 中被声明为特定类型的元组，但是在运行时（即在 JavaScript 中），类型信息会被擦除，因此 `typeof x` 返回的是 `"object"` 而不是 `"tuple"` 或者更具体的类型描述。TypeScript 的类型检查只在编译阶段有效，在运行时不会保留这些类型信息。

• 注意点二:枚举,枚举 就是定值

enum Color {Red,Green,Blue};
let c:Color = Color.Green;
console.log(c,typeof c)


1. `enum Color {Red, Green, Blue};`

   这里定义了一个名为 `Color` 的枚举。枚举是一组命名的常量集合，通常用于表示一组固定的值。在这个例子中，`Color` 枚举包含了三个成员：`Red`、`Green` 和 `Blue`。默认情况下，枚举成员会被自动赋予从 `0` 开始的整数值，所以：
   - `Color.Red` 的值为 `0`
   - `Color.Green` 的值为 `1`
   - `Color.Blue` 的值为 `2`

2. `let c: Color = Color.Green;`

   这一行定义了一个变量 `c`，其类型为 `Color` 枚举，并将其初始化为 `Color.Green`。根据上面的说明，`Color.Green` 的值为 `1`，所以 `c` 的值就是 `1`。

3. `console.log(c, typeof c);`

   这一行将变量 `c` 的值及其类型打印到控制台。因为 `c` 的值是 `1`（一个数字），所以 `typeof c` 将返回 `"number"`。因此，控制台输出将会是：

1 "number"

总结一下，这段代码定义了一个枚举 `Color`，然后创建了一个类型为 `Color` 的变量 `c` 并将其设置为 `Color.Green`，最后输出了 `c` 的值和类型。输出结果表明 `c` 的值是一个数字 `1`，而 `typeof c` 则显示其类型为 `"number"`。

• 注意点三:unknown类型

let notSure: unknown = 4;
notSure = 'May be ...'
notSure = false
console.log(notSure,typeof notSure);

• 注意点四:void,用于声明该函数没有返回值

function test(): void {
    console.log("test");
}
test()

• 注意点五: null和undefined类型

let u: undefined = undefined;
let n: null = null;
console.log(u,n)

• 注意点六: Union Types 联合类型

let myFav: string | number;
myFav = 'seven';
console.log(myFav)
myFav = 123
console.log(myFav)

函数

• 有名函数和匿名函数

- 有名函数(有名字的函数)

function add(x:number, y:number):number {
    return x + y;
}
console.log(add(1,2))

- 匿名函数(没有名字的函数,用变量接收)

let addDemo = function (x:number, y:number):number {
    return x + y;
}
console.log(addDemo(1,2));

• 可选参数: 比起普通的声明方式,多了一个?号

function buildName(firstName: string, lastName?: string): string {
    if(lastName){
        return firstName + ' ' + lastName;
    } else {
      return firstName;
    }
}
console.log(buildName('Bob'))
console.log(buildName('Bob','Jim'));

• 剩余参数: 会被打包在一起

function getEmployeeName(name1:string,...restOfName:string[]):void{
    console.log(restOfName) // [ 'Jim', 'Tom', 'Kate' ]
    let nameTogether:string = name1 + ' ' + restOfName.join(' ')
    console.log(nameTogether)
}
getEmployeeName('Bob','Jim','Tom','Kate') // Bob Jim Tom Kate

• 箭头函数

- 基本示例

const add = (x: number, y: number):number => {
    return x + y;
}
console.log(add(1,2))

- 简写形式: 如果函数体只有一行代码，并且这行代码的结果就是函数的返回值，那么可以省略大括号 {} 和 return 关键字

const add = (x: number, y: number):number => x+y
console.log(add(1,2))

	- 当只有一个参数时，可以省略参数周围的圆括号 ()
	
	const greet = name => `Hello ${name}`
	console.log(greet('Jim'))
	
	- 没有参数时，需要保留圆括号 ()
	
	const greet = ():string => `Hello,World!`
	console.log(greet())
	

类

• 基本实例

class Person {
	
	// 私有属性只能在类的内部访问
    private name: string;
    private age: number;
	
	// 初始化方法
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
	
	// 定义一个公共方法,实现自己的逻辑
    public getPersonInfo():string {
        return `My name is ${this.name} and age is ${this.age}`;
    }

}
let obj = new Person('Jim Green',18);
console.log(obj.getPersonInfo());

• 继承

class Employee extends Person {
    private department:string // 新增拓展属性
	
	// 重写构造,新增department
    constructor(name: string, age:number, department:string) {
        super(name,age); // 继承父类原来的属性
        this.department = department;
    }

    public getEmployeeInfo():string {
        return this.getPersonInfo() + ` and work in ${this.department}`;
    }
}
let obj2 = new Employee('LiLei',20,'Sale')
console.log(obj2.getPersonInfo()) // My name is LiLei and age is 20
console.log(obj2.getEmployeeInfo()); // My name is LiLei and age is 20 and work in Sale

循环

• for...of和for...in语句

- for...of:返回元素
- for...in:返回索引

let someArray = [1,'string',false]
for(let entry of someArray) {
    console.log(entry) // 1,string,false
}
for(let entry in someArray) {
    console.log(entry) // 0,1,2
}

接口(interface)

• 本质就是定义一个对象

interface Person { // 定义一个接口(对象)
    name: string;
    age: number;
}

function showPersonInfo(person:Person){ // person参数是一个Person对象
    console.log(`Name:${person.name}, Age:${person.age}`);
}

let person: Person = {name:'Jim Green',age:20}
showPersonInfo(person) // Name:Jim Green, Age:20

let person1: Person = {name:'Kate Green',age:18}
showPersonInfo(person1) // Name:Kate Green, Age:18

泛型(Type)函数

• 可以接收各种Type的参数,比如定义一个参数,该参数既可以接收string,也可以接收number

function identity<T>(arg:T):T{ // <T>声明为范型,接收的参数也为T型,返回值也是T型
    return arg;
}

let output1 = identity<string>('Jim Green')
let output2 = identity<number>(100)

console.log(output1) // Jim Green
console.log(output2) // 100