前端开发TypeScript入门基础教程

TYPESCRIPT

官网

github

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。

可以看看官网的5分钟 TypeScript Tooling in 5 minutes

安装 TypeScript

命令行运行如下命令,全局安装 TypeScript:

npm install -g typescript

安装完成后,在控制台运行如下命令,检查安装是否成功:

tsc -V

第一个ts程序

新建文件 test1.js

const str:string ="hello world TS";
console.log(str)

代码是写好了,想要运行还得将ts编译为js,使用 tsc 命令,会在同层生成 js文件

tsc test1.ts

执行 node test1.js

PS E:\mysjc\ts> node test1.js
hello world TS
PS E:\mysjc\ts>

恭喜你已经入门ts,回过头再来看看 ts和js有什么区别,细心的你已经发现 ts 多了个类型,那有人就会问了什么是类型? 有哪些类型?

  • 类型是一组关键字,声明一个标识符的基本数据类型或者抽象数据结构类型
  • 类型决定了内存到底要存什么样的数据

基础类型

type

string

使用单引号 或双引号 " 来表示字符串类型。反引号 ` 来定义多行文本和内嵌表达式

const str1: string = "hello world";
const str2: string = 'ts';
const str3: string = `年少不知富婆好,${ str1 } ${ str2 } `;

number

const num1: number = 3;// 十进制
const num2: number = 3.3;
const num3: number = 3.333;
const num4: number = 0b11;// 二进制
const num5: number = 0o12;// 八进制
const num6: number = 0xa; // 十六进制

boolean

逻辑值:true 和 false

const bol1: boolean=false;
const bol2: boolean=true;

数组

  • 元素类型后面接上[]
  • Array<元素类型>
const list1: number[]=[1,2,3]; // 可以试试 list1[0]='2',会发生什么。
const list2: Array<number>=[1,2,3];

枚举

enums

enum Animal {
    Dog,
    Cat,
    Pig
  }
  let zhangsan: Animal = Animal.Dog
  console.log(zhangsan, Animal.Cat, Animal.Pig) ;// 0 1 2

输出0,1,2,我想让张三变成狗,可以直接赋值,这下张三就成真的狗了。

  enum Animal {
    Dog="狗",
    Cat="猫",
    Pig="猪"
  }
  let zhangsan: Animal = Animal.Dog
  console.log(zhangsan, Animal.Cat, Animal.Pig) ;// 狗 猫 猪

any

可以是任意类型

let a: any = [1,undefined,null,'string',true,false];
a[0]='s';
console.log(a); //[ 's', undefined, null, 'string', true, false ]
let b: any=1;
b='wc';
b=null;
console.log(b); //null

object

参数就是 object 类型

// The parameter's type annotation is an object type
function printCoord(pt: { x: number; y: number }) {
    console.log("The coordinate's x value is " + pt.x);
    console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

object 类型还可以指定属性是否可选

function printName(obj: { first: string; last?: string }) {
    console.log(`${obj.first}-${obj.last}`);
}
printName({ first: "Bob" }); //Bob-undefined
printName({ first: "Alice", last: "Alisson" }); //Alice-Alisson

如果可选参数不传递,获得的值 undefined,在使用之前进行检查即可。

function printName(obj: { first: string; last?: string }) {
    // obj.last.toUpperCase(); // TypeError: Cannot read property 'toUpperCase' of undefined
    if (obj.last !== undefined) {
        console.log("if", obj.last.toUpperCase());
    }
    console.log(obj.last?.toUpperCase());
}
printName({ first: "Bob" }); // undefined
/**
 * if AA
 * AA
 */
printName({ first: "Bob", last: "aa" });

Union 联合类型

联合类型是由两个或多个其他类型组成的类型

/**
 *
 * @param id 类型只能传递 number 或者 string
 */
function work(id: number | string) {
    console.log("上班:" + id);
}
work(101);//上班:101
work("202");//  上班:202
//  work(false);

如果联合的每个成员都有效,便可以做一些有意思的事情

/**
 * @param id 类型只能传递 number 或者 string
 */
function work(id: number | string) {
    const salary: number = 300;
    if (typeof id === "string") {
        console.log(`${id}上班,可获得薪水$${salary}`);
    } else {
        console.log(`${id}上班,可获得薪水$${salary * 2}`);
    }
}
work(101); //101上班,可获得薪水$600
work("202"); //202上班,可获得薪水$300

Type Assertions 类型断言

类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用

  • <类型>值
  • 值 as 类型
console.log(1 as string)
console.log(<string>1 )

类型推断

TS会在没有明确的指定类型的时候推测出一个类型

  • 定义变量时赋值了, 推断为对应的类型
  • 定义变量时没有赋值, 推断为any类型
let a = 1;
a = '11';//不能将类型“string”分配给类型“number”
let b;
b = 1;
b = '1';
b = null;

以上就是前端开发TypeScript入门基础教程的详细内容,更多关于TypeScript入门基础的资料请关注我们其它相关文章!

(0)

相关推荐

  • TypeScript基础class类教程示例

    目录 class类 示例 构造函数 继承 class 类 类是面向对象语言的程序设计中的概念,是面向对象编程的基础. 类是创建对象的模板,是对现实生活中一类具有共同特征的事物的抽象 类的内部封装了属性和方法,用于操作自身的成员 示例 将每条狗看做一个对象,那他的属性就有 品种.颜色,方法(行为)舔.叫.吃. class Dog { breed: string; color: string; lick(): void { console.log(` 我仍认为我们作为一个舔狗的真正目的是为了拥有一份

  • TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    目录 简介 安装 创建pinia并传递给vue实例 创建store state getters actions 在vue组件使用 获取state 获取getters 修改state 数据持久化 总结 简介 今天我们再来实战下官方推荐的新的vue状态管理工具Pinia. pinia 由 vue 团队中成员所开发的,因此也被认为是下一代的 vuex,即 vuex5.x,在 vue3 的项目中使用也是备受推崇.所以 pinia 的学习迫在眉睫. 下面我们正式开始pinia的学习吧. 安装 yarn a

  • TypeScript 数组Array操作的常用方法

    目录 一.数组的声明 二.数组初始化 三.数组元素赋值.添加.更改 四.删除 五.合并.断开数组 六.查找数组元素位置 七.连接数组元素 八.排序.反序数组 九.遍历请看这里 数组是一个很简单的数据结构,但是每次使用TypeScript的数组的时候又总是忘记怎么用了,干脆直接弄成干货,忘了过来看看. 一.数组的声明 let array1:Array<number>; let array2:number[]; 二.数组初始化 let array1:Array<number> = ne

  • TypeScript保姆级基础教程

    目录 什么是 TypeScript? 那么 ts 和 js 有什么区别呢? 什么是类型注解? ts 的类型 联合类型: 类型别名 数组类型 函数 定义单个函数 统一定义函数格式 函数返回值类型void 函数-可选参数 可选和默认值的区别 对象类型-单独使用 对象类型-类型别名 接口 接口继承 元组 字面量类型 枚举 any 类型 使用any的场景 什么是 TypeScript? TypeScript,简称 ts,是微软开发的一种静态的编程语言,它是 JavaScript 的超集. 那么它有什么特

  • TypeScript基础入门教程之三重斜线指令详解

    前言 TypeScript是Javascript的超集,实现以面向对象编程的方式使用Javascript.当然最后代码还是编译为Javascript. 三斜杠指令是包含单个XML标记的单行注释. 注释的内容用作编译器指令. 三斜杠指令仅在其包含文件的顶部有效. 三重斜杠指令只能在单行或多行注释之前,包括其他三重斜杠指令. 如果在声明或声明之后遇到它们,则将它们视为常规单行注释,并且没有特殊含义. /// <reference path ="..."/> /// <re

  • 前端开发TypeScript入门基础教程

    TYPESCRIPT 官网 github TypeScript是一种由微软开发的开源.跨平台的编程语言.它是JavaScript的超集,最终会被编译为JavaScript代码. 可以看看官网的5分钟 TypeScript Tooling in 5 minutes 安装 TypeScript 命令行运行如下命令,全局安装 TypeScript: npm install -g typescript 安装完成后,在控制台运行如下命令,检查安装是否成功: tsc -V 第一个ts程序 新建文件 test

  • 微信小程序开发入门基础教程

    微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

  • Vue全家桶入门基础教程

    1. Vue概述 Vue(读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. 渐进式: 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 可以使用其中的一个或者多个 优点: 易用:熟悉HTML,CSS.JavaScript知识后,可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩 高效:20kB运行大小,超快虚拟DOM 2. Vue的基本使用 2.1 传统开发模式对比 /

  •  typeScript入门基础介绍

    目录 一.安装 TS 二.Vscode 自动编译 ts 三.入门 TS 基础数据类型 接口 类 TS 的特点: 始于 javaScript 归于 javaScript . 强大的类型系统. 先进的 javaScript . 适合开发大型项目,编译成纯 js 代码,js 可以运行在任何浏览器上. typeScript 是区分大小写的一门语言,本篇文章主要带你了解 ts 的安装,环境配置,以及简单的入门. 一.安装 TS 使用之前需要安装: npm install -g typescript 安装完

  • AngularJs 60分钟入门基础教程

    AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,所有的操作都在这张页面上完成,由JavaScript来控制不同view在这个页面上的呈现.本文源于Youtube上一个不错的AngularJs的入门教程视频:AngularJS Fundamentals In 60-ish Minutes,主要讲解了

  • Java Mybatis框架入门基础教程

    一.Mybatis介绍 MyBatis是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架.MyBatis几乎消除了所有的JDBC代码,也基本不需要手工去 设置参数和获取检索结果.MyBatis能够使用简单的XML格式或者注解进行来配置,能够映射基本数据元素.Map接口和POJOs(普通java对象)到数据库中的记录. 二.MyBatis工作流程 (1)加载配置并初始化 触发条件:加载配置文件 配置来源于两个地方,一处是配置文件,一处是Java代码的注解,将SQL的配置信息加载成为一个个

  • python深度学习tensorflow入门基础教程示例

    目录 正文 1.编辑器 2.常量 3.变量 4.占位符 5.图(graph) 例子1:hello world 例子2:加法和乘法 例子3: 矩阵乘法 正文 TensorFlow用张量这种数据结构来表示所有的数据. 用一阶张量来表示向量,如:v = [1.2, 2.3, 3.5] ,如二阶张量表示矩阵,如:m = [[1, 2, 3], [4, 5, 6], [7, 8, 9]],可以看成是方括号嵌套的层数. 1.编辑器 编写tensorflow代码,实际上就是编写py文件,最好找一个好用的编辑器

  • Python pygame新手入门基础教程

    目录 pygame简介 pygame实现窗口 设置屏幕背景色 添加文字 绘制多边形 绘制直线 绘制圆形 绘制椭圆 绘制矩形 总结 pygame简介 pygame可以实现python游戏的一个基础包. pygame实现窗口 初始化pygame,init()类似于java类的初始化方法,用于pygame初始化. pygame.init() 设置屏幕,(500,400)设置屏幕初始大小为500 * 400的大小, 0和32 是比较高级的用法.这样我们便设置了一个500*400的屏幕. surface

  • 使用Element进行前端开发的详细图文教程

    目录 前言 1.添加路由 2.添加页面 3.添加元素 4.添加事件 5.提交表单数据 总结 前言 本文介绍如何使用vue-element-admin+element进行前端开发. 我们可以使用element组件很方便的进行前端开发,并且每个组件都已经提供了对应的代码,只需要复制我们需要的功能即可. 前提:下载编译运行vue-elemnt-admin,详细可见vue-element-admin官网 > git clone -b api https://github.com/five3/vue-el

  • 微信小程序开发之入门实例教程篇

    前言 近日,在工作闲暇之余,阅读了一些关于微信小程序的文章,忍不住,想动手试他一试.本文就以"我的第一个微信小程序"为例,简单的介绍下,微信小程序的入门级用法. 一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击"开发者设置". 3.会获得一个AppID,记录AppID,后面创建项

随机推荐