首页 > 其他分享 >Typescript：基础语法学习（尚硅谷 李立超）

Typescript：基础语法学习（尚硅谷 李立超）

时间：2023-07-24 23:11:16浏览次数：54  
标签：Typescript console 李立超 age number name let 硅谷 string

官方文档：https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

搭建开发环境

npm i -g typescript
安装完成界面：
image.png
查看是否安装完成，输入以下命令：
tsc
image.png
执行命令：
node 文件名``

编译代码

tsc 01_HelloTs.ts
image.png

基础语法

变量声明

// 生命一个变量a，同时指定他的类型为number
let a: number

// a的类型不能修改
a = 10
a = 50

// 字符串
let b: string
b = 'hello'

// 布尔值
// let c:boolean = false

// 如果变量的声明和赋值时同时进行的，TS可以自动对变量进行类型检测
let c = false
c = true

变量定义后，类型不能修改
image.png

字面量和联合类型

// 直接使用字面量进行类型声明, 类似于常量
let a: 10
a = 10

// 可以使用|来连接多个类型（联合类型）
let b: "male"| "female"

b = "male"
b = "female"

let c: boolean|string
c = true
c = "hello"

任意值 any

可以赋予变量任意类型的值
声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

断言

let e = "hello"

// 类型断言, 可以用来告诉解析器变量的实际类型
let s = e as string
s = <string>e

void 空值

// void用来表示空，以函数为例，就表示没有返回值的函数
function fn():void{
    
}

object 对象

// object表示一个js对象
let a: object;
a = {}
a = function () {
	
}

定义对象结构

// [propName:string]:any 表示任意类型的值
let c: {name:string, [propName:string]:any};

c = {name:'leo', age:18}

设置函数解构的类型声明

// 设置函数解构的类型声明
// 语法：（形参：类型，形参：类型……）=>返回值

let d: (a:number, b:number) => number

数组

// string[]，表示字符串数组
let e:string[]
e = ['a', 'b', 'c']

//  number[], 表示数值
let f: number[]
f = [1,2,3]

let g: Array<number>
g = [1,2,3]

枚举类型

// 枚举类型
enum Gender{
    male =  0,
    female = 1
}

let i: {name:string, gender:Gender}
i = {
    name: '孙悟空',
    gender: Gender.male
}

console.log(i.gender === Gender.male) // true

表示同时

// &表示同时
let j: {name: string} & {age:number}

j = {name: '孙悟空', age: 18}

console.log(j) //{ name: '孙悟空', age: 18 }

类型的别名

// 类型的别名
type myTye = 1|2|3|4|5

let k: myTye

k = 1

编译选项

生成tsconfig.json

tsc --init

全部编译

tsc

实时监听

tsc -w

webpack

初始化文件

npm init -y

安装依赖

npm i -D webpack webpack-cli typescript ts-loader

增加配置文件

image.png

  • 添加webpack.config.js
// 引入一个包
const path = require('path')

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output:{
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的名称
        filename: "bundle.js"
    },

    // 指定webpack打包时要使用的模块
    module:{
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    }
}
  • 添加tsconfig.json
{
    "compilerOptions": {
     "target": "es6",
     "module": "es6",
     "strict": true
    }
  }
  • 在package.json中添加命令脚本
"build": "webpack"

image.png

编译命令

npm run build

自动生成html文件

npm i -D html-webpack-plugin

  • 文件配置
// webpack.config.js

// 引入html文件
const HTMLWebpackPlugin = require('html-webpack-plugin');


// 配置webpack插件
    plugins:[
        new HTMLWebpackPlugin(
            {
                template: './src/index.html'
            }
        ),
    ]

在项目中安装浏览器

npm i -D webpack-dev-server

  • 文件配置
"start": "webpack server --open chrome.exe"

image.png

  • 启动命令

npm start

安装bable

npm i -D @babel/core @babel/preset-env babel-loader core-js

类实例

class Dog{
    
    // 构造函数
    constructor(name: string, age: number){
        // 在实例方法中，this就表示当前的实例
        // 在构造函数中当前对象就是当前新建的那个对象
        // 可以通过this想新建的对象中添加属性

        this.name = name
        this.age = age

    }

    bark(){
        alert("qqq")
    }
}

const dog = new Dog('小河', 4)

console.log(dog) //Dog { name: '小河', age: 4 }

继承

class Animal{
    
    // 构造函数
    constructor(name: string, age: number){
        this.name = name
        this.age = age

    }

    sayHello(){
        console.log("动物在叫")
    }
}

// extend 继承关键字
class Dog extends Animal{
    run(){
        console.log(`${this.name}再跑`)
    }
}

class Cat extends Animal{

}


const dog = new Dog('小河', 4)
const cat = new Cat('咪咪', 3)

console.log(dog)
dog.sayHello()
dog.run()
console.log(cat)
cat.sayHello()

运行结果如下所示：
image.png

super

简单示例

class Animal{
    name : string

    constructor(name:string){
        this.name = name
    }

    sayHello(){
        console.log("动物在叫~~")
    }
}

class Dog extends Animal{
    sayHello(){
        // 在类方法中，super表示当前类的父类
        super.sayHello()
    }
}

const dog = new Dog("旺财")
dog.sayHello() //动物在叫~~

子类中构造函数的使用

class Animal{
    name : string

    constructor(name:string){
        this.name = name
    }

    sayHello(){
        console.log("动物在叫~~")
    }
}

class Dog extends Animal{
    age: number

    constructor(name:string,age: number){
        // 如果在子类中写了构造函数，在类构造函数中必须添加super方法
        
        super() // 调用父类的构造函数
        this.age = age
    }


    sayHello(){
        // 在类方法中，super表示当前类的父类
        super.sayHello()
    }
}

const dog = new Dog("旺财", 3)
dog.sayHello() //动物在叫~~

抽象类

关键字 abstract

/* 
以abstract开头的类是对象类
抽象类和其他类区别不大，只是不能用来创建对象
抽象类就是专门用来被继承的类

抽象类中可以添加抽象方法
*/

abstract class Animal{
    name : string

    constructor(name:string){
        this.name = name
    }

    // 定义一个抽象方法
    /* 
        抽象方法使用abstract开头，没有方法体
        抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
    */
    abstract sayHello():void
}

class Dog extends Animal{
    sayHello(){
       console.log('汪汪汪')
    }
}

class Cat extends Animal{
    sayHello(){
        console.log('喵喵喵')
    }
}

接口 interface

接口定义

/* 
接口用来定义一个类结构
同时接口也可以当成类型声明去使用
*/

// 定义一个接口，并声明属性
interface myInterface{
    name: string
    age: number
}

const obj: myInterface = {
    name: 'sss',
    age: 111
}

console.log(obj)  //{ name: 'sss', age: 111 }

// 再次定义接口，并新增属性，此时接口中有三个属性
interface myInterface{
    gender: string
}

const obj: myInterface = {
    name: 'sss',
    age: 111,
    gender: '男'
}

console.log(obj) // { name: 'sss', age: 111, gender: '男' }

接口属性

/* 
    接口可以在定义类是去限制类的结构
    接口中的所有的属性都不能有实际的值
    接口只定义对象的结构，而不考虑实际的值
    在接口中所有的方法都是抽象方法
*/

interface myInter{
    name: string
    sayHello():void
}

接口就是定义一个规范,是对类的限制

/* 
定义类时，可以使用类去实现一个接口
实现接口就是让类满足接口的要求
*/
// 接口就是定义一个规范,是对类的限制
class MyClass implements myInter{
    name: string

    constructor(name:string){
        this.name = name
    }

    sayHello(){
        console.log('大家好~~~')
    }
}

属性的封装

/* 
ts可以在属性前添加属性的修饰符

public 修饰的属性可以在任意位置访问，修改， 默认值
private 私有属性，私有属性只能在类内部进行访问，修改
通过在类中添加方法使得私有属性可以被外部访问

*/

class Person{
    private _name:string;
    private _age: number

    constructor(name:string, age:number){
        this._name = name
        this._age = age
    }

    // 定义方法，用来获取私有name属性
    getName(){
        return this._name
    }

    // 定义方法，用来设置私有name属性
    setName(value:string){
        this._name = value
    }

}


const per = new Person('孙悟空', 18)

console.log(per.getName()) //孙悟空

per.setName('123')
console.log(per.getName()) //123

get与set方法

/* 
ts可以在属性前添加属性的修饰符

public 修饰的属性可以在任意位置访问，修改， 默认值
private 私有属性，私有属性只能在类内部进行访问，修改
通过在类中添加方法使得私有属性可以被外部访问

*/

class Person{
    private _name:string;
    private _age: number

    constructor(name:string, age:number){
        this._name = name
        this._age = age
    }

    // 在ts中设置getter方法的方式
    get name(){
        return this._name
    }

    // set方法
    set name(value){
        this._name = value
    }
}


const per = new Person('孙悟空', 18)

console.log(per.name) // 孙悟空

// 调用get方法
per.name = '猪八戒'
console.log(per.name) //猪八戒

proted

/* 
protected  受保护的属性，只能在当前类和当前类的子类中访问，修改
*/

class A{
    protected num: number

    constructor(num:number){
        this.num = num
    }
}


class B extends A{
    test(){
        console.log(this.num)
    }
}

直接将函数定义在构造函数中

class C{
    // 可以直接将属性定义在构造函数中
    constructor(public name:string, public age:number){

    }
}

const c = new C('xxx', 111)
console.log(c) // C { name: 'xxx', age: 111 }

等价于

class C{
    constructor(name:string, age:number){
        this.name = name
        this.age = age
    }
}

泛型

/* 
在定义函数或是类时，如果遇到类型不明确就可以使用泛型

泛型指不确定的类型
*/

function fn<T>(a: T):T{
    return a
}

// 可以直接調用具有范型的函数
let result = fn(10)  // 不指定泛型，TS可以自动对类型进行判断
let result2 = fn<string>('hello') // 指定泛型

// 泛型可以同时指定多个
function fn2<T, K>(a: T,b: K):T{
    console.log(b)
    return a
}

fn2<number, string>(123, 'hello')

interface Inter{
    legth: number
}

// 

function fn3<T extends Inter>(a: T): number{
    return a.length;
}


class MyClass<T>{
    name: T;
    constructor(name: T){
        this.name = name
    }
}

const mc = new MyClass<string>("will")

标签：Typescript,console,李立超,age,number,name,let,硅谷,string
From： https://www.cnblogs.com/leoych/p/17578612.html

相关文章

  • 尚硅谷 k8s 学习笔记
    K8S进阶部分       1.Deployment部署           1.1自愈能力           1.2多副本           1.3扩容、缩容           1.4滚动更新           1.5版本回退           1.6工作负载  ......
  • TypeScript的深拷贝与浅拷贝
    今天在开发过程中遇到深拷贝与浅拷贝的问题constuserData1:number[][]=this.dataMangager.getUserDataMap();该行代码中的userData1 是一个指向 this.dataMangager.getUserDataMap() 返回的二维数组的引用。当 this.dataMangager.getUserDataMap() 返回的二维数组......
  • 在尚硅谷学习docker 笔记
    尚硅谷docker学习笔记1.docker简介（基础篇）2.docker的安装3.docker的常用命令3.1帮助启动类命令3.2镜像命令3.3容器命令4.对docker镜像的深入理解4.1镜像的一些重要概念4.2docker镜像commit操作案例4.3本地镜像发布到阿里云/私有库5.docker容器数据卷（实现持久......
  • TypeScript中的keyof和in
    keyof使用keyof操作符接受一个对象类型作为参数，返回该对象属性名组成的字面量联合typeDog={name:string;age:number;};typeD=keyofDog;//typeD="name"|"age"可以看到keyofany返回的是一个联合类型：string|number|symbol，结合前文说到keyof是为了取得......
  • TypeScript 学习笔记
    什么是TypeScript?TypeScript是JavaScript的一个超集，支持ECMAScript6标准，它可以编译成纯javaScript，可以运行在任何浏览器上。安装TypeScriptnpminstall-gtypescript安装完成后我们可以使用tsc命令来执行TypeScript的相关代码tsc-vVersion5.1.6新建一个a......
  • 58.请使用vue3+vite+typescript+element-plus+setup语法糖，使用xlsx和file-saver实现保
    1<template>2<div>3<el-table4:data="mergedTableData"5border6stripe7>8<!--表头-->9<el-table-column10prop="date"11label="......
  • 喜讯！旭帆科技成功入驻“科大硅谷”！
    2023年7月，安徽旭帆信息科技有限公司（以下简称“旭帆科技”）成功入驻“科大硅谷”，成为合肥城市发展新引擎、科创生态集群企业队伍中的一员。“科大硅谷”项目建设总投资约75.82亿，共计17.37平方公里，是聚焦创新成果转化、创新企业孵化、创新生态优化，以中国科学技术大学等高校院所全球......
  • [Typescript] Queue
    UsingLinkedlisttoimplementaQueue.Injavascript,ifyouwanttopushaiteminfrontofanArray,itneedtoshifttherestofitems,notgoodforperformance.UsingLinkedListisO(1)oeprationforenqueanddeque, whichisbetter.Usecase:Let&#......
  • 54.使用VUE3+VITE+TYPESCRIPT+element-plus的setup语法糖，实现导出excel功能
    要实现导出Excel功能，你可以使用以下步骤：1.安装相关依赖：```bashnpminstallxlsxfile-saver```2.在你的组件中引入相关依赖：```javascriptimport{ref}from'vue';import{saveAs}from'file-saver';import{useTable}from'element-plus';importXLSX......
  • [Typescript] 150 Hard - OptionalUndefined
    Implementtheutiltype OptionalUndefined<T,Props> thatturnsallthepropertiesof T thatcanbe undefined,intooptionalproperties.Inaddition,asecond-optional-generic Props canbepassedtorestrictthepropertiesthatcanbealtered.Opti......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99