为了账号安全,请及时绑定邮箱和手机立即绑定

TypeScript极速入门

难度初级
时长 2小时39分
学习人数
综合评分10.00
4人评价 查看评价
10.0 内容实用
10.0 简洁易懂
10.0 逻辑清晰
  • 联合和交叉类型

    查看全部
  • 区别

    查看全部
  • 别名

    查看全部
  • 函数类型的联合类型和交叉类型试验结果如下:

    https://img1.sycdn.imooc.com/65c44fe60001c48c04710387.jpg

    对于交叉类型:函数参数列表取并集,函数返回值列表取交集。

    对于联合类型:直接取第一个联合前的函数类型,后面的函数类型均无效,所以没有意义。

    另外,对象/接口的联合/交叉类型也会增加复杂度,个人感觉通常情况下不适合使用,希望老师能给点例子说明适合使用的具体场景。

    查看全部
  • const products = {
    1: {
    name:'nick',
    price:200
    },
    2:{
    name: 'adidas',
    price:300
    }
    }
    
    interface Product {
    name:string
    price: number
    }
    
    //索引类型
    interface Products {
    [id:number]:Product
    }
    
    //映射类型
    type Keys = keyof Product;
    type Tp = typeof products;
    查看全部
  • //接口--类型的结构
    interface User {
    name:string
    age: number
    }
    
    //类型别名
    type UserType = {
    name:string
    age: number
    }
    
    function fun(params:User):User{
    return params
    }
    
    // 接口可扩展,类型不能
    interface Person extends User{
    email:string
    }
    //接口可以被类实现,type不能
    class ManC implements User{
    name:string;
    age: number;
    email: string;
    constructor(name:string, age:number,email:string){
    this.name = name;
    this.age = age;
    this.email = email
    }
    }
    
    interface Woman{
    age: number
    }
    
    interface Man{
    name:string
    }
    //type支持联合类型和交叉类型,interface不支持
    type People = Man | Woman;  //联合类型    Man & Woman 交叉类型(两个都得有)
    const p:People = {
    name: 'zyw',
    age: 34
    }
    //两种都可以用时,首选interface
    //首字母大写
    //有些公司,interface前加I,type前加T。不建议
    查看全部
  • 表驱动

    // 枚举
    enum OrderStatus1{
    Pending,
    Shipped,
    Completed,
    Cancelled,
    Unknown
    }
    //-------0 1 2 3 4
    
    // 数字枚举
    enum OrderStatus2{
    Pending=3,
    Shipped,
    Completed=8,
    Cancelled,
    Unknown
    }
    //---------3 4 8 9 10
    
    // 字符串枚举
    enum OrderStatus3{
    Pending='Pending',
    Shipped='Shipped',
    Completed='Completed',
    Cancelled='Cancelled',
    Unknown='Unknown'
    }
    
    // 异构枚举
    enum OrderStatus4{
    Pending,
    Shipped,
    Completed='Completed',
    Cancelled='Cancelled',
    Unknown='Unknown'
    }
    //------0 1  Completed Cancelled Unknown
    查看全部
  • js和ts类型

    // 数组
    const arr1:string[] = ['a','b','c'];
    const arr2:Array<number | string> = ['a',3,5];
    
    // 元祖--严格按照顺序,一一对应
    const tuple: [string,number] = ['a',3]
    
    // 函数
    // 1.箭头函数
    type Fun = (params:string)=>boolean;
    const fun1:Fun = ()=>false;
    // 2.函数语句
    function fun2(params:string):boolean{
    return false;
    }
    // 没有返回值--void
    const v=():void =>{}
    
    // 对象
    interface Obj {a:string,b:string}
    const obj:Obj = {
    a:'1',
    b:'2'
    }
    查看全部
  • mkdir foldName 命令行新建文件夹

    查看全部
  • 1

    查看全部
  • 如何搭建TypeScript环境:

    1. 在线网页版编辑器地址:https://www.typescriptlang.org/,选择Playground进入在线编辑区。

    2. npm构建包环境:

      1)先创建一个空文件

      2)打开vscode,打开刚创建的空文件

      3)终端中输入:npm init,之后一直回车,则会创建出一个package.json文件

      4)新建src文件夹,在该文件中新建index.ts文件

      5)全局安装typescript:终端输入命令---npm i typescript -g

      6)  查看是否安装和查看版本:tsc -v

      7)输入tsc --init 自动创建出tsconfig.json配置文件

      8)在配置文件中输入调试运行语句:"build":"tsc"

      9)  终端中输入npm run build

    3. 构建前端项目

      1)打开cmd,进入想要创建前端项目地址,输入命令:npm create vite@latest

      2)选择是否创建,输入:y

      3)  输入创建的文件名

      4)选择语言:vue

      5)  选个脚本语言: typescript

      6) 创建成功,根据提示,进入项目目录下,输入:npm install安装依赖,输入:npm run dev运行成功打开网址即可

    查看全部
  • 定义数组、函数

    查看全部
  • 四个范式

    查看全部
  • n

    查看全部
  • t

    查看全部
    0 采集 收起 来源:泛型

    2023-12-17

举报

0/150
提交
取消
课程须知
掌握前 npm 包的使用,了解 JavaScript 基础,如果有面向对象开发经验,学习效果更佳
老师告诉你能学到什么?
你能学到 Typescript 的基础概念、写法,类型的原理,以及在业务中真正实用的高级类型使用方法,更能通过泛型的学习,开启类型编程的大门。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!