基础类型 null undefined symbol boolean void
const count: number = 123; const teacher: string = "zhen";
对象类型
//对象类型 // 对象 const teacher: { name: string; age: number } = { name: 'zhen', age: 18 } // 数组 const numbers: number[] = [1, 2, 3] // 类 class Person {} const zhen: Person = new Person() //翻译一下就是zhen必须是Person类对应的对象 // 函数 (() => number 翻译getTotal是个函数,返回数字类型) const getTotal: () => number = () => { return 123 }
对象类型之函数相关类型
// 函数相关类型 // 函数 (() => number 翻译getTotal是个函数,返回数字类型) const getTotal: () => number = () => { return 123 } function add1(first: number, second: number): number { return first + second } add1(1, 1) //函数返回值为空(void)的类型 function sayHello(): void { console.log("Hello") } // 函数为never的例子(不会执行完就可以用never类型) // function errorEmitter(): never { // while (true) {} // } function errorEmitter(): never { throw new Error("错误调用never") console.log(111) } // Es6解构函数 function add({ first, second }: { first: number; second: number }): number { return first + second } const total = add({ first: 1, second: 2 })
基础复习
// 箭头函数两种写法 const fun = (str: string): number => { return parseInt(str, 10) } console.log(fun("10")) const fun1: (str: string) => number = (str) => { return parseInt(str, 10) } console.log(fun("10")) //对于JSON这些方法,用下面这种case interface Person { name: string } const rawData = '{"name":"zhen"}' const newDate: Person = JSON.parse(rawData) //对于一个变量有两种值 可以用例如number | string的方式 let aa: string | number = "123" aa = 123
数组和元组
// 数组和元组 // 数组 const arr: (number | string)[] = ["1", 1, "2"] const stringArr: string[] = ["1", "2"] const undefinedArr: undefined[] = [undefined] // type alias 类型别名 type User = { name: string; age: number } const userArr: User[] = [ { name: "zhen", age: 18, }, ] // class ts也认为可以充当类型别名的作用 class Teacher { name: string age: 18 } const teacherArr: Teacher[] = [ new Teacher(), { name: "zhen", age: 18, }, ] // 元组tuple,具体到每个参数的类型 const teacherInfo: [string, string, number] = ["zhen", "xuan", 18] const teacherList: [string, string, number][] = [["zhen", "xuan", 18]]
interface接口
常见面试题:interface和type有什么区别?
interface只能定义一些对象类型,函数等,但type可以定义一些基础类型。
只有不能用interface的时候,才有type来表示
例如:type Person = string interface Person { name:string }
// interface和type 相似,但不完全相似,type可以定义一些基础类型 interface Person { // readonly name: string; 只读 name: string age?: number //可选 [propName: string]: any // 接受string类型,返回any类型 say(): string } // 继承 interface Teacher extends Person { teach(): string } const getPersonName = (person: Person): void => { console.log(person.name) } const setPersonName = (person: Teacher, name: string): void => { person.name = name } const person = { name: "zhen", say() { return "say hello" }, teach() { return "teach" }, } getPersonName(person) setPersonName(person, "zhen2") // 函数的类型 interface SayHi { (word: string): string //函数接受word参数的类型是string,返回string } const SayHi: SayHi = (word: string) => { return word }
类中的访问类型和构造器
// private,protected,public 访问类型 // public 公共 允许我在类的内外被调用 // private 只允许在类内被使用 // protected 允许在类中继承子类的使用 class Person { protected name: string = "dell" public sayHi() { console.log(this.name) } } class Teacher extends Person { public sayName() { console.log(this.name) } } const person = new Person() person.name = "zhen" // protected访问不到。只有public访问得到 person.sayHi()//constructor
// //constructor class Person { // 传统写法 public name: string constructor(name: string) { this.name = name } //传统写法等同于下面的简化写法 constructor(public name: string) { this.name = name } } const person = new Person("zhen") //constructor的执行时间是在new Person()这一瞬间开始执行的 console.log(person.name)
// class Person { // constructor(public name: string) {} // } // class Teacher extends Person { // constructor(public age: number) { // super("yang") // } // } // const aa = new Teacher(11) // console.log(aa.name) // console.log(aa.age)
静态属性getter,setter
// name是私有属性,不想被外部所调用 // get和set可以保护私有变量 class Person { // _name是不想被外部访问到的变量 constructor(private _name: string) {} // 通过get和set的方法可以间接访问到,并做相应处理 get name() { return this._name + " ~~~" } set name(name: string) { const realName = name.split(" ")[1] this._name = realName } } const person = new Person("zhen") console.log(person.name) person.name = "zhen 测试" console.log(person.name) // 设计模式,单例模式(一个类里面,只允许通过这个类获取一个这个类的实例) // 希望Demo永远只能生成一个类的实例 class Demo { private static instance: Demo private constructor(public name: string) { console.log(name) } // static 其实是public static的简写,是把static后面的属性挂载类上,而不是实例上面 static getInstance() { console.log(this) //没有new 所有this指向class类本身 if (!this.instance) { this.instance = new Demo("zhen") //在里面就可以访问到constructor } return this.instance } } const demo1 = Demo.getInstance() const demo2 = Demo.getInstance() console.log(demo1.name) console.log(demo2.name)
类中的readonly和抽象类
//类中使用readonly class Person { constructor(public readonly _name: string) {} get name() { return this._name } } const person = new Person("zhen") person.name = "111" //修改不了 console.log(person.name) //抽象类(把共用性的class属性进行封装) abstract class Geom { width: number getType() { return "Gemo" } abstract getArra(): number } class Cirtcle extends Geom { getArra() { return 111 } } class Square {} class Triangle {}