TypeScript基础知识总结

最新推荐文章于 2024-06-27 08:30:15 发布
最新推荐文章于 2024-06-27 08:30:15 发布
阅读量336 收藏 1
点赞数 2
分类专栏： TypeScript 文章标签： typescript js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44813417/article/details/111177111
版权

TypeScript

视频

黑马2020年前端热门教程推荐|五天从零基础学会TypeScript
TypeScript从入门到精通视频教程-2020年新版
个人认为先学第一个视频在学第二个
欢迎补充~

安装与运行

正常版

在这里插入图片描述
在这里插入图片描述

简化版

在这里插入图片描述
在这里插入图片描述

初体验

注释

单行注释

// content

多行注释

/* content */

输出语句

console.log(' content ')

变量和数据类型

什么是变量

变量是用来存储数据的容器，并且是可以变化的。

变量的使用

let age: number = 20
age = 21
console.log(age)

类型注解

类型注解是为变量添加类型约束的方式
约定了什么类型，只能给变量赋值什么类型的值。

静态数据类型

基础静态类型：number string null undefined boolean
对象静态类型：对象类型 数组类型 类类型 函数类型

null undefined

undefined 声明但未赋值的值
null 声明并且赋值，赋的值未null。

运算符

算术运算符

( + - * / )
+可实现字符串拼接

赋值运算符

= | += | -= | /= | *=

递增/递减运算符

++ | - -

比较运算符

逻辑运算符

&& ||

循环

for(let i: number = 0; i < 3; i++) {
    console.log(i)
}

数组

// 此数组只能存储字符串
let names: string[] = ['lyz', 'my']
console.log(names)

let per : (string|number)[] = ['lyz','my', 21]

// 类型别名
type Lady = {name: string, age: number}
let arr : Lady[] = [
    {name: 'lyz', age: 21},
    {name: 'my', age: 22}
]

元组

不常用

let arr : [string, number, string] = ['lyz', 21,'lyz']

函数

function sing(songName: string) {
    console.log(songName)
}
sing('有点甜')

// 函数返回值
function sum(number1: number, number2: number):number {
    return number1 + number2
}
let total = sum(1, 2)
console.log(total) 

// 参数为对象
function obj({one} : {one: number}) {
    return one
}
console.log(obj({one: 99}))

对象

类型注解

let person: {
    name: string;
    age: number;
    sayHi: () => void;
}
person = {
    name: 'lyz',
    age: 21,
    sayHi() {
        console.log('hi')
    }
}

接口

为对象的类型注解命名，并为你的代码建立契约来约束对象的结构

// height可有可无 any任意类型
let person: {
    name: string;
    age: number;
    height ?: number;
    [propname: string] : any;
    sayHi: () => void;
}
person = {
    name: 'lyz',
    age: 21,
    sex: 'nv',
    sayHi() {
        console.log('hi')
    }
}
console.log(p.sayHi(1))

interface Girl {
    name: string
}
let g = {
    name: 'lyz'
}
function say(g : Girl) {
    console.log(g.name)
}
say(g)

继承

interface IUser {
    name: string;
    age: number;
    sayHi: (number) => number;
}
interface Teacher extends IUser {
    teach: () => void
}
let te = {
    name: 'lyz',
    age: 21,
    sayHi(num) {
        return num
    },
    teach() {
        console.log('I am teacher')
    }
}
console.log(te.sayHi(99))
te.teach()

类型推论

在TS中，某些没有明确指出类型的地方，类型推论会帮助提供类型
发生类型推论的两种场景：1. 什么变量并初始化；2. 决定函数返回值时。

类

class Person {
    content = 'hello'
    sayHi() {
        return 'hi'
    }
}

class Girl extends Person {
    sayHi() {
        return super.sayHi() + ' world'
    }
    dance() {
        console.log('i can dance')
    }
}

const g = new Girl()
console.log(g.sayHi())
g.dance()

访问类型

public 类的内部和类的外部都能使用
protected 类的内部使用（继承中可使用）
private 只能在类的内部使用（继承中也不可能）

构造函数

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

继承中必须写super()

//简化
class Person {
    constructor(public name: string) {}
}
class Teacher extends Person {
    constructor(public age: number) {
        super('lyz')
    }
}
const per = new Teacher(21);
console.log(per.name)
console.log(per.age)



class Person {
    constructor(public name: string) {}
}
class Teacher extends Person {
    constructor(public name: string, public age: number) {
        super(name)
    }
}
const per = new Teacher('lyz', 21);
console.log(per.name)
console.log(per.age)

Getter Setter static

class Girl {
    constructor(private _age: number) {}
    get age() {
        return this._age-10
    }
    set age(age: number) {
        this._age = age + 7
    }
}
let girl = new Girl(21)
console.log(girl.age) // 11 返回的值为getter中的值
girl.age = 22 // 设置的是setter中 此时age为29 [22+7]
console.log(girl.age) // 19 [29-10]

静态类

无需实例化对象，就可以直接调用类中的方法。

class Person {
    static sayHi() {
        console.log('hi')
    }
}
Person.sayHi()

只读属性

class Girl {
    public readonly _name: string
    constructor(name: string) {
        this._name = name
    }
}
let girl = new Girl('lyz')
// girl._name = 'my' 不可对_name进行修改
console.log(girl._name)

抽象类

必须要重写抽象方法 否则会报错

abstract class Person {
    abstract say()
}
class Girl extends Person {
    say() {
        console.log('say boy')
    }
}
class Boy extends Person {
    say() {
        console.log('say girl')
    }
}

tsconfig.json文件

//tscongif起作用
tsc

联合类型和类型守护

interface Student {
    doing: false
    say: () => void
}
interface Teacher {
    doing: true
    take: () => void
}
function who(per: (Student | Teacher)) {
    if(per.doing) {
        (per as Teacher).take()
    } else {
        (per as Student).say()
    }
}
who({doing: true, take(){console.log('take')}})

interface Student {
    doing: false
    say: () => void
}
interface Teacher {
    doing: true
    take: () => void
}
function who(per: (Student | Teacher)) {
    if('say' in per) {
        per.say()
    } else {
        per.take()
    }
}
who({doing: false, say(){console.log('say')}})

function add(first: (string | number), second: (string | number)) {
    if(typeof first === 'string' || typeof second === 'string') {
        return `${first}${second}`
    }
    return first +second
}
console.log(add('9', 9))
console.log(add(9, 9))

class NumObj {
    constructor(public count: number){}
}
function add(first: NumObj | object, second: NumObj | object) {
    if(first instanceof NumObj && second instanceof NumObj) {
        return first.count + second.count
    }
    return 0
}
let first = new NumObj(1)
let second = new NumObj(1)
console.log(add(first,second))

枚举

enum Dream {
    House, 
    White,
    Beauty
}
function getDream(dream: any) {
    if(dream === Dream.White) {
        console.log("White")
    } else if (dream === Dream.House) {
        console.log("House")
    } else if (dream === Dream.Beauty) {
        console.log("Beauty")
    }
}
getDream(1)
console.log(Dream.White, Dream[1])  //1 'White'
console.log(Dream.House) // 0
console.log(Dream.Beauty) // 2

泛型

在函数调用时确定类型

函数

function add<T>(first: T, second: T) {
    return `${first}${second}`
}
console.log(add<string>('m', 'y'))

function getArr<T>(arr: Array<T>){
    return arr
}
console.log(getArr<number>([1, 2]))

function getArray<T>(arr: T[]){
    return arr
}
console.log(getArray<string>(['9', '9']))

function add<T, P>(first: T, second: P) {
    return `${first}${second}`
}
console.log(add<string, number>('m', 1))

类

class SelectGirls<T> {
    constructor(public girl: T[]) {}
    getGirl(index: number) {console.log(this.girl[index])}
}
let g = new SelectGirls(['lyz', 'glnz', 5])
g.getGirl(2)

继承

interface Girl {
    name: string
}

class SelectGirls<T extends Girl> {
    constructor(public girl: T[]) {}
    getGirl(index: number):string {return this.girl[index].name}
}
let g = new SelectGirls([
    {name: 'lyz',age: 21},{name: 'my',age: 22},{name: 'lyj',age: 11}
])
console.log(g.getGirl(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>
    <script src="./build/page.js"></script>
</head>
<body>
    <script>
        new Home.Page()
    </script>
</body>
</html>

// ts文件
//components.ts
namespace Components {
    export class Header {
        constructor() {
            const elem = document.createElement('div')
            elem.innerText = 'Header'
            document.body.appendChild(elem)
        }
    }
    export class Content {
        constructor() {
            const elem = document.createElement('div')
            elem.innerText = 'Content'
            document.body.appendChild(elem)
        }
    }
    export class Footer {
        constructor() {
            const elem = document.createElement('div')
            elem.innerText = 'Footer'
            document.body.appendChild(elem)
        }
    }
}
//page.ts
namespace Home {
    export class Page {
        constructor() {
            new Components.Header()
            new Components.Content()
            new Components.Footer()
        }
    }
}

装饰器

装饰器是一种特殊类型的声明，它能够被添加到类声明，方法、属性或参数上，可以修改类的行为。
常见的装饰器：类装饰器、属性装饰器、方法装饰器、参数装饰器。
装饰器的写法：普通装饰器（无参数）、装饰器工厂（可传参）。

类装饰器

// 普通装饰器
function logClass(params: any) {
    console.log(params)
    params.prototype.apiurl = '动态扩展属性'
    params.prototype.say = function() {
        console.log('say')
    }
}

@logClass
class HttpClient {
    constructor() {}
}

let h = new HttpClient()
console.log(h.apiurl)
h.say()

// 装饰器工厂
function logClass(params: string) {
    return function(target: any) {
        console.log(target)
        console.log(params)
        target.prototype.uname = params
    }
}
@logClass('lyz')
class HttpClass {
    constructor() {}
}
let h = new HttpClass()
console.log(h.uname)

类装饰器会在运行时被当做函数调用，类的构造函数作为唯一的参数。
如果装饰器返回一个值，他会使用提供的构造函数来替换类的声明。

// 类装饰器重载构造函数
function logClass(params: any) {
    return class extends params {
         uname: any = '我是修改后的uname' 
         getUname(){
            this.uname = this.uname +'-------'
            console.log(this.uname)
         }
    }
}
@logClass
class HttpClass {
    public uname: string | undefined
    constructor() {
        this.uname = 'uname'
    }
    getUname() {
        console.log(this.uname)
    }
}
let h = new HttpClass()
h.getUname()

属性装饰器

属性装饰器会在运行时当做函数被调用，传入两个参数：

  1. 对于静态成员来说是类的构造函数，对于实力成员是类的原型；
  2. 成员的名字。
function logParam(params:any) {
    return function(target: any, attr: any) {
        console.log(target)
        console.log(attr) // uname
        target[attr] = params
    }
}

class LogCons {
    @logParam('lyz')
    public uname: any
    constructor() {}
    getName() {
        console.log(this.uname) // lyz
    }
}
let h = new LogCons()
h.getName()

方法装饰器

方法装饰器会被应用到方法的属性描述符上，可以用来监视，修改或替换方法定义。
方法装饰器会在运行时传入下列三个参数：

  1. 对于静态成员来说是类的构造函数，对于实力成员是类的原型；
  2. 成员的名字；
  3. 成员的属性描述符。
    这里是引用。
function get(params: any){
    return function(target: any, getMethodName: any, desc: any) {
        console.log(target)
        console.log(getMethodName)
        console.log(desc)

        target.api = 'xxx'
        target.run = function(){
            console.log('run')
        }
    } 
}
class GetFun {
    public url: any | undefined
    constructor(){}
    @get('lyz')
    getName() {
        console.log(this.url)
    }
    getAge(){}
} 
let g = new GetFun()
console.log(g.api)
g.run()
g.getName()

// 修改
function get(params: any){
    return function(target: any, getMethodName: any, desc: any) {
        console.log(target)
        console.log(getMethodName)
        console.log(desc.value)
		
		// 把当前参数修改为string类型
        // 保存当前方法
        let oMethod = desc.value
        desc.value = function(...arg: any[]){
            arg = arg.map( ele =>{
                return String(ele)
            })
            console.log(arg)

            oMethod.apply(this, arg)
        }
    } 
}
class GetFun {
    public url: any | undefined
    constructor(){}
    @get('lyz')
    getName(...arg: any[]) {
        console.log(arg)
    }
    getAge(){}
} 
let g = new GetFun()

g.getName(99, 11, 23)

方法参数装饰器

方法参数装饰器表达式会在运行时当做函数被调用，可以使用方法参数装饰器为类的原型增加一些元素数据，传入下列三个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型；
  2. 方法的名称；
  3. 参数在函数参数列表中的索引。
function get(params: any){
    return function(target: any, methodName: any, paramsIndex: any) {
        console.log(target)
        console.log(methodName)
        console.log(paramsIndex)

        console.log(params)
        
    } 
}
class GetFun {
    public url: any | undefined
    constructor(){}
    getName(@get('nname')uname: any) {
        console.log(uname)
    }
} 
let g = new GetFun() 
g.getName('lyz')

执行顺序

同一类型从右向左（从下向上）
不同类型：属性装饰器>方法装饰器>方法参数装饰器>类装饰器

一只烛
关注
专栏目录
TypeScript基础
weixin_71437031的博客
09-08 184
ts是js的一个超集，支持ES6标准由微软开发的自由和开源的编程语言目标是开发大型应用，可以编译成纯js运行在任何浏览器上本质上向这个语言添加了可选的静态类型和基于类的面向对象编程TS优势更早的发现错误任何位置都有代码提示，增加开发效率类型系统提升了代码的可维护性，重构更容易·使用最新的ECMAScript语法，最新TS类型推断机制，降低成本开发环境搭建1.安装vSCode2.安装Node.js:使用命令node -v来检查nodejs版本3.安装TypeScript编译器:4.
Typescript知识点总结
qq_52721755的博客
07-08 559
简要的Typescript总结
Java编程思想笔记（十五）——泛型
小封的博客
10-16 176
感悟 泛型使Java抽象更进一步，是Java SE5的重大变化之一。之后章节会经常接触泛型，重点理解泛型的基础概念，同时掌握几种常见泛型例子是本章的重点。 笔记
基于Vue3.X + Typescript实现的在线PPT制作工具，开源！
最新发布
趣谈前端
06-27 458
嗨，大家好，我是徐小夕。之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：H5-Dooring（页面可视化搭建平台）V6.Dooring（可视化大屏搭建平台）橙子6试卷（表单搭建引擎）Nocode/WEP 文档知识引擎最近在研究办公三件套（WPS），打算做个纯WEB版本的，偶然在github上发现了一款非常有意思的开源项目，它模仿了Office的P...
JAVA编程思想笔记--泛型
LLLigj博客
06-19 370
1 . 泛型的主要目的之一就是用来指定容器要持有什么类型的对象。2 . 简单泛型public class Holder3<T> { private T a ; public Holder3(T a){ this.a = a ; } public void set(T a) { this.a = a ; } public
Java编程思想_15.泛型_阅读笔记
08-16 128
1.泛型出现背景 方法的参数类型是一个基类，则基类的所有子类都可以作为该方法的参数--->拘泥于类的单继承 方法的参数类型是一个接口，则任何实现了该接口的类都可以作为该方法的参数--->接口的多实现 方法的参数类型是某种不确定的类型，则任何类型都可以作为该方法的参数--->泛型：参数化类型 2.泛型的主要目的之一就是用来指定容器要持有什么类型的对象，而且有编译器来确定类型的正确性 3.泛型可表示任意类型及几种任意类型间的关系 例如：TwoTuple<A,B,C>，.
TypeScript 基础
Lazy_Life的博客
08-20 468
1.什么是 TypeScript： （1）TypeScript 是一种由微软开发的开源的编程语言，它是 JavaScript 的一个超集，拓展了 JavaScript 的语法； （2）现有的 JavaScript 代码可与 typescript 一起工作无需任何修改； （3）typescript 可处理已有的 JavaScript 代码，并只对其中的 typescript 代码进行编译； ...
TypeScript基础知识点
06-20
TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载...
TypeScript知识点汇总
qq_31360419的博客
12-23 169
1.TS声明 declare var ant:string // 声明字符串 declare const min:1 // 声明常量 min = 1 declare function func(str:string):string // 声明函数，传递返回都是string declare class Person { static maxAge: number //静态变量 static ...
TypeScript高级用法的知识点汇总
01-19
引言 作为一门强大的静态类型检查工具，如今在许多中大型...最近公司刚好准备使用TypeScript来对现有系统进行重构，以前使用TypeScript的机会也不多，特别是一些有用的高级用法，所以借着这次机会，重新巩固夯实一下
typescript 基础
qq_24832277的博客
11-16 622
TypeScript简介 1、TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript，是由微软开发的开源、跨平台的编程语言。 2、TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。 3、TypeScript 是 JavaScript 的一个超集，TypeScript扩展了JavaScript的语法，任何现有的Java
TypeScript入门基础
Better_Xing的博客
11-02 2106
TypeScript入门基础
《JAVA编程思想》学习笔记：第15章（泛型）
caobaokang的专栏
01-28 860
目录Java编程思想（一）第1~4章：概述Java编程思想（二）第5章：初始化和清理Java编程思想（三）第6章：访问权限Java编程思想（四）第7章：复用类Java编程思想（五）第8章：多态Java编程思想（六）第9章：接口Java编程思想（七）第10章：内部类Java编程思想（八）第11章：持有对象Java编程思想（九）第12章：异常Java编程思想（十）第13章：字符串Java编程思想（十一...
TypeScript基础知识
DL-ZhangTeng的博客
12-13 956
Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined；变量不可以在作用域以外的地方使用。左移，把
TypeScript基础入门
w1404273025的博客
07-25 312
TypeScript基础入门
typescript基础入门
jinxi1112的博客
08-27 207
基础类型 let isTrue: boolean = false let price: number = 3 let name: string = 'zhangsan' let arr: number[] = [1, 2, 3] 数组 let arr: Array<number> = [1, 2, 3] 元组 let x: [string, number, number] = ['zhangsan', 12, 23] x[3] = 'world' //当访问一个越界的元素，会使
"TypeScript 基础篇学习文档总结与完结
本文档为TypeScript初学者提供了全面的基础知识，从初识TypeScript，到为什么使用TypeScript，再到常用类型的介绍，都进行了详细的讲解。内容包括TypeScript的基本概念、特点、使用场景、与其他竞争者的比较，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值