0929 NOTE–TS学习

定义

js的超集，可以在任何浏览器、计算机和操作系统上运行，但是执行时会先编译成js代码执行。

优势

①、有些错误如：未传参，js在浏览器中编译运行时才会报错，而ts在代码执行前便会报错提示

②、代码提示友好程度更高

③、代码中变量的类型声明使语义更清晰易懂

环境搭建

安装ts：

npm i typescript -g  /  yarn add typescript -g

编译ts文件：

tsc demo.ts		//执行后编译生成一个js文件，执行

插件：

npm i ts-node  / yarn add ts-node

插件安装后不需要编译啊，直接ts-node demo.ts即可执行

静态类型

给变量声明定义静态类型后，变量类型固定不可修改，变量具有该静态类型的所有属性和方法

基础类型和对象类型

基础类型：

//null , undefined , symbol , boolean , void 
const count:number = 123;
const teacherName:string = "john";

对象类型：

const teacher : {
	name:string;
	age:number;
}

const numbers:number[] = [1,2,3]	//数组类型，元素必须为number类型

const getTotal : () => number = () => {
	return 666; 
}
//函数类型，必须返回一个number类型的结果

类型注解和类型推断

type annotation 类型注解 声明变量时，定义类型，告知TS，该变量类型

type inference 类型推断 声明变量时，不定义类型，TS根据变量值推测变量类型

let count: number = 123;
let cpunt = 123;

注：当确定TS可以分析推断出变量类型时，可以选择类型推断，简化代码，但是当TS无法分析推断出变量类型时，需要类型注解

const firstnum = 1;
const secondnum = 2;
const sum = firstnum + secondnum;	//此时可以选择类型推断实现简化代码

function count(firstnum:number, secondnum:number){
    return firstnum + secondnum;
}

const sum = count(firstnum , secondnum);	//此时需要类型注解，因为TS无法推测传入参数的类型

实际无论类型注解和类型推断，目的都是让变量有一个具体类型

TS的每一个变量以及每一个对象的属性的类型都是固定的

TS函数相关类型

function count(firstnum:number, secondnum:number):number{	
    //此处第三个注解是为了防止失误导致返回结果与预期不符
    //return firstnum + secondnum + '';
    return firstnum + secondnum;
}

const sum = count(firstnum , secondnum);	

function sayHello():void{	//void类型表示无返回值
	console.log("hello")
}

function errorEmitter():never{	//error类型表示该函数永远无法执行完，而是执行部分
	throw new Error();
	console.log(123);
}

//函数参数解构
//参数传入对象时，在传入时解构

//js
function sum({firstnum,secondnum}){
	return firstnum + secondnum;
}
let result = sum({first:1,second:2})

//ts
function sum({firstnum,secondnum}:{firstnum:number,secondnum:number}):number{
	return firstnum + secondnum;
}
let result = sum({first:1,second:2})

//箭头函数的两种写法
//传入参数为字符类型，返回结果为数值类型
const func = (str:string) => {
	return parseInt(str,10);
}

const func1:(str:string) => number = (str) => {
    return parseInt(str,10);
}

函数编写时，入参一般需要类型注解，但是返回值往往可以通过类型推断简写

//当一个变量在初始和后续类型不同时，可以通过同时声明多种类型解决
let count : number | string = 123;
count = "123";

数组与元组

数组

const mixArr: (number | string)[] = [1,2,'3'];
const stringArr : string[] = ['1','2','3'];
const undefinedArr : undefined[] = [undefined];

//类型别名 type alias	便于理解
type User = { name:string;age:number};

const objectArr : User[] = [{
	name:'kaige',
	age:18
}]

元组

tuple

//数组
const stipulateArr : (string | number)[] = ['kaige',18,'22']
//元组
//约束规定了数组每项对应的类型
//数组的长度，每个元素对应类型固定时，选择元组会更便于管理
const stipulateArr : [string,number,number] = ['kaige',18,22]

Interface接口

定义通用类型

与类型别名的区别：只能代表函数或对象，无法代表基础类型

interface Person{
	name:string;
    readonly age?:number;	//?:语法，表示age属性可有可无，即使传参不具有age属性，也不会报错	readonly只读，不可修改
}

type Person1 = string;

const getPersonName = (person:Person) => {
	console.log(person.name)
}

const setPersonName = (person:Person,name:string) => {
	person.name = name;
}

注意：当以字面量形式将对象作为参数传入时，一定要符合类型注解，不能有多余属性，否则会报错

interface Person{
	name:string;
    age?:number;	
}

interface newPerson{
	name:string;
    age?:number;
    [propName:string]:any;	//表示可以存在其他属性，属性名类型为字符，值类型随意
	test():string	//方法，返回结果为字符类型
}

const person = {
	name:'kaige',
	gender:'male'
}

const getPersonName = (person:Person) => {
	console.log(person.name)
}

getPersonName(person);	//不报错
getPersonName({
	name:'kaige',
	gender:'male'
});		//报错	对象字面量传参会进行强校验

//class应用接口
class User implements Person{
    name = "kaige";
    test(){
        return 'aaa'
    }
}

//接口定义函数类型
interface test{
    ():void
}	//无参无返回值的函数

let kg : test = () => {
  console.log('kaige');
}

kg();

接口interface实际只是TS帮助做语法校验的工具，在编译转化成js代码时，interface的语句会被剔除

类

类的定义与继承

class Person {
	name = 'kaige';
	getName(){
		return this.name;
	}
}

const person = new Person();
console.log(person.getName());

super的常用：在子类重写父类方法后，可以通过super调用父类的该方法

类中的访问类型和构造器

//三种访问类型：private	protected	public
//public	允许在类的内外被调用
//private	允许在类内被调用
//protected	允许在类内及继承的子类中使用

//constructor
 class Person {
     constructor(public name:string){}
 }

//等价于
 class Person {
    public name:string;
    constructor(public name:string){
        this.name = name
    }
 }

//ts中，调用父类的构造函数时，如果父类的构造函数需要传入参数，还要按照父类构造函数的类型注解规则传入参数，否则会报错

class Teacher {
    constructor(public name : string){}
}

class Student extends Teacher {
    constructor(public age : number){
        super('kaige')
    }
}

let kg = new Student(22);
console.log(kg.name,kg.age)

类的getter和setter

//作用：调用私有属性，给类的私有属性加密保护

//单例模式
class Parent {
  private static kaige:Parent;	//私有化静态属性kaige，Parent类型，只能类内部调用
  private constructor(public name : string){};	//私有化构造函数，无法通过new创建新实例
  static newParent(){	//静态方法newParent，只能类本身调用
    if(!this.kaige) this.kaige = new Parent('kaige');	
    return this.kaige;
  }	//属性挂载在类身上，实现类似构建新实例对象的效果
}	

let child1 = Parent.newParent();
let child2 = Parent.newParent();	
console.log(child1.name,child2.name)	//kaige kaige
console.log(child1 === child2);		//true
//单例模式，获取的是同一个实例对象kaige，第一个实例对象kaige是new构造的

抽象类

//抽象类只能被继承，不能被实例化
//将共用性的属性、方法抽离成类进行封装

abstract class Graph{
  abstract getArea() : number
}

class Circle extends Graph{
  getArea(){
    return 123;
  }
}

class Triangle extends Graph{
  getArea(){
    return 123;
  }
}

class Square extends Graph{
  getArea(){
    return 123;
  }
}

interface Teacher {
  name:string;
}

interface Student extends Teacher {
  age : number;
}

interface People extends Teacher {
  gender : string;
}

let teacher = {
  name : 'wanggang',
}

let student = {
  name : 'kaige',
  number : 18,
}

let people = {
  name : 'xiaopang',
  gender : "male"
}

function getName(User : Teacher | Student | People){
  console.log(User.name)
}
//简写
function outputName(User : Teacher){
  console.log(User.name)
}

getName(teacher);
getName(student);
getName(people);

outputName(teacher);
outputName(student);
outputName(people);