• TS —— TS的基础知识点


    文章目录

    • 前言
    • TypeScripte基础知识
      • 1.TypeScript概念
      • 2.TypeScript特点
    • 二、TypeScript类型声明
      • 1.类型声明
      • 2.变量声明

    第一章: TypeScirpt基础知识

    第一节:TypeScript概念

    以JavaScript为基础构建的语言。微软js基础上,添加了一些语法。TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

    第二节:TypeScript特点

    1. 静态类型(强类型),声明时确定类型,之后不允许修改。
    2. TypeScript可处理已有的JS,并只对TS代码编译,完善了JS的确定。
    3. 开源(社区成熟),跨平台,所有支持Js代码,都可以使用TS。
    4. 丰富的配置项,强大的开发工具支持等等。

    第三节:开发环境配置

    1.3.1 下载node.js

    下载地址:Node.js

    1.3.2 配置国内镜像

    npm config set registry https://registry.npmmirror.com

    1.3.3 全局安装

    安装命令:npm i -g typescript

    查看版本:tsc -v

    1.3.4 创建文件

    新建一个.ts为后缀的文件。内容如下:

    let msg:string = "hello,Ts";

    console.log(msg);

    1.3.5 编译文件

    进入目录文件,输入命令:tsc xxx.ts

    执行js文件,node xxx.js

    第二章:TypeScript类型声明

    第一节:基础类型

    1.3.1 any任意类型

    声明为 any 的变量可以赋予任意类型的值。

    let msg:any;

    msg = "我是字符串";

    console.log(msg);

    1.3.2 number数字类型

    双精度 64 位浮点值。它可以用来表示整数和分数。

    let age:number;

    let amount:number;

    age = 19;

    amount = 89.5;

    1.3.3 string字符串类型

    字符串类型,用单引号、双引号、模板字符串(反引号)定义的文本。

    let msg:string;

    msg = "我是:张三" + "年龄:19";

    let msg1:string;

    msg1 = `我是张三,年龄:19`;

    1.3.4 boolean布尔类型

    表示逻辑值:true 和 false。

    let flag:boolean;

    flag = true;

    1.3.5 数组类型

    ·在类型后面加[]

    let ages:number[];

    ages = [1,2,3];

    console.log(ages);

    ·使用范类型Array。

    let ages:Array;

    ages = [1,"2","3"]

    ;console.log(ages);

    1.3.6 元组类型

    元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。

    let zs:[string,number];

    zs  = ["张三",10];//true

    zs  = ["张三","10"];//false

    1.3.7 enum枚举类型

    枚举类型用于定义数值集合。

    enum days{Sun=10, Mon, Tue, Wed, Thu, Fri, Sat}

    console.log(days.Sun);//10

    console.log(days.Mon);//11

    console.log(days.Tue);//12

    总结:

    数字枚举如果没有初始化,默认初始化值为0,每项+1

    如果有初始化,则在初始化值的基础上,每项+1

    如果某项被赋值(可以是负数或负数),那么之后的项在此基础上+1

    如果未手动赋值的枚举项与手动赋值的重复了,如例4,TypeScript 是不会察觉到这一点的,但建议尽量避免

    1.3.8 void无任何类型

    用于标识方法返回值的类型,表示该方法没有返回值。

    声明一个void类型的变量没有什么大用,因为你只能为它赋予undefined和null;

    声明一个方法,没有返回值:

    function hello(): void {

        alert("Hello Runoob");

    }

    1.3.9 null类型

    对象值缺失。

    1.3.10 undefined类型

    初始化变量未定义的值。

    1.3.11 never类型

    never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

    比如函数抛出一个异常:

    function hello(str:string):never{

        throw new Error(str);

    }

    1.3.10 unknown类型(类型断言)

    var str:unknown;//未知类型

    str = "123";

    str = 123;

    var str1:string;

    str1 = str;//error

    总结:unknown未知类型 自己可以赋值任意类型,但是不可以赋值给别人.

    类型断言可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型。

    str1 = str as string;//第一种方式 正确 告诉编辑器str就是字符串

    Str1 = str;//第二种方式

    1.3.10 函数类型

    也就是指定参数的类型和返回值的类型

    function demo(a:number,b:number):number{

        return a+b;

    }

    demo(1,2);

    1.3.11 对象类型

    1)常规写法

    let a:object;

    a = {realname:"张三"}

    2)

    let P1:{realname:string,age:number}//定义类型

    P1 = {realname:"张三",age:19} //赋值需要上面定义保持一致

    3)

    let P1:{realname:string,age?:number}//加一个问号,age属性可加可不加

    P1 = {realname:"张三"}

    4)

    let P1:{realname:string,[propName:string]:any} //属性名不确定时,定义 propName

    随便定义,any是类型

    P1 = {realname:"张三",age:19}

    5)箭头函数设置函数结构

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

    a = function(a:number,b:number):number{

        return a+b;

    }

    6)let a:{name:string}&{age:number}; //与并且的意思

    a = {name:"ss",age:19};

    1.3.12 类型的别名

    用type设置类型别名

    type mytype = string;//类型别名

    let a:mytype;

    let b:mytype

    type mytype1 = 1 |2 |3;

    let aa:mytype1;

    let bb:mytype1;

    第二节:变量声明

    2.2.1 命名规则

    var [变量名] : [类型] = 值;

    例:let str:string = "hello";

    1)变量名称可以包含数字和字母。

    2)除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格。

    3)变量名不能以数字开头。

    4) 变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名

    2.2.2 声明未设置

    var [变量名] : [类型];

    声明变量的类型,但没有初始值,变量值会设置为 undefined;

    2.2.3 声明未设置类型

    var [变量名] = 值;

    声明变量并初始值,但不设置类型,该变量可以是任意类型:

    2.2.4 字面量声明

    1)let aa:100;//aa就只能是10

    2)let flag:"true" | "false";//是字符串类型true或者是false

    1. let flag1:boolean | string;//可以是布尔类型或者字符串类型

    总结

    以上就是今日所要分享的内容,最后依旧诚挚祝福屏幕前的你健康快乐、平安喜乐。

  • 相关阅读:
    北京突然宣布,元宇宙重大消息
    实战:Kind部署k8s集群-2022.12.6(成功测试)
    JS原理-笔记(1/3)
    项目上线就炸,这谁受得了
    定积分的计算
    拨号VPS和代理ip的区别
    小程序源码:王者荣耀改名神器-多玩法安装简单
    毫米波成像 论文阅读笔记 | HawkEye, CVPR 2020
    【Hive】Hive元数据信息表详解
    【UV打印机】波形开发-矢量波形工具(五)
  • 原文地址:https://blog.csdn.net/Bonsoir777/article/details/128133990