TypeScript学习

TypeScript学习

www.freecodecamp.org/chinese/new…

总结： 可以在声明一个变量后添加: type（称为 "类型注解 "或 "类型签名"）来设置我们希望变量的类型

//primitive types
let firtName: string = 'Danny'
//union types
let age: number | string;
age = 26;
//dynamic types
let address: any = 100

//literal Type
let direction: "UP" | "DOWN";
direction = "UP";


//objects
let person: {
    name: string;
}
person = {
    name: 'sunyu'
}

// person.age = '2'//Property 'age' does not exist on type '{ name: string; }'.ts(2339)

//array
let ids: number[] = [];
let users: (string | number)[];

/**Tuples 元组指定数组类型和长度 ???*/
let options: [string, number];//指定数组长度为2，第一位是string第二位是number
options = ['UP', 10]
//options[1]="1"//会报错第二位只能是number:Type 'string' is not assignable to type 'number'

//functions
function circle2(diam: number): string {
    return (Math.PI * diam).toString()
}
//es6
const circle = (diam: number): string => (Math.PI * diam).toString()
//先声明后实现一个函数
let sayHi: (name: string) => void;
sayHi = (name: string) => console.log('hi' + name);

//type别名
type StringOrNum = string | number;
let id: StringOrNum = 24

//interface 基本上用于描述对象 name是只读的可以被继承
//可以添加?表示是可选的
interface Person {
    name: string;
    say(name?: string): string;
    cry: (reason: string) => string
}
let p1: Person = {
    name: "张三",
    say(name) {
        return 'hi' + name
    },
    cry(reason) {
        return 'crying for ' + reason
    }
}
//继承
interface Chinese extends Person {
    hairColor: string
}

//Dom
//non-null operator:非空操作符
//通过非空断言操作符（！），我们可以明确地告诉编译器，一个表达式的值不是 "空 "或 "未定义"。
const link = document.querySelector('a')!;
//element type
const from = document.getElementById('form') as HTMLFormElement;


//class 类
//默认情况下，属性是公共的（public）。
class People {
    readonly name: string; // This property is immutable - it can only be read
    private isCool: boolean; // Can only access or modify from methods within this class
    protected email: string; // Can access or modify from this class and subclasses
    public pets: number; // Can access or modify from anywhere - including outside the class

    constructor(n: string, c: boolean, e: string, p: number) {
        this.name = n;
        this.isCool = c;
        this.email = e;
        this.pets = p;
    }

    sayHello() {
        return `Hi, my name is ${this.name} and I have ${this.pets} pets`;
    }
}
const person1 = new People('Danny', false, '11', 1);
const person2 = new People('Sarah', true, '22', 6);
console.log(person1.sayHello()); // Hi, my name is Danny and I have 1 pets
let people: People[] = [person1, person2];
//更简洁的构建类
//  class Person {
//     constructor(
//       readonly name: string,
//       private isCool: boolean,
//       protected email: string,
//       public pets: number
//     ) {}

//     sayMyName() {
//       console.log(`Your not Heisenberg, you're ${this.name}`);
//     }
//   }

//   const person1 = new Person('Danny', false, 'dan@e.com', 1);
//   console.log(person1.name); // Danny
//泛型
interface HasLength {
    length: number
}
const longLength = <T extends HasLength>(a: T) => {
    console.log(a.length);
}
longLength("hi")//=>2
longLength<number[]>([1, 2, 3])//=>3

//泛型类型
interface Dog<T> {
    breed: string;
    treats: T;
}

let labrator: Dog<string> = {
    breed: "labrator",
    treats: "chew"
}
let scottie: Dog<string[]> = {
    breed: "scottie",
    treats: ["chew"]
}
//枚举

enum Type {
    BOOK, FILE, FILM
}
Type.BOOK// 0