美文网首页
TypeScript基础学习总结

TypeScript基础学习总结

作者: Mstian | 来源:发表于2020-07-28 20:20 被阅读0次

准备工作:

环境安装:npm install -g typescript
查看:tsc-v出现版本号说明安装成功
安装VScode编辑器:https://code.visualstudio.com/
为什么选择VSCode?ts与vscode都为微软家产品,支持比较好。

开始学习

安装ts-node模块:npm install -D ts-node
此模块可以减去ts的编译阶段,不用使用tsc demo.ts将ts编译为.js结尾的js文件,而是直接使用ts-node demo.ts直接进行调试。https://blog.csdn.net/themagickeyjianan/article/details/94003538

基础语法:

静态类型:number string boolean null undefined symbol void 可以直观的判断变量或对象的属性和内容是什么

const num :number = 10;
const name :string = "lisa"

对象类型:

const teacher: {
  name: string;
  age: number;
} = {
  name: 'lisa',
  age: 29,
};
const numbers: number[] = [1, 2, 3];
class Person {}
const person: Person = new Person();

ts中的类型可以很方便的给予代码提示。

两个概念:
type annotation 类型注解 开发者定义变量类型
type inference 类型推断 ts自动分析变量类型

在ts中最主要功能之一的就是类型校验,在ts开发中尽量要保持每个变量都有已知的类型,手动给变量定义类型就属于类型注解,ts是可以自动推断类型的,自动推断类型就属于类型推断。

const num:number = 12 //类型注解
const doubleNum = num * 2 //类型推断

一般在函数参数中都需要进行类型注解:

function getTotal (num1:number, num2:number) { //类型注解
    return num1 + num2
}
const total = getTotal(1, 2); //类型推断

函数返回值类型:void never
声明一个void类型的变量只能为其赋值null或undefined

function sayHello():void{ // void表示函数没有返回值
    console.log('hello')
}

never类型表示的是那些永不存在的值的类型。 例如,never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是never类型,当它们被永不为真的类型保护所约束时。

function EmitError():never{
  throw new Error('error')
}
function Infinite():never{
  while(true){      
  }
}

函数参数解构:

function deconstruction({name,age}:{name:string,age:number}) :string{
  return `${name}今年${age}岁了`
}
deconstruction({name:'lisa',age:15})

函数参数解构需要想如上函数入参时,进行类型声明

函数定义类型:

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

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

一个变量多个类型:

let temp:number | string = 123;
temp = 'lisa';

数组:

const numArr:number[] = [1, 2, 3];
const strArr:string[] = ['a', 'b', 'c'];
const arr:(number | string)[] = ['s', 1, 2, 'aa']; // 数组中多种类型

元组:tuple

let tupleArray:[string, number, string] = ['lisa', 12, 'rice'];

元组可以理解成长度固定,每一项类型固定的数组。

接口:interface

interface Person {
  name:string;
  age?:number;
  readonly sex:string;
  [propName:string]:any;
  say():string
}

上述接口含义是 name是必选,age可选 sex只可读不可写,[propName:string]:any表示任意属性,say()表示方法属性,返回值为string
例子:

interface Teacher extends Person{ // 接口继承
    teach():string
}
const getName = (person:Teacher):void => {
    console.log(person.name, person.sex,person.son)
}
const setName = (person:Person,name:string):void => {
    person.name = name
}
let dadada = {
    name:'',
    age:2,
    sex:'male',
    son:'tom',
    say(){
        return 'dadada'
    },
    teach(){
        return 'teach'
    }
}
setName(dadada,'lisa')
getName(dadada)

类去应用一个接口:implements

interface Person {
  name:string;
  age?:number;
  [propName:string]:any; // 任意类型
  say():string;
}
class Lucy implements Person{
    constructor(){
    }
    name = 'sss'
    say(){
        return 'xsxsxs';
    }
}
const lucy = new Lucy();
console.log(lucy); // {name: 'sss'}

ts中的类:

class Person {
  name="lisa";
  sayName(){
    return this.name
  }
}

class Student extends Person{
  constructor(){
    super()
    this.name = 'jack'
  }
  sayName(){
    return super.sayName() + '-lisa'
  }
}
let student = new Student();
student.sayName(); // jack-lisa

在ES6中当子类中的方法覆盖了父类中的方法,但还需要去使用父类的方法,那么就可以使用super去调用

类中的访问类型和构造器:
private:只在当前类中可以使用,不可被继承,不可在子类中访问,子类也不可声明同名属性,实例中也不存在该属性(一句话:只能在当前类的内部访问)
protected:与private有一点区别:1.可以在子类中访问,2.不能在实例中访问,但是可以在枚举。
static:这些属性存在于类本身,而不是类的实例,只能通过类名访问该属性,即使在该类之内也要加上类的名称。可以被子类继承
public:默认不写,在当前类中可使用,可以在实例中访问,也可被子类继承。

构造器新写法:

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

构造器旧写法:

class Person{
  name:string
  constructor(name:string){
     this.name = name;
  }
}

看一个继承:

class Student extends Person{
  constructor(public age:number, name:string){
     super(name)
  }
}
let student = new Student(12,'lisa');
console.log(student.name, student.age);

单例模式:

class SingleTon {
  static instance: SingleTon
  createInstance(){
    if(!this.instance){
      return this.instance = new SingleTon()
    }
    return this.instance
  }
}
let ins1 = SingleTon.createInstance();
let ins2 = SingleTon.createInstance();
console.log(ins1 === ins2) // true

枚举:
enum 枚举类型用于定义数值集合

enum Status {
  Html,
  CSS,
  JavaScript
}

console.log(Status.CSS); // 1

如果对enum中的元素赋值:

enum Status {
  Html,
  CSS = 3,
  JavaScript
}

console.log(Status.Html); // 0
console.log(Status.CSS); // 3
console.log(Status.Html); // 4

泛型(generic):
为了对不确定数据类型进行统一定义那么需要使用泛型
比如

function fn(params:string):string{
  return params;
}  

fn函数传入一个字符串返回一个字符串,如果要求传入一个数字返回一个数字那么就需要再写一个函数。使用泛型可以解决这个问题。

function fn<T>(params:T) :T{
  return params;
}  

函数在执行的时候可以传入类型,来定义需要的类型。

function fn<T>(params:T) :T{
  return params;
}  
fn<string>("qwer");

类中的泛型:

class Data<T>{
    constructor(private data:T[]){}
    getItem(index){
      return this.data[index]
    }
}

泛型继承

interface Item{
    name:string
}
class Data<T extends Item>{
    constructor(private data:T[]){}
    getItem(index:number){
      return this.data[index].name
    }
}
let a = new Data([{name:"s"}])
console.log(a.getItem(0));

泛型还可以继承基础类型

class Data<T extends number | string>{
    constructor(private data:T[]){}
    getItem(index:number){
      return this.data[index]
    }
}
let a = new Data([1,2,"sss"])
console.log(a.getItem(0));

命名空间(namespace):
使用命名空间可以解决命名冲突问题
使用语法:

namespace Components{
  class aaa {}
  let obj = {}
}

如果一个命名空间中的变量需要在外部被访问,那么还需要将它export出去

namespace Components{
  export class aaa {}
  let obj = {}
}

要在另外一个命名空间中使用Components.aaa

待续。。。

相关文章

  • TypeScript基础学习总结

    准备工作: 环境安装:npm install -g typescript查看:tsc-v出现版本号说明安装成功安装...

  • TypeScript 学习总结 (三)

    TypeScript 学习总结 (三) 前言:TypeScript 内容,会分 3 篇文章来写,可以持续关注哟~ ...

  • TypeScript 学习总结 (二)

    TypeScript 学习总结 (二) 前言:TypeScript 内容,会分 3 篇文章来写,可以持续关注哟~,...

  • typescript 基础总结

    先提一嘴:TypeScript 是结构类型系统,类型之间的对比只会比较它们最终的结构,而会忽略它们定义时的关系。 ...

  • typescript 基础学习

    6、数组的类型 最简单的方法是使用「类型 + 方括号」来表示数组: 我们也可以使用数组泛型(Array Gener...

  • TypeScript基础总结-基础类型

    一.基础类型1.布尔值(boolean):同js,true/false2.数字(number):同js,浮点数。可...

  • Nodejs学习

    学习基础:Node.js Express TypeScript Mongodb; 1.Nodejs start...

  • TypeScript基础总结-类

    1.继承:派生类中有构造函数时,必须执行super(),会调用基类的构造方法,而且得在构造函数访问this的属性之...

  • TypeScript基础总结-函数

    1.函数类型:三种定义函数的方式: 2.类型推导:赋值语句一边指定返回值类型,另一边未指定,ts编译器会自动识别出...

  • TypeScript基础总结-接口

    是什么?TODO 用法先看个简单的? 在这个?中,定义了Student接口和getStudent方法,规定getS...

网友评论

      本文标题:TypeScript基础学习总结

      本文链接:https://www.haomeiwen.com/subject/wnxaqktx.html