TypeScript入门视频2h(上)

简介: TypeScript入门视频2h

什么是 TypeScript

image.png    

注意: TypeScript无法在浏览器中运行

image.png

Typing强类型

规范我们的代码

代码编译阶段就能及时发现错误

在原生js的基础上加上了一层类型定义

开发环境的配置

image.png

提前下载node.js

typescript工作流

image.png

image.png

image.png

如何使用TS来运行网站

npm install --save-dev lite-server轻量级服务器

image.png

image.png

node_modules存放的就是所有的第三方依赖系统。

package.json文件中有2个地方可以配置依赖

  1. devDependencies中的依赖只参与项目的开发,开发完成后,不需要打包到生产环境中,不需要部署到服务器中。
  2. dependencies中的依赖都会被打包放到服务器上
  3. 区分二者的好处就是有效的降低网站的大小,加速网站被打开的时间,

TS的基础类型

变量声明

image.png

image.png

image.png

TypeScript的类型

image.png

image.png

数字、布尔、与字符串

Number 数字类型

对数字的定义只有一个很笼统的number来表示

既能表示整数、也能表示浮点数,甚至也可以表示正负数

例如:1,5.3 -10

String字符串类型

"hello", ' hello' , hello

反引号:`,可以创建一个字符串模版

与JavaScript一致

boolean布尔类型

真、假

处理判断逻辑

自动和手动指定类型

自动:类似JS

手动let n:number = 1

数组(Array)和元组(Tupple)

Array 数组类型

[ ]

数组中可以存放任意类型的数据

JS中数组的宽容度非常大,而TS也很好的继承了这一点

//3-4数组(Array)和元组(Tupple)
let list1: number[] = [1, 2, 3, 4];
let list2: Array<number> = [1, 2, 3, 4];
let list3 = [1, 2, 3, 4]
let list4: [1, 2, '4'];
let list5: any[] = [1, 2, 3, '4'];

tuple元组类型

固定长度、固定类型的array

tuple使用注意

元祖类型还有个bug

声明一个元祖的时候一定要指明类型

let person1:[number,string] = [1,'a']
person1[0] = 'a' // 不能将类型“string”分配给类型“number”。
person1[1] = 1 // 不能将类型“number”分配给类型“string”。
person1[2] = 1 // 不能将类型“1”分配给类型“undefined”。
person1.push(3) // bug!

以下这个是一个数组

let person2 = [1, "a"]; // let person2: (string | number)[]
person2[0] = "a"; // ok
person2[1] = 1; // ok
person2[2] = 1; // ok
person2.push(3); // ok

联合(Union)与字面量(Literal)类型

联合(Union)

let union: string | number;
union = 2;
union = "sssssss";
union = true; // 不能将类型“boolean”分配给类型“string | number”。
let union2: number | string | boolean | string[];
function merge(n1: number | string, n2: number | string) {
  if (typeof n1 === "string" || typeof n2 === "string") {
    return n1.toString() + n2.toString();
  } else {
    return n1 + n2;
  }
}
let mergeNumber = merge(1, 3); // 4
let mergeStirng = merge("1", "sss"); // 1sss

字面量类型(literal)

let union3 : 0 | 1 | 2;
union3 = 1;
union3 = 5; // 不能将类型“5”分配给类型“0 | 1 | 2”。
const union4 = 1111;
union4 = 3 // 无法分配到 "union4" ,因为它是常数。

TypeScript入门视频2h(下):https://developer.aliyun.com/article/1392246

目录
相关文章
|
6月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
65 3
|
1月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
2月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
5月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
30 0
|
6月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
73 4
|
6月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
97 0
|
6月前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
85 0
|
6月前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
131 0
|
6月前
|
存储 JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
112 0
|
6月前
|
JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
76 0