首页  思维导图  详情

typescript学习笔记

2021-08-31 15:23:38   20  举报





AI智能生成

typescript 接口泛型类面向对象 javasscript es5 es6 html

TypeScript语法

class

interface

oop

javascript

作者其他创作

大纲/内容

安装

npm install -g typescript

查看安装版本

tsc -version

文件名 *.ts

编译

手动编辑

tsc file.ts

自动编译

创建配置文件

tsc --init 

修改tsconfig.json

outDir:'./js'

vscode中，选择终端=》运行任务=》tsc：监视typescript

等同于命令：tsc -p e:\study_new_tech\typescript\tsconfig.json --watch

类型

任意类型 any 声明为 any 的变量可以赋予任意类型的值。

数字类型 number  双精度 64 位浮点值。它可以用来表示整数和分数。 let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744;    // 八进制 let decLiteral: number = 6;    // 十进制 let hexLiteral: number = 0xf00d;    // 十六进制

字符串类型 string  一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。 let name: string = "Runoob"; let years: number = 5; let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;

布尔类型 boolean  表示逻辑值：true 和 false。 let flag: boolean = true;

数组类型  声明变量为数组。 // 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array<number> = [1, 2];

元组  元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。 let x: [string, number]; x = ['Runoob', 1];    // 运行正常 x = [1, 'Runoob'];    // 报错 console.log(x[0]);    // 输出 Runoob

枚举 enum  枚举类型用于定义数值集合。 enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c);    // 输出 2

void void  用于标识方法返回值的类型，表示该方法没有返回值。 function hello(): void {     alert("Hello Runoob"); }

null null  表示对象值缺失。

undefined undefined  用于初始化变量为一个未定义的值

never never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

函数

函数返回值

function function_name():return_type {      // 语句     return value;  }

带参数函数

function func_name( param1 [:datatype], param2 [:datatype]) {   }

function add(x: number, y: number): number {     return x + y; }

可选参数

function buildName(firstName: string, lastName?: string) {     if (lastName)         return firstName + " " + lastName;     else         return firstName; } let result1 = buildName("Bob");  // 正确 let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了 let result3 = buildName("Bob", "Adams");  // 正确

如果有多个参数，可选参数必须配置在最后一个参数上

默认参数

function calculate_discount(price:number,rate:number = 0.50) {      var discount = price * rate;      console.log("计算结果: ",discount);  }  calculate_discount(1000)  calculate_discount(1000,0.30)

剩余参数

function buildName(firstName: string, ...restOfName: string[]) {     return firstName + " " + restOfName.join(" "); }    let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数的最后一个命名参数 restOfName 以 ... 为前缀，它将成为一个由剩余参数组成的数组，索引值从0（包括）到 restOfName.length（不包括）。

function addNumbers(...nums:number[]) {       var i;        var sum:number = 0;           for(i = 0;i<nums.length;i++) {         sum = sum + nums[i];      }      console.log("和为：",sum)   }   addNumbers(1,2,3)   addNumbers(10,10,10,10,10)

函数重载

function disp(s1:string):void;  function disp(n1:number,s1:string):void;    function disp(x:any,y?:any):void {      console.log(x);      console.log(y);  }  disp("abc")  disp(1,"xyz");

类

定义示例

class Car {      // 字段      engine:string;        // 构造函数      constructor(engine:string) {          this.engine = engine      }         // 方法      disp():void {          console.log("发动机为 :   "+this.engine)      }  }

实例化

var obj = new Car("Engine 1")

继承

class Shape {     Area:number         constructor(a:number) {        this.Area = a     }  }    class Circle extends Shape {     disp():void {        console.log("圆的面积:  "+this.Area)     }  }    var obj = new Circle(223);  obj.disp()

class Man {   protected name: string   constructor(name: string) {     this.name = name   }   run(): void {     console.log(`${this.name} is running`)   } } class SuperMan extends Man {   fly(): void {     console.log(`${this.name} can fly`)   } } let man: Man = new SuperMan('kongxm') man.run() let superMan: SuperMan = new SuperMan('outman') superMan.run() superMan.fly()

访问控制修饰符

public（默认） : 公有，可以在任何地方被访问。 protected : 受保护，可以被其自身以及其子类和父类访问。 private : 私有，只能被其定义所在的类访问。

static 关键字

class StaticMem {      static num:number;         static disp():void {        console.log("num 值为 "+ StaticMem.num)     }  }    StaticMem.num = 12     // 初始化静态变量 StaticMem.disp()       // 调用静态方法

抽象类（多态）

abstract class Animal {   protected name: string   constructor(name: string) {     this.name = name   }   abstract eat(): void } class Dog extends Animal {   eat(): void {     console.log(`${this.name} eat meat.`)   } } let doc: Animal = new Dog('wang cai') doc.eat()

接口

属性接口

interface Login {   name: string   password: string } let doLogin = (form: Login) => {   console.log(`${form.name} & ${form.password}`) } doLogin({   name: 'kxm',   password: 'pwd' })

函数接口

interface LoginForm {   (usernmae: String, password: number): void } let wechatLogin: LoginForm = (usernmae: String, password: number) => {   console.log(`wechat login = ${usernmae} & ${password}`) } let alipayLogin: LoginForm = (usernmae: String, password: number) => {   console.log(`alipay login = ${usernmae} & ${password}`) } wechatLogin('wechat', 123) alipayLogin('alipay', 456)

可索引接口

基本没什么卵用

类接口

interface Vehicle {   name: string;   run(tips: string): void }

class Car implements Vehicle {   name: string;   constructor(name: string) {     this.name = name   }   run(): void {//子类实现不一定需要有参数值     console.log('car name = ', this.name)   } }

class Bus implements Vehicle {   name: string;   constructor(name: string) {     this.name = name   }   run(tips: string): void {     console.log('bus name = ', this.name)   } }

接口继承

interface Human {   eat(): void }

interface Kid extends Human {   play(): void }

class Programer implements Kid {   play(): void {     throw new Error("Method not implemented.");   }   eat(): void {     throw new Error("Method not implemented.");   } }

泛型

泛型类

class TypeInfo<T> {   print(str: T): void {     if (typeof (str) === 'number') {       console.log('this is type of number')     }     if (typeof (str) === 'string') {       console.log('this is type of string')     }   } } let stringType: TypeInfo<String> = new TypeInfo() stringType.print('string') let numberType: TypeInfo<Number> = new TypeInfo() numberType.print(123)

泛型接口

interface MyConfig<T> {   (config1: String, config2: T): T } let myConfig: MyConfig<Number> = (config1: String, config2: Number): Number => {   return config2; } myConfig("1", 2)

类作为泛型参数

class Person {   username: string   age: number   constructor(params: {     username: string,     age: number   }) {     this.username = params.username     this.age = params.age   } }

class Person2 {   username: string   age: number   constructor(username: string, age: number) {     this.username = username     this.age = age   } }

class MysqlTool<T extends Person> {   add(obj: T): void {     console.log('add method ', obj)   } } let person: Person = new Person({ username: 'kxm', age: 30 }) let mysqlTool = new MysqlTool() mysqlTool.add(person)

模块

方式一

定义

export let url = 'http://www.baidu.com' export function doSomething() {   console.log('do something else') }

使用

import { url, doSomething } from "./modules/_m1" console.log(url) doSomething()

方式二

定义

let url = 'http://www.baidu.com' function doSomething() {   console.log('do something else') } export {   url,   doSomething }

使用

同上

方式三