// 要使用typescript需要全局安装 通过tsc -v 来验证是否安装成功
npm i -g typescript

// ts 文件中完全可以写js语法, 完全兼容js
// ts 本身在运行时,会转化为js文件,从而执行
// ts 可以在定义变量的时候,确认他的类型,防止赋予不同类型的值 // 类型都要小写
/**
类型有 number, string, boolean, object, any(任意类型), unknown(类型安全的any), void(空置 undefined), never(没有值), array, tuple(TS新增类型,固定长度的数组), enum(TS新增类型, 枚举类型)
**/
// 声明一个变量,同时指定类型为number
let a : number; // 因为a类型已设置,所以只能赋值数字
a = 10;
a = 20;
// a = 'hellow' //因为类型不是number,所以会报错 // 声明完变量直接赋值
let b : boolean = false; // js中函数是不考虑参数的类型和个数
function sum(a, b){
return a + b;
} console.log(sum(123, 456)); // 579
console.log(sum(123, '456')); // '123456' // ts 参数可以增加类型,同时函数本身的返回值也可以定义类型
function sum_(a: number, b: number): number{
// return a + b + 'hello; // 报错
return a + b;
} console.log(sum_(123, 456)); // 579
// console.log(sum_(123, '456')); // 报错 Argument of type 'string' is not assignable to parameter of type 'number' // object 标记JS对象, 在ts中不实用,因为 对象是对象, 方法还是对象, 对象太多了,没做太多限制
/**
{} 用来指定对象中可以包含的属性
语法: {key: value, key: value}
在属性名后增加?, 表示属性是可选的, 可以不用赋值
**/
// 所以一般如下实用
let c : {name: string}; // 有且只有一个属性
// c = {}; // 报错,未定义name
c = {name: 'Alan'}
// c = {name: 'Alan', age: 18} // 报错,因为没有定义age属性,所以c定义的时候,可以固定对象的结构,key值
// 同时,在属性名后增加?, 表示属性是可选的, 可以不用赋值
let d : {name: string, age?: number}; // name 强制,age可选
d = {name: 'Alan'};
d = {name: 'Alan', age: 12}; // 如果想要不限制任意属性,则需要 增加任意类型的属性
let e : {name: string, [propName: string]: any}; // propName不固定,可随意写
e = {name: 'Alan', age: 18, dob: 19901120} // 通过箭头函数,来设置函数结构的类型声明
// 语法: (形参: 类型, 形参: 类型 ...) => 返回值
let f:(a: number, b:number) => number;
f = function (n1, n2):number { // 如果在此处定义n1为不是number的类型,则同样会报错
return n1 + n2;
} // 数组类型
// string [] 字符串数组
// number [] 数字数组 or Array<number>
// any [], Array<any> 任意数组,但是不建议用any /**
* tuple 元组 固定长度的数组
* 长度固定后,储存效率高,变化几率小一点
* 语法: [类型, 类型, 类型] 不会太多,太多直接用数组
*/
let h: [string, string, number];
h = ['hello', 'word', 123]; /**
* enum 枚举
*
*/ enum Gender {
Male, // Male = 0,
Female, // Female = 1,
} let i: {name: string, gender:Gender}
i = {name: 'Alan', gender: Gender.Male}; console.log(i.gender === Gender.Male); /**
* & 表示同时
*/
let j: {name: string} & {age: number};
j = {name: 'Alan', age: 18} // 必须存在两个属性 /**
* 类型的别名.
* 简化类型
*/
type myType = 1 | 2 | 3 | 4 | 5;
let k: 1 | 2 | 3 | 4 | 5;
let l: myType;
let m: myType;
k = 5;
k = 3;

TypeScript - 安装,类型的更多相关文章

  1. Sharepoint学习笔记—其它—如何知道某个Sharepoint环境的安装类型

    我们在安装sharepoint 2010时会出现三种安装类型: Standalone, Server Farm Standalone与Server Farm Complete. Standalone ...

  2. C# vs TypeScript - 高级类型

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  3. 从C#到TypeScript - 高级类型

    C# vs TypeScript - 高级类型 上一篇讲了基础类型,基本上用基础类型足够开发了,不过如果要更高效的开发,还是要看下高级类型,这篇和C#共同点并不多,只是延用这个主题. 联合类型 可以从 ...

  4. TypeScript 之类型判断

    在使用 Angular 做项目的时候,对 TypeScript 的类型判断不太熟练,为了方便查找,特意对 TypeScript 的类型判断做了简单梳理.文章只是 TS 官网的内容摘要,没有高深的知识, ...

  5. TypeScript的类型

    ⒈TypeScript的类型 JavaScript语言的数据类型包括以下7种: 1.boolean(布尔),true || false 2.null,表明null值得特殊关键字,JavaScript是 ...

  6. TypeScript入门三:TypeScript函数类型

    TypeScript函数类型 TypeScript函数的参数 TypeScript函数的this与箭头函数 TypeScript函数重载 一.TypeScript函数类型 在上一篇博客中已经对声明Ty ...

  7. 编写TypeScript工具类型,你需要知道的知识

    什么是工具类型 用 JavaScript 编写中大型程序是离不开 lodash 工具的,而用 TypeScript 编程同样离不开工具类型的帮助,工具类型就是类型版的 lodash .简单的来说,就是 ...

  8. TypeScript 安装及基础运行环境搭建

    安装 TypeScript npm install -g typescript 安装成功后,命令行输入 tsc -v 命令提示当前安装的 TypeScript 版本: 出现版本号即安装成功. 使用 V ...

  9. TypeScript 条件类型精读与实践

    在大多数程序中,我们必须根据输入做出决策.TypeScript 也不例外,使用条件类型可以描述输入类型与输出类型之间的关系. 本文同步首发在个人博客中,欢迎订阅.交流. 用于条件判断时的 extend ...

  10. React 与 Hooks 如何使用 TypeScript 书写类型?

    React 与 Hooks 如何使用 TypeScript 书写类型? 本文写于 2020 年 9 月 20 日 函数组件与 TS 对于 Hooks 来说是不支持使用 class 组件的. 如何在函数 ...

随机推荐

  1. CI2454 低成本高性能SOC产品 遥控产品的绝佳选择

    Ci2454 是一款集成无线收发器和 8 位 RISC(精简指令集)MCU 的 SOC 芯 片. 无线收发器特性:  工作在 2.4GHz ISM 频段.  调制方式:GFSK/FSK.  数据 ...

  2. [OC] UIWebView APIs 的替换 以及转用WKWebView后的部分问题

    一.检查工程中的 UIWebView 1.打开终端,cd + 把项目的工程文件所在文件夹拖入终端(即 得到项目的工程文件所在的路径) 2.输入以下命令: grep -r UIWebView . 注意最 ...

  3. js数组去重,删除重复的属性值

    let a=[] let hash={} a=a.reduce((pre,next)=>{ hash[next.name]?"":(hash[next.name]=true& ...

  4. beanshell 响应数据的解析与变量的保存

    获取响应的数据 response = prev.getResponseDataAsString() //prev.getResponseDataAsString是Jmeter提供的方法,可以调取上次请 ...

  5. kuangbin学习

    是有针对性的对于算法的训练 我试试QAQ

  6. 08.JSP技术

    一.什么是JSP JSP(Java Server Pages)是JavaWeb服务器端的动态资源.它与html页面的作用是相同的,显示数据和获取数据.JSP文件的扩展名是.jsp. JSP = htm ...

  7. vxlan结合iptables-snat实现内网服务器公网访问

    如上图,有这样一种场景,我们经常遇到,局域网内有两台服务器,Server 1和Server 2,Server 1可以通通网,Server 2只能通内网,无法直接访问公网 现在想Server 2能访问到 ...

  8. shell之flock

    1.flock 最大的用途就是实现对 crontab 任务的串行化:为了防止crontab 任务出现多实例的情况,导致系统内存被耗尽. 在 crontab 任务中,有可能出现某个任务的执行时间超过了 ...

  9. 记录一次在deepin安装node版本管理工具nvm的过程

    安装nvm sudo apt-get install git -y # 安装git cd /home # 随便找个目录放代码 git clone https://github.com/nvm-sh/n ...

  10. Chart控件-常用设置

    visual studio中原生控件chart控件使用时的一些常用设置 鼠标缩放功能 缩放后恢复曲线