TypeScript静态类型
Static Typing 简单理解一旦定义类型就无法改变,类型的属性和方法也确定了,ide有更好的语法提示
let count: number = 1; //count的静态类型就为number
// 自定义静态类型
interface XiaoJieJie {
name: string;
age: number;
}
const xiaohong: XiaoJieJie = {
name: "小红",
age: 18,
};
console.log(xiaohong.age);
基础静态类型和对象静态类型
const count: number = 888;
const myName: string = "bbter";
// null,undefined,boolean,void,symbol
// 普通对象类型
const girl: { name: string; age: number } = {
name: "iu",
age: 18,
};
// 数组类型
const girls: string[] = ["iu", "杨幂", "小红"];
// 类类型
class Person {}
const bbter: Person = new Person();
// 函数类型
const meetGirl: () => string = () => {
return "iu";
};
类型注释和类型判断
// type.annotation 类型注解
// type inference 类型推断
let num: number;
num = 123;
let numinference = 123;
let one = 1;
let two = 2;
let tree = one + two;
function getTotal(one: number, two: number) {
return one + two;
}
const total = getTotal(1, 2);
const mm = {
name: "iu",
age: 18,
};
函数参数和返回类型的注解
// 函数参数和返回类型的注解
// function getTotal(one: number, two: number): number {
// return one + two;
// }
// const total = getTotal(1, 2);
// function sayHello(): void {
// console.log("hello world");
// }
function errorFunction(): never {
throw new Error();
console.log("hello world");
}
function forNerver(): never {
while (true) {}
console.log("hello world");
}
// 如果参数是对象
function add({ one, two }: { one: number; two: number }) {
return one + two;
}
const total = add({ one: 1, two: 2 });
function getNumber({ one }: { one: number }) {
return one;
}
数组类型注解的方法
const numberArr: number[] = [1, 2, 3];
const stringArr: string[] = ["a", "b", "c"];
const undefinedArr: undefined[] = [undefined, undefined];
const arr: (string | number)[] = [1, "string"];
//type alias 类型别名
type Lady = { name: string; age: number };
class Madom {
name: string;
age: number;
}
const mms: Madom[] = [
{ name: "iu", age: 18 },
{ name: "小红", age: 18 },
];
元祖的使用和类型约束
元祖相当于数组的加强版，每一项确定
// const mms: (string | number)[] = ["小红", "teacher", 18];
// const mms: [string, string, number] = ["小红", "teacher", 18];
const mms: [string, string, number][] = [
["小红", "teacher", 18],
["小白", "teacher", 18],
["小黑", "teacher", 18],
];
//csv
// "小红", "teacher", 18;
// "小白", "teacher", 18;
// "小黑", "teacher", 18;
接口interface
interface Girl {
name: string;
age: number;
bust: number;
waistline?: number;
[propname: string]: any;
say(): string;
}
// 接口继承
interface Teacher extends Girl {
teach(): string;
}
class Mm implements Girl {
name = "小玲";
age = 18;
bust = 95;
say() {
return "我是小玲";
}
}
const girl = {
name: "小美",
age: 20,
bust: 92,
waistline: 21,
sex: "女",
say() {
return "你好我是小美";
},
teach() {
return "我来教你";
},
};
const cv = (girl: Girl) => {
girl.age < 24 && girl.bust >= 90 && console.log(girl.name + "进入面试");
girl.age >= 24 || (girl.bust < 90 && console.log(girl.name + "你被淘汰"));
};
const getCv = (girl: Teacher) => {
console.log(girl.name + "年龄是" + girl.age);
console.log(girl.name + "胸围是" + girl.bust);
girl.waistline && console.log(girl.name + "腰围是" + girl.waistline);
girl.sex && console.log("性别" + girl.sex);
};
cv(girl);
getCv(girl);
类的概念和使用
class Lady {
content = "Hi,帅哥~";
sayHello() {
return this.content;
}
}
class titleGirl extends Lady {
sayHello() {
return super.sayHello() + ".你好！";
}
sayLove() {
return "I love you";
}
}
const goddess = new titleGirl();
console.log(goddess.sayHello());
console.log(goddess.sayLove());
类的访问类型
// private protected public
// 类的内部和类的外部
// public 类的内部和外部都可以调用
// private 私有的 允许这种类的内部使用，类的外部包括继承中都不可以使用
// protected 受保护的 继承关系中可以使用,类的外部不能使用
class Person {
// private protected 只能在类的内部进行使用
protected name: string;
public sayHello() {
console.log(this.name + " say hello");
}
}
class Teacher extends Person {
//protected 可以在继承里的类进行使用 private不行
public sayBye() {
this.name;
}
}
const person = new Person();
// person.name = "bbter";
// person.sayHello();
// console.log(person.name);
类的构造函数
class Person {
// public name: string;
// constructor(name: string) {
// this.name = name;
// }
constructor(public name: string) {}
}
class Teacher extends Person {
constructor(public age: number) {
super("bbter");
}
}
const person = new Teacher(18);
console.log(person.age);
console.log(person.name);
类的Getter、Setter和static
class Girl {
constructor(private _age: number) {}
//get set可以对_age进行变化
get age() {
return this._age - 10;
}
set age(age: number) {
this._age = age + 3;
}
}
const girl1 = new Girl(28);
girl1.age = 25;
console.log(girl1.age);
// static 静态类
class Mm {
static sayLove() {
return "i love you";
}
}
// 不需要有对象 直接类名.方法就可以进行调用
console.log(Mm.sayLove());
抽象类 只读属性和使用
class Person {
public readonly _name: string;
constructor(name: string) {
this._name = name;
}
}
const person = new Person("bbter");
// person._name = "xxx";
console.log(person._name);
// 抽象类
abstract class Girl {
// 抽象方法
abstract skill();
}
// 子类必须实现 抽象方法
class Waiter extends Girl {
skill() {
console.log("大爷喝好吃好");
}
}
class BaseTeacher extends Girl {
skill() {
console.log("大爷来个泰式按摩吧");
}
}
class SeniorTeacher extends Girl {
skill() {
console.log("大爷来个SPA全身按摩吧");
}
}
联合类型和类型保护
interface Waiter {
anjiao: boolean;
say: () => {};
}
interface Teacher {
anjiao: boolean;
skill: () => {};
}
// 类型保护
function judgeWho(person: Waiter | Teacher) {
if (person.anjiao) {
(person as Teacher).skill();
} else {
(person as Waiter).say();
}
}
function judgeWhoTwo(person: Waiter | Teacher) {
if ("skill" in person) {
person.skill();
} else {
person.say();
}
}
function add(first: string | number, second: string | number) {
if (typeof first === "string" || typeof second === "string") {
return `${first}${second}`;
}
return first + second;
}
class NumberObj {
count: number;
}
function addObj(first: object | NumberObj, second: object | NumberObj) {
if (first instanceof NumberObj && second instanceof NumberObj) {
return first.count + second.count;
}
return 0;
}
枚举类型
enum Status {
ANMO = 1,
SPA,
DABAOJIAN,
}
function getServe(status: any) {
if (status === Status.ANMO) {
return "按摩";
} else if (status === Status.SPA) {
return "SPA";
} else if (status === Status.DABAOJIAN) {
return "大保健";
}
}
console.log(Status.ANMO);
console.log(Status.SPA);
console.log(Status.DABAOJIAN);
console.log(Status.ANMO, Status[1]);
const result = getServe(2);
console.log(`我要去${result}`);
函数中使用泛型
- 泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性,相当于类型系统的参数,用于类型复用
//泛型
// 多个泛型的定义
function join<T, P>(first: T, second: P) {
return `${first}${second}`;
}
join<string, number>("1", 2);
// 泛型中数组的使用
function myFun<T>(params: Array<T>) {
return params;
}
myFun<string>(["a", "b", "c"]);
类中使用泛型
class SelectGirl<T extends number | string> {
constructor(private girls: T[]) {}
getGirl(index: number): T {
return this.girls[index];
}
}
const selectGirl = new SelectGirl<string>(["小红", "小青", "小美"]);
console.log(selectGirl.getGirl(1));
