【typescript】记录typescript基本知识的学习

1.typescript特点

1.编译型的语言
2.强类型的语言
3.真正面向对象的语言

 

 2.全局安装

npm install -g typescript

 tips:ts编译成js：tsc demo.ts 

 

3.基础数据类型 

 字符串类型

let email:string="111@163.com"
let msg:string = `my email is ${email}`

 

布尔类型

let isTrue:boolean=false

 

 数字类型

let age:number=10

 

数组

let list:number[]=[1,2,3,4]

// 数组泛型，Array<元素类型>
let list: Array<number> = [1, 2, 3]

 

元组：已知元素数量和类型的数组

let arr:[string,number]=['aaa',10]

 元素的数量等于类型的种类，元素排列顺序与对应类型排列顺序一致

 

枚举

enum Weeks{mon,tue,wed}//索引从0开始
let day:Weeks=Weeks.mon;
console.log(day);//索引值
console.log(Weeks[0]);//对应的值
console.log(Weeks['mon']);

也可手动指定成员的数值

enum Weeks{mon = 2,tue,wed}

 

any（任何类型）

let x:any='a'
x=10

 

void（函数的返回值（无））

function fun():void{
    console.log(111);
    //return 111;//因为无返回值，所以这里抛异常
}

function fun1():string{//返回对应类型
    return '111';
}

void类型只能赋值undefine和null

let a: void = undefined;

 

undefine和null

let y:null=null

let y:undefined=undefined

 

never??Object??

 

 

4.联合数据类型

或

let x2:number | string | boolean
x2:true

 

类型推论

let x3=3;
//x3='';//根据初始化类型的值进行推论

推了个寂寞???

类型断言

let x5:string |number |boolean;
let strlength:number= x5.length; //报错，不知道x5是什么类型

let x5:string |number |boolean='aabb';
let strlength:number=x5.length;//不报错

let x5:string |number |boolean='aabb';
let strlength:number=(<string>x5).length;//不报错
let strlength1:number=(x5 as string).length;//不报错

 

 

5.接口

接口可理解为一种规范或者限制，行为的抽象，可以用来约束类，数组，函数，对象

对类的约束

//接口定义
// 自定义声明，不包含具体内容
interface Iprinter{//打印接口
    //约束函数规范
    //不包含函数体
    Printer(msg:string):string;
}


interface Imsg{
    getmsg():string;
}


// 实现接口，要实现里面的内容
class colorprinter implements Iprinter,Imsg{//实现多个接口

    Printer(msg:string):string{
        return '打印'+msg+'成功';
    }

    getmsg():string{
        return '实现信息接口';
    }
}

let p1 = new colorprinter();
console.log(p1.Printer('简历'));
console.log(p1.getmsg());

 

对函数的约束

interface Imyfunction{
    (a:string,b:number):boolean;//函数规范的定义
}


let fun1:Imyfunction;
fun1=function (a:string,b:number):boolean{
    return false;
}

 

 对数组的约束

interface Istuarr{
    [index:number]:string;
}

let arr1:Istuarr;
arr1 =['aa','bb'];

 

对对象的约束

interface Idara{
    name:string;
    readonly age:number;    //只读属性
    email?:string;//可选属性

}
function showdata(n:Idara){
    console.log(n);
}
showdata({name:'张三',age:19});

 

接口的继承

interface Printer{
    getmsg();
}

//接口继承接口
interface colorprinter extends Printer{
    printer();
}


//类实现接口
class hpprinter implements colorprinter{
    getmsg(){
       console.log('打印机');
    }
    printer(){
       console.log('彩色打印机');
    }
}

 

 

6.类

 类的定义

class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    printer(){
        return this.name +','+this.age;
    }
}
let p = new Person('lala',19);
console.log(p.printer());

 

类的继承

class Student extends Person{
    cardnum:string;
    school:string;
    constructor(cardnum:string,school:string){
        super('ee',20);
        this.cardnum = cardnum;
        this.school = school;
    }
    dowork(){
        return this.name +','+this.cardnum;
    }
}

let stu = new Student('11','学校');
console.log(stu.dowork());

 

 

7.访问修饰符

public / private / protected

• public：类的内外部都可访问
• private：只能在类的内部访问
• protected：在类的内部及其子类可以访问

静态属性 / 静态方法

class food{
    // 实例属性
    name:string='食物';
    static age:number=10;//静态属性
    // 实例方法
    printer(){
        console.log('aaa');
    }
    static printer1(){
        console.log('bbb');
    }
}
// 静态属性  类名访问
food.age=1;
// 静态方法  类名访问
food.printer1();

 

多态

同一个父类下面的不同子类，有不同的实现

class animal{
    eat(){
        console.log('eat');
    }
}

class cat extends animal{
    eat(){
        console.log('cat');
    }
}

class dog extends animal{
    eat(){
        console.log('dot');
    }
}

// 不同的子类有不同的实现
let c1 = new cat();
c1.eat();

 

抽象类 / 抽象方法

//抽象类和抽象方法
//抽象类是提供其他类继承的基类（父类），不能直接被实例化
//抽象方法只能包含在抽象类中，抽象类中可以包含抽象方法和非抽象方法
// 子类继承抽象类，实现抽象方法

abstract class dian{
    abstract dianqi();//抽象方法，无具体的方法体
    run(){
        console.log('run');//非抽象方法
    }
}


class kongtiao extends dian{
    dianqi(){
        console.log('kongtiao');
    }
}

class bingxiang extends dian{
    dianqi(){
        console.log('bingxiang');
    }
}

let kongtiao1 = new kongtiao();
kongtiao1.dianqi();

 

 

8.函数

函数的定义

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

let add1 = function(x,y):number{return x+y}

 

函数的参数（可选参数 / 默认参数 / 剩余参数）

//x为默认参数
function add2(x:number=10,y:number):number{
    return x+y;
}

//参数后有问号，表示是可选参数
function show(name,age?:number):void{
    console.log(name);
}
show('aaa');

// 剩余参数
function add3(x1,x2,...x:number[]):number{
    let sum = 0;
    for(let i=0;i<x.length;i++){
        sum+=x[i];
    }
    return x1+x2+sum;
}
console.log(add3(1,2,3,4,5,6));

 

函数重载

function getinfo(name:string):void;
function getinfo(age:string):void;
function getinfo(str:any):void{
    if(typeof str =='string'){
          console.log('名字'+str);
    }
    if(typeof str =='number'){
        console.log('年龄'+str);
    }
}

 

 

 

9.泛型 

 泛型函数

function printer<T>(arr:T[]):void{
    // for   /  for in   /for of
    for(let item of arr){
       console.log(item);
    }
}

printer<string>(['aa','bb','aa']);
printer<number>([11,22,33]);

 

泛型类

class myArrayList<T>{
    public name:T;
    public list:T[]=[];
    add(val:T):void{
        this.list.push(val);
    }
}

let arr = new myArrayList<number>();
arr.add(11);
arr.add(22);
console.log(arr.list);

 

泛型接口

interface Iadd<T>{
    (x:T,y:T):T;
}
var add1:Iadd<number>;
add1=function(x:number,y:number){
    return 111;
}
console.log(add1(1,5));

 

 

10.简单示例

1.todoList

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item-ok{
            text-decoration: line-through;
            color:#ccc;
        }
    </style>
</head>
<body>
    <input type="text" id="content" placeholder="输入代办事项">
    <button id="btn">添加代办事项</button>

    <ul id="todolist">
        <li>一条代办</li>
        <li>me too</li>
    </ul>
    <script src="./todolist.js"></script>
</body>
</html>

 js代码：

// 1.定义代办事项类
class Todo{
    content:string;
    status:boolean;

    constructor(content:string,status:boolean){
        this.content = content;
        this.status = status;
    }
}


// 2.初始化代办信息
let todolist:Todo[]=[
    new Todo('第一条代办',true),
    new Todo('第二条代办',false)
];

// 3.渲染代办列表
const todoul = document.getElementById('todolist');
const content:HTMLInputElement = document.querySelector('#content');
const btn = document.getElementById('btn');
function renderList(){
    let listdom = '';
    if(todolist.length > 0){
        todolist.forEach(function(elm,index){
            // es6拼接
            listdom+=`<li class="${elm.status ? 'item-ok':''}">${elm.content}</li>`;
        });
    }else{
        listdom+=`<li>暂无代办</li>`;
    }
    todoul.innerHTML = listdom;
}

// 4.添加代办
function addTodo(){
    const contentVal = content.value.trim();
    if(!contentVal){
        alert('请输入代办');
        return false;
    }
    todolist.push(new Todo(contentVal,false));
    content.value = '';
    renderList();
}

btn.addEventListener('click',()=>{
    addTodo()
});

window.onload = function(){
    renderList();
}

2.购物车 

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header li{
            float: left;
            list-style: none;
            margin-right: 100px;
        }
    </style>
</head>
<body>
    <ul class="header">
        <li>名称</li>
        <li>描述</li>
        <li>单价</li>
        <li>数量</li>
    </ul>
    <br/>
    <ul id="box">

    </ul>
    总价：<span id="sum"></span>
    <script src="09-购物车.js"></script>
</body>
</html>

js代码：

// 假数据
const cartGoodsList=[
    {
        id:'1',
        name:'苹果手机',
        desc:'aaaa',
        price:2000,
        count:1,
        isChecked:true
    },
    {
        id:'2',
        name:'小米手机',
        desc:'bbbb',
        price:1500,
        count:1,
        isChecked:true
    }
];

// 购物车类
class Cart{
    cartGoodsList=cartGoodsList;//购物车商品列表
    cartdom:HTMLElement = document.querySelector('#box');
    sumdom:HTMLElement = document.querySelector('#sum');
    
    // 渲染购物车
    renderCart(){
        let cartDom = '';
        this.cartGoodsList.forEach(item=>{
            cartDom+= 
            `<li>
                <input type="checkbox" ${item.isChecked ? 'checked':''} id="${item.id}"/>
                <span>${item.name}${item.desc}</span>
                ${item.price}  ${item.count}
            </li>`;
        });
        this.cartdom.innerHTML = cartDom;
    }

    // 渲染总价
    renderSum(){
        let total = 0;
        this.cartGoodsList.forEach(item=>{
            if(item.isChecked){
                total += item.price * item.count;
            }
        });
        this.sumdom.innerHTML = '￥'+total;
    }

    // 勾选/取消勾选
    checkGoods(id){
        this.cartGoodsList.forEach(item=>{
            if(item.id === id){
                item.isChecked = item.isChecked ? false:true;
            }
        });
        this.renderSum();
    }

    // 初始化
    init(){
        this.renderCart();
        this.renderSum();
        // 给每个li加上点击事件
        document.querySelectorAll('input').forEach(item=>{
            item.addEventListener('click',()=>{
                this.checkGoods(item.id);
            });
        });
    }
}

let cart = new Cart();
cart.init();

 

 tsconfig.js配置说明

 摘自：https://juejin.cn/post/6844904008583217165 

// tsconfig.json
{
    "compilerOptions": {
        // 不报告执行不到的代码错误。
        "allowUnreachableCode": true,
        // 必须标注为null类型,才可以赋值为null
        "strictNullChecks": true,
        // 严格模式, 强烈建议开启
        "strict": true,
        // 支持别名导入:
        // import * as React from "react"
        "esModuleInterop": true,
        // 目标js的版本
        "target": "es5",
        // 目标代码的模块结构版本
        "module": "es6",
        // 在表达式和声明上有隐含的 any类型时报错。
        "noImplicitAny": true,
        // 删除注释
        "removeComments": true,
        // 保留 const和 enum声明
        "preserveConstEnums": false,
        // 生成sourceMap    
        "sourceMap": true,
        // 目标文件所在路径
        "outDir": "./lib",
        // 编译过程中需要引入的库文件的列表
        "lib": [
            "dom",
            "es7"
        ],
        // 额外支持解构/forof等功能
        "downlevelIteration": true,
        // 是否生成声明文件
        "declaration": true,
        // 声明文件路径
        "declarationDir": "./lib",
        // 此处设置为node,才能解析import xx from 'xx'
        "moduleResolution": "node"
    },
    // 入口文件
    "include": [
        "src/main.ts"
    ]
}