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

最新推荐文章于 2023-11-30 17:56:48 发布
最新推荐文章于 2023-11-30 17:56:48 发布
阅读量77 收藏
点赞数
文章标签： typescript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44745066/article/details/131906708
版权

官方文档：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")

胸怀丶若谷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Learn-TypeScript:在 Microsoft 学习 TypeScript
06-03
学习打字稿在 Microsoft 学习 TypeScript：在 edx.org 上的 DEV201x TypeScript 简介这是我提交给 edx 的代码的代码库。 在我完成课程之前，这将是一个私人回购。最终项目演示可以在访问最终项目演示。
Web-Typescript:typescript相关学习笔记
05-07
TypeScript 支持 CommonJS、AMD 和 ES6 模块语法，使得代码组织和导入导出更有序。例如，使用 ES6 模块： ```typescript // module1.ts export const message = 'Hello from module1'; // module2.ts import ...
typescript 中 [propName: string]的使用
淡淡的芦苇的博客
01-17 2659
其他没有使用的属性名 可以统一使用[propName: string]: number | string | boolean | Array<string>;定义类型 属性值的类型是把所有的类型都展示 interface DataState { id: number | string; createTime: number; commentUserAvatar: string; commentDeleted: boolean; commentUserNam
TypeScript入门
11-02 593
这个方法用于只读属性的，不可修改属性。
TypeScript学习笔记
weixin_46960537的博客
10-29 662
TypeScript学习笔记
TypeScript类型，声明(全)
qq_53701739的博客
10-13 1089
强类型定义语言在速度上可能略逊色于弱类型定义语言，但是强类型定义语言带来的严谨性能够有效的避免许多错误。
typescript快速入门--基础语法
xzpdxz的博客
01-04 583
typescript 基础语法 数据类型 关键字 let const var 数据类型 类型 关键字 示例 任意类型 any let a: any = "1";let b: any = 2 数字类型 number let c: number = 3 字符串类型 string const s:string = "ok" 布尔类型 boolean const d: boolean = true; 数组类型 []/Array const e1: Array<number&
journey-of-typescript:让我们学习TypeScript
03-13
打字之旅让我们学习TypeScript指数班级安装npm install -g typescript JavaScript输出：转到build文件夹并运行node script.js 注：我跑tsc --init从这个文件夹tsconfig.json然后改变outDir到./build 。 现在，如果我...
ember-typescript:使用 Typescript 的类语法定义 Ember.Objects
06-20
余烬打字稿使用 Typescript 的类语法定义 Ember.Objects。 现在你有了类型安全的 Ember.Objects。要求： 余烬 1.10+ 打字稿 1.4+例子： class Person extends ynab . common . EmberBaseObject { public static ...
typescript:打字稿学习
05-19
打字稿打字稿学习要求Javascript虚拟机，包括程序包管理器： 修订分布式系统： 安装 git clone https://github.com/thelordofthetimes/typescript.gitcd typescriptnpm install
TypeScript基本语法
最新发布
2302_77378293的博客
11-30 1574
any和union在定义函数（或一些特殊结构）的时候用的多一点，定义函数时如果把参数写死了，则导致函数扩展性变弱，如果参数用的是any或union，就可以接受多种类型的参数，方法内部做不同的处理，这样方法的拓展性变得更强。也支持二进制、八进制、十六进制，表示的方式与其他语言类似，需要在数字前面加上相应前缀，二进制: 0b、八进制: 0、十六进制: 0x。注意：在TypeScript中，空字符串、数字、null、undefined都被认为 是false，其他值则为true。// num为空，可以执行逻辑。
TypeScript语法
m0_50298323的博客
12-19 1117
TypeScript学习之路
TypeScript——基础语法
hhtfhtf的博客
06-25 917
在TypeScript中，类的属性和方法支持三种修饰符： public、private、protected。
TypeScript基础教程
IT飞牛
09-25 4559
JS已有类型和TS新增类型。原始类型：string、number、boolean、null、undefined、symbol对象类型：object（数组、对象、函数等对象）TS新增类型联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、any等。
TypeScript核心语法合集
i-cat的博客
02-13 396
ts的核心语法+细节注意点合集
TypeScript 第一章：入门教程（配置、类型推断、基本类型）
知之为知之，不知为不知
06-26 3027
TypeScript 第一章：入门教程，编译TS、TS配置文件、TS的类型推断、TS基本类型、函数
typescript快速入门 语法手册 入门教程 常用语法
ruangongtaotao的专栏
08-14 148
【代码】typescript快速入门 语法手册 入门教程 常用语法。
TypeScrip2（对象类型和数组类型）
wgjiayin的博客
07-19 772
typescript 的接口interface使用方法，可选属性 使用“?”操作符方法，任意属性 [propName: string]方法，只读属性 readonly方法，添加函数方法；数组类型：泛型、接口表示数组、多维数组、arguments类数组、any 在数组中的应用.........
02Typescript接口和类型别名
weixin_56105228的博客
01-25 178
typescript接口和类型别名
typescript学习笔记
03-04
"typescript学习笔记" TypeScript是一种由微软开发的强类型、静态类型的编程语言，它是JavaScript的一个超集，这意味着任何有效的JavaScript代码都是合法的TypeScript代码。TypeScript的主要目标是提供工具来帮助...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值