TypeScript学习_入门向
TypeScript学习_入门向
1-TypeScript简介
首先官网祭天 ---> https://www.tslang.cn/
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
我们使用一张图来说明TypeScript和JavaScript的关系
使用更加简单的说法:
TypeScript = JavaScript + 类型约束 + 高级特性
我们一般只会在项目中使用类型约束,高级特性我就先不涉及了。
2-环境准备
TypeScript最终会编译成js来运行,所以我们需要先准备好将TypeScript编译为js的环境。
a.安装TypeScript
首先全局安装ts
npm install -g typescript
然后可以使用命令来验证安装是否成功了。
tsc --version
b.使用tsc命令编译ts为js
tsc ./src/xxx.ts
这时候会自动生成对应的.js文件
然后我们就可以执行对应的js文件。
c.配置tsconfig文件
但是每次都使用tsc命令编译单个文件会比较麻烦,所以我们可以做一个统一配置
先使用 tsc --init
命令初始化一个 tsconfig.json
文件
里面配置如下:
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"outDir": "./dist",
"skipLibCheck": true,
...
}
}
然后我们只需要 tsc
一下,所有的ts文件就能被编译了。
d.自动编译
之后我们只需要启动vscode的监听任务功能,就能自动编译了。
1.选择终端 -> 运行任务
2.选择typescript类型的任务
3.选择监视任务
3-变量类型约束
let/const/var 变量:类型 = 值;
let str:string = "abc";
let str2 = "DeF";
类型大小写的区别:
// 小写的number指的是字面量类型的数字
let str3:number;
// 大写的Number指的是对象类型的数字
let n:Number;
我们在ts里面,基本都会给任何一个数据添加类型约束。基本语法如下:
const/let/var 变量名:数据类型 = 数据;
例如:
const num:number = 10;
let str:string = 'abc';
var bool:boolean = true;
在ts里面,类型一旦定义了,在代码执行过程中就不允许改变其类型。
let num:number = 10;
num = 'abc'; // 报错:不能将类型“string”分配给类型“number”。
4-any类型
唯一的一个例外,如果我们定义的类型是any,那么就可以被修改类型,因为这个any类型表示任意类型,会跳过ts的类型检查,其实是不安全的,如果不是迫不得已,我们不要使用any。
let value: any;
value = 10;
value = "abc";
value = null;
value = undefined;
5-复杂类型
以前在 js 里面,所有的 引用 都 Object 类型new Object() { }但是在ts里面如果直接使用 {} / new Object(),是会报错的let obja = {}
obja.name = '狗蛋'; // 引用类型,在ts里面约束尤其严格Date 对象有 Date 对象的属性和方法。Math 对象 有 Math对象的属性和方法。两者都是对象 ,但是不能混为一谈, 他们两种对象的属性和方法是完全不一样的,如果不区分,就没法推导 对象身上的成员。
如果我们想约束一个复杂数据的类型,就要使用
type
/interface
/对象字面量
的方式。在ts里面,每种对象都是一个类型,每种对象才能进行类型推导和类型约束。
有五个常用方式可以进行类型的约束。
a.对象字面量进行类型约束
let obj:{name:string,age:number} = {name:'狗蛋',age:12}
a-1 补充 另外的字面量进行类型约束
var p1 : {name:string,gender:"男" | "女"};
p1 = {
name:"狗蛋",
gender : "女"
}
b.interface(接口)--开发常用
//接口名称其实怎么写都行,最好有一个约定: interface 都以 I 开头
interface 接口名称 {
属性名:类型;
...
}
interface主要用来约定一个复杂数据的类型。
interface IUser{
id:number;
name:string;
gender:boolean;
}
let user:IUser = {
id:1,name:'狗蛋',gender:true
}
interface IPerseon{
id:number;
name:string;
age:number;
}
interface IStudent extends IPerseon{
number:number;
}
const s1:IStudent = {
id:2,
name:'翠花',
age:15,
number:1000
}
如果有一个属性是可能有可能没有的,可以使用可选的方式声明 :
interface IUser{
id:number;
name:string;
// ? 表示可选
gender ?: boolean;
}
c.type类型别名--开发常用
type 别名 = 类型
type关键字用于取一个类型别名。
// 类型别名
type mult = number | string;
let m:mult = 10; // 合法
m = 'abc'; // 合法
d.泛类型TS
{
code : number ;
message : string ;
data : ? data的类型无法确定,不同的接口,返回的data是不一样,可能是 null , 可能是 boolean ,也可以是对象,还可能是数组
}
类型<T,...> {属性:T,}
// 比如:
interface IExample1<T,N,M> {
// data的类型不能确定,传多个值必须声明对应个数的形参
data: T,
data2: N,
data3:M
}
let obj1:IExample1<string,string,boolean> = {
data:"abc",
data2:"def",
data3:true
}
let obj2:IExample1<number> = {
data:1
}
// 将来我们想确定请求回来的数据是什么类型
interface IResponse<T> {
code : number;
message : string;
data : T;
}
e.函数TS
function 函数名(参数){
函数体
}
function 函数名(参数:参数类型): 函数返回值的类型{
}
// 在参数后面加 :类型 意思是要求函数返回该类型
function addFn(a:number,b:number):number{
//必须return,return的类型必须是要求函数返回该类型
return 'abc'
}
TypeScript学习_入门向的更多相关文章
- labview学习_入门篇(一)
写在前面的话: 在上大学的时候,实验室的老师推荐用labview工具编写上位机软件,当时不想用labview,感觉不写代码心里不踏实,后来用vb和matalb开发了上位机软件.但现在由于部门的几款工具 ...
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- PHP学习笔记 - 入门篇(5)
PHP学习笔记 - 入门篇(5) 语言结构语句 顺序结构 eg: <?php $shoesPrice = 49; //鞋子单价 $shoesNum = 1; //鞋子数量 $shoesMoney ...
- LESS学习笔记 —— 入门
今天在网上完成了LESS的基础学习,下面是我的学习笔记.总共有三个文件:index.html.main.less.mian.css,其中 mian.css 是 main.less 经过Koala编译之 ...
- TypeScript 学习资料
TypeScript 学习资料: 学习资料 网址 TypeScript Handbook(中文版)(推荐) https://m.runoob.com/manual/gitbook/TypeScript ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区 1 入门案例分析 在第一章里,我们已经对ArcGIS系列软件的体系结构有了一 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- [IT学习]sql 入门及实例
sql 是一种数据库查询语言,可以让你很快的查询到数据.其实一般情况下,你也可以采用excel来查询数据库数据. 但是人们通常认为sql会更加灵活和方便一些. sql学习的入门网站: http://w ...
随机推荐
- 报错 ——Error evaluating expression 'id != null id > 0'.
Exception in thread "main" org.apache.ibatis.exceptions.PersistenceException: ### Error qu ...
- eclipse新建maven项目:'Building' has encountered a problem. Errors occurred during the build.
二.eclipse 新建maven 项目报错(因为没有配置maven环境) 1.问题: ① 出现的问题1: Could not calculate build plan:Plugin org.apac ...
- python psutila模块
#!/usr/bin/env python #coding:utf-8 # qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 import ...
- JavaScript 里的 'this' 的一般解释
本文旨在帮助自己和大家理解 JS 里的 this, 翻译.整理并改写自本人关注的一个博主 Dmitri Pavlutin,原文链接如下: https://dmitripavlutin.com/gent ...
- 你是怎么看Spring框架的?
Spring是一个轻量级的容器,非侵入性的框架.最重要的核心概念是IOC,并提供AOP概念的实现方式,提供对持久层,事务的支持,对当前流行的一些框架(Struts,Hibernate,MVC),Spi ...
- Oracle SQL Developer.exe双击启动错误信息dll未找到
下载地址:https://www.oracle.com/tools/downloads/sqldev-downloads.html 官网相应的解决方法已经说明了
- Java堆空间的划分:新生代、老年代
参考链接:Java堆空间的划分:新生代.老年代
- CAS和CAP代表的作用
CAS(自旋锁):https://www.jianshu.com/p/ab2c8fce878b CAP原则:https://baike.baidu.com/item/CAP原则/5712863?fr= ...
- SpringDataJpa使用审计(Auditing)功能
SpringBoot项目使用SpringDataJpa提供的审计功能的使用流程 SpringDataJpa提供审计注解:@CreatedBy,@LastModifiedBy,@CreatedDate, ...
- ROS环境变量的设置
一.前言(大神可以直接跳过) 本博客主要就是为了介绍ROS中环境变量的设置过程,还不是很了解ROS的可以去看一下我的博客,ROS简介-从零开始讲解ROS(适合超零基础阅读) ROS为什么需要设置环境变 ...