若有缺失的只是可以对照一下知识流图来查看（博主没钱，买不起vip）
介绍
typescript是JavaScript的超集
检查ts安装是否成功
用win+r输入cmd后或者SHIFT右键打开Powershell（win11直接右键使用终端打开即可）
npm i -g typescript
然后输入
npm i -g typescript
安裝完ts后输入tsc检测
编译ts文件：
tsc命令编译（翻译）成js文件
node执行js文件
tsc test01.ts node test01.js
vscode操作：
检测编译
控制台中输入 tsc main.ts -w ，监测main.ts文件的编译，控制台中输入ctrl + c停止
文件夹编译
新建一个tsconfig.json文件，控制台中输入 tsc -w ，监测当前文件夹下所有的ts文件的编译，控制台中
输入ctrl + c停止
变量
作用域
全局作用域 ：整个ts文件 整个全局
类的作用域：类的作用域 通过类的对象访问普通类变量，类的静态变量通过类名直接访问
局部作用域：声明在代码块
声明
let ：当前块作用域下
var ：全局环境
const ：声明常量 拥有和let一样的作用域
例子：
console.log("第一个ts文件");
let a = 10;
var b = 12;
let c :string = "jhajkd";
const data = "fffff";注意
typescript 区分大小写
代码分号是可选的
注释写法：
单行//
多行/**/
数据类型
-
任意类型 any 变量可以赋予任何类型的值
-
数字 number 双精度64位浮点值
-
字符串 string
-
boolean 布尔值类型
-
数组类型
-
元组 表示已知元素数量和类型的数组
-
枚举
-
void 用来标识方法返回值
-
null
-
undefined 未定义
-
never
number
ts与C++的区别
typescript（double）
c++ （int float double）
取值范围
最大值 1.7976931348623157e+308
最小值 5e-324
可通过以下代码查看
console.log("最大值" ,Number.MAX_VALUE);
console.log("最小值" ,Number.MIN_VALUE);获取数值所对应的字符串
let num = 55;
console.log(typeof(num));
let str = num.toString();
console.log(typeof(str));
console.log(str); string
要点：c++ ''代表字符 "" 代表字符串 typescript 没有字符只有字符串，双引号与单引号都代表字符串
split方法
let str = "111111"
let str1 = '111111'
let str2 = "ni hao xiong a";
//参数一 以什么切割 参数二 分成多少段
let str3 = str2.split(" ", 4)
console.log(str3); length属性
获取字符串的字符数
let str = "111111"
let str1 = '123456'
console.log(str1.length);连接字符串+
let str = "111111"
let str1 = '123456'
let str2 = str + str1 +"全班同学都很帅";
console.log(str2);
console.log(typeof(str2));截取字符串substring
let str = "0123456789"
console.log(str.substring(1,5));
console.log(str.substring(1));数组
let numArr = [1,2,5] //不定义any类型 否则数组元素只能是单一类型多维数组
let numDuoArr:number[][] = [ [1,5,4], [58,88] ]
console.log(numDuoArr[0][0]);
console.log(numDuoArr[0][1]);
console.log(numDuoArr[1][1]); 元组
概念
let numArr = [1,2,5] //默认双精度数组
let numArr2:any[] = [1, 2, 5, "你这瓜多少钱！"] //数组
let numArr1 = [1 , "十五斤三十块!"] //元组
两者返回的都是object运算符
7种 加减乘除 取余 自增 自减
注意：自增自减运算符的前置与后置
关系运算符
用于数值运算的大小判断
-
==
-
！=
-
>>
-
<<
-
>>=
-
<<=
逻辑运算符
-
&&
-
||
-
!
位运算符
-
& and
-
| or
-
~ 取反
-
^ 异或
-
<< 左移
-
>> 右移
-
>>> 无符号右移
赋值运算符
-
-=
-
=
-
+=
-
*=
-
/=
-
%=
三元运算符
let a = -10;
console.log( a > 0 ? true: false); 类型运算符
let b = "1111s"
console.log(typeof(b));字符串连接运算符
let str1 = "大家晚上"
let str2 = "8点"
let str3 = "来打牌"
console.log(str1 + str2 + str3);结构
条件
-
if
-
if else
-
if else if else
-
switch case defalut
循环
-
for
-
for in
-
for of
-
while
-
do while
跳出循环
-
break
-
continue
例子
switch 判断值里面 必须为number 或者枚举
switch (a) {
case 1:
console.log("a = 1");
break;
case 2:
console.log("a = 2");
break;
case 3:
console.log("a = 3");
break;
default:
break;
}
let arr = [5,8,9,5]
for (let i = 0; i< arr.length; i++) {
const element = arr[i];
console.log("输出数组的值", i ," ",element);
}
//for in方法
for (const key in arr) {
console.log("输出数组的值------", key ," ",arr[key]);
}
//for of方法
for (const iterator of arr) {
console.log("输出数组的值++++++",iterator);
}
for (let index = 0; index < arr.length; index++)
{
const element = arr[index];
console.log("break输出大大大大大大大大大大大大大",index,"-------",element);
if(index == 1)
{
break;
}
}
for (let index = 0; index < arr.length; index++)
{
if(index == 1)
{
continue;
}
const element = arr[index];
console.log("break输出小小小小小小小",index,"-------",element);
}函数
定义
function + 函数名 + 形参 +函数体
function test1():number //:后面是继承
{
}
function test1(str:string):number //()括号里面是限定类型
{
}调用
函数名()
参数
可选参数
function test1(str:string , str1 ? :string):number
{
}str1 ? :string指可传可不传的参数
默认参数
function test1(str:string , str1 :string = "NB"):number
{
}str1 :string = "NB"指不传参数时默认为=“”后面的值
剩余参数
可变参数 又叫做多参数 参数数组
function test1(...nums:any[]):number
{
}...nums:any[]指可传多个值
匿名函数
let msg = function()
{
}类与对象
class stu
{
//类的成员变量
id:number;
name:string;
//构造方法
constructor(name:string, id:number)
{
this.name = name;
this.id = id;
}
//类的成员方法
getName():string
{
return this.name;
}
setName(name:string):void{
console.log("调用了父类的setname方法");
this.name = name;
}
}
//类的继承与多态
class ITStu extends stu
{
static major:string;//专业
getMajor()
{
return"你这西瓜不熟啊";
}
setName(name:string)
{
super.setName(name);
}
}
let li = new ITStu("西瓜",1);
console.log(ITStu.major);
ITStu.major = "水果摊"
console.log(ITStu.major);模块与命名空间
模块系统
//ES6的模块和Node的模块是不兼容的, 所以TS为了兼容两者就推出了
export = xxx;
import xxx = require('path');命名空间
命名空间可以看做是一个微型模块,
当我们先把相关的业务代码写在一起, 又不想污染全局空间的时候, 我们就可以使用命名空间
本质就是定义一个大对象, 把变量、方法、类、接口等都放里面
命名空间和模块区别
-
在程序内部使用的代码, 可以使用命名空间封装和防止全局污染
-
在程序内部外部使用的代码, 可以使用模块封装和防止全局污染
总结: 由于模块也能实现相同的功能, 所以大部分情况下用模块即可
例子
namespace Validation {//里面的东西不会污染全局空间
const lettersRegexp = "chongchong"
export const LettersValidator = (value) =>{
return lettersRegexp.test(value);
}
}注意
//在ts当中接口和命名空间是可以重名的, ts会将多个同名的合并为一个
// 1.接口
interface test
{
name:string;
}
interface test
{
age:number;
}
//合并后的结果
interface test
{
name:string;
age:number;
}
class Person implements test
{
name:string;
age:number;
}
// 1.1同名接口如果属性名相同, 那么属性类型必须一致
interface test
{
name:string;
}
interface test
{
name:number;//报错
}
// 1.2同名接口如果出现同名函数, 那么就会成为一个函数的重载
interface test
{
getValue(value:number):number;
}
interface test
{
getValue(value:string):number;
}
let obj:test =
{
getValue(value:any):number{
if(typeof value === 'string')
{
return value.length;
}
else
{
return value.toFixed();
}
}
}
console.log(obj.getValue("123456"));
console.log(obj.getValue(3.14));
// 2.命名空间
namespace Validation
{
export let name:string = 'buchong';
}
namespace Validation
{
export let age:number = 18;
}
console.log(Validation.name);
console.log(Validation.age);
// 1.1同名的命名空间中不能出现同名的变量,方法等
namespace Validation
{
export let name:string = 'buchong';
export let say = ()=> "123";
}
namespace Validation
{
export let name:string = 'qw';//错误
export let say = ()=> "123";//错误
}
// 1.2同名的命名空间中其它命名空间没有通过export导出的内容是获取不到的
namespace Validation
{
let name:string = 'buchong';
}
namespace Validation
{
export let say = ()=>{
console.log('chong');
};
}
Validation.say();//不导出 获取不到数值合并
// 命名空间和类合并
// 注意点: 类必须定义在命名空间的前面
// 会将命名空间中导出的方法作为一个静态方法合并到类中
class Person
{
say():void
{
console.log('xigua');
}
}
namespace Person
{
export const huaqiang = ():void=>{
console.log('bubaoshu');
}
}
console.dir(Person);
// 命名空间和函数合并
// 注意点: 函数必须定义在命名空间的前面
function getCounter()
{
getCounter.count++;
console.log(getCounter.count);
}
namespace getCounter
{
export let count:number = 0;
}
// 命名空间和枚举合并
// 注意点: 没有先后顺序的要求
enum Gender
{
Male,
Female
}
namespace Gender
{
export const Yao:number = 666;
}
console.log(Gender);
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
