TS学习笔记

最新推荐文章于 2024-03-22 10:11:52 发布

编个羊出来玩

最新推荐文章于 2024-03-22 10:11:52 发布

阅读量162

点赞数

分类专栏：前端开发文章标签： typescript

本文链接：https://blog.csdn.net/fffffffzl/article/details/112802618

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

TS学习

TS介绍
微软开发的一款开源的编程语言。
是JS的超集，遵循最新的ES6、ES5规范，扩展了JS语法。
更像后端java、C#这样的面向对象的语言。可以让JS开发大型企业项目。
谷歌也在大力支持TS推广、谷歌的angular2.x+就是基于TS语法。
最新的vue、React也可以集成TS
node.js框架Nestjs、midway中用的也是Typescript语法。
安装和编译
安装：
npm install -g typescript
cnpm install -g typescript
yarn install -g typescript
运行：
tsc helloworld.ts
TS开发工具VScode配置自动编译.ts文件
创建tsconfig.json文件生成配置文件 tsc --init 生成配置文件
在此之后进行下面步骤实现监听TS文件的保存进而转换为JS文件
Terminal->Run Task->typescripy->tsc:watch - tsconfig.json

TS中的数据类型
typescript中为了使编写的代码更加规范，更有利于维护，增加了类型校验，在typescript中主要给我们增加了：
布尔类型（boolean）
数字类型（number）
字符串类型（string）
数组类型（array）
元组类型（tuple）
枚举类型（enum）
任意类型（any）
null和undefined
void类型
never类型

/** typescript中为了使编写的代码更加规范，更有利于维护，增加了类型校验，在typescript中主要给我们增加了：
	布尔类型（boolean）
	数字类型（number）
	字符串类型（string）
	数组类型（array）
	元组类型（tuple）
	枚举类型（enum）
	任意类型（any）
	null和undefined
	void类型
    never类型 
*/

// 布尔类型（boolean） true false

let flag:boolean=true
flag=false

// 数字类型（number）
let a:number = 123
console.log(a)
// a="string" // 错误写法，必须是number类型
a = 12.4
console.log(a)

// 字符串类型（string）
let str:string = "this is ts"
// str = 12
// str = false
str = "hello ts"
console.log(str)

// 数组类型（array）
// es5 var arr = [1, '123', false]
// 1、第一种定义数组方式
let arr:number[] = [1, 2, 4, 432, 33] // 必须是数字
console.log(arr)
let arr1:string[] = ["2", "332", "123dsd"] // 必须是string
console.log(arr1)

// 2、第二种定义数组方式
let arr2:Array<number> = [11, 22, 33, 43, 34]
console.log(arr2)
let arr3:Array<string> = ['22', "22", "php", "java", "c++"]
console.log(arr3)


// 元组类型（tuple）属于数组的一种
let arr4:[string, number, boolean] = ["123", 12, false]

// 枚举类型（enum）定义标识符
/** 
 * 随着计算机不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的计算，
 * 例如：性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。
 * 在其他程序设计语言中，一般用一个数值来表示某一状态，这种处理方式不直观，易读性差。
 * 如果能在程序中用自然语言中有相应含义的单词来表示某一状态，则程序就很容易阅读和理解。
 * 也就是说，事先考虑到某一变量可能取得值，尽量用自然语言中含义清楚的单词；来表示他的每一个值，
 * 这种方法称为枚举方法，用这种方法定义的类型称枚举类型。
 * enum 枚举名{
 *      标识符[=整型常数],
 *      标识符[=整型常数],
 *      ...
 *      标识符[=整型常数],
 * };
 */
//pay_status 0 未支付 1 支付 2 交易成功

// flag 1 表示true 0 表示 false
enum Flag {
    success = 1,error = -1
}
var f:Flag = Flag.success
console.log(f)

// enum Color {red, blue, orange}
// var c:Color = Color.blue
// console.log(c) // 默认是索引值，输出1

enum Color {red, blue=5, orange}
var c:Color = Color.orange
console.log(c) // 输出6

// 任意类型（any）
// var num:number = 123
// num="str"//报错
// var num:any = 123
// num = "123ss"
// num = true 
// console.log(num)
var col:string[] = ["red", "yellow", "blue"] // 可选链，TS3.7+支持
var oBox:any = document.getElementById('box')
oBox.style.color = col?.[0] 

// null和undefined 其他（never类型）数据类型的子类型
// var num:number
// console.log(num) // 输出undefined 报错

// var num:undefined
// console.log(num) // 输出undefined 正常

// var num:number | undefined
// console.log(num)

// var num:null
// num = 123 // 报错

// 一个元素可能是number类型，可能是null类型，可能是undefined
var num:number | null | undefined // 若赋值，只能赋值number类型
num = 1234
console.log(num)

// void类型 TS中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值
// ES5定义函数
// function run() {
//     console.log('run')
// }
// run()

// 表示方法没有任何返回类型
// function run():void {
//     console.log("run")
// }
// run()

// 错误写法
// function run():number {
//     console.log("run")
// }’

// 正确写法
function run():number {
    return 123
}
// never类型 其他类型（包括 null 和 undefined）的子类型，代表从不会出现的值
// 这意味着声明never的变量只能被never类型所赋值。
/**
 * var a1:undefined
 * a1 = undefined
 * var b1:null
 * b1 = null
*/
var a2:never
a2=(()=> {
    throw new Error("错误")
})()

"use strict";
/** typescript中为了使编写的代码更加规范，更有利于维护，增加了类型校验，在typescript中主要给我们增加了：
    布尔类型（boolean）
    数字类型（number）
    字符串类型（string）
    数组类型（array）
    元组类型（tuple）
    枚举类型（enum）
    任意类型（any）
    null和undefined
    void类型
    never类型
*/
// 布尔类型（boolean） true false
let flag = true;
flag = false;
// 数字类型（number）
let a = 123;
console.log(a);
// a="string" // 错误写法，必须是number类型
a = 12.4;
console.log(a);
// 字符串类型（string）
let str = "this is ts";
// str = 12
// str = false
str = "hello ts";
console.log(str);
// 数组类型（array）
// es5 var arr = [1, '123', false]
// 1、第一种定义数组方式
let arr = [1, 2, 4, 432, 33]; // 必须是数字
console.log(arr);
let arr1 = ["2", "332", "123dsd"]; // 必须是string
console.log(arr1);
// 2、第二种定义数组方式
let arr2 = [11, 22, 33, 43, 34];
console.log(arr2);
let arr3 = ['22', "22", "php", "java", "c++"];
console.log(arr3);
// 元组类型（tuple）属于数组的一种
let arr4 = ["123", 12, false];
// 枚举类型（enum）定义标识符
/**
 * 随着计算机不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的计算，
 * 例如：性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。
 * 在其他程序设计语言中，一般用一个数值来表示某一状态，这种处理方式不直观，易读性差。
 * 如果能在程序中用自然语言中有相应含义的单词来表示某一状态，则程序就很容易阅读和理解。
 * 也就是说，事先考虑到某一变量可能取得值，尽量用自然语言中含义清楚的单词；来表示他的每一个值，
 * 这种方法称为枚举方法，用这种方法定义的类型称枚举类型。
 * enum 枚举名{
 *      标识符[=整型常数],
 *      标识符[=整型常数],
 *      ...
 *      标识符[=整型常数],
 * };
 */
//pay_status 0 未支付 1 支付 2 交易成功
// flag 1 表示true 0 表示 false
var Flag;
(function (Flag) {
    Flag[Flag["success"] = 1] = "success";
    Flag[Flag["error"] = -1] = "error";
})(Flag || (Flag = {}));
var f = Flag.success;
console.log(f);
// enum Color {red, blue, orange}
// var c:Color = Color.blue
// console.log(c) // 默认是索引值，输出1
var Color;
(function (Color) {
    Color[Color["red"] = 0] = "red";
    Color[Color["blue"] = 5] = "blue";
    Color[Color["orange"] = 6] = "orange";
})(Color || (Color = {}));
var c = Color.orange;
console.log(c); // 输出6
// 任意类型（any）
// var num:number = 123
// num="str"//报错
// var num:any = 123
// num = "123ss"
// num = true 
// console.log(num)
var col = ["red", "yellow", "blue"]; // 可选链，TS3.7+支持
var oBox = document.getElementById('box');
oBox.style.color = col?.[0];
// null和undefined 其他（never类型）数据类型的子类型
// var num:number
// console.log(num) // 输出undefined 报错
// var num:undefined
// console.log(num) // 输出undefined 正常
// var num:number | undefined
// console.log(num)
// var num:null
// num = 123 // 报错
// 一个元素可能是number类型，可能是null类型，可能是undefined
var num; // 若赋值，只能赋值number类型
num = 1234;
console.log(num);
// void类型 TS中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值
// ES5定义函数
// function run() {
//     console.log('run')
// }
// run()
// 表示方法没有任何返回类型
// function run():void {
//     console.log("run")
// }
// run()
// 错误写法
// function run():number {
//     console.log("run")
// }’
// 正确写法
function run() {
    return 123;
}
// never类型 其他类型（包括 null 和 undefined）的子类型，代表从不会出现的值
// 这意味着声明never的变量只能被never类型所赋值。
/**
 * var a1:undefined
 * a1 = undefined
 * var b1:null
 * b1 = null
*/
var a2;
a2 = (() => {
    throw new Error("错误");
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        box
    </div>
</body>
</html>

<script src="./index.js"></script>

TS中的函数

// 函数的定义

// ES5函数定义方式

// // 函数申明类
// function run() {
//     return "run";
// }

// // 匿名函数
// var run2 = function() {
//     return "run2";
// }

// TS定义函数方法

// 函数声明法
function run():string {
    return 'run'
}

// 匿名函数法
var fun2 = function():number {
    return 123
}

// TS中定义方法传参
function getInfo5(name:string, age:number):string {
    return `${name} --- ${age}`
}
console.log(getInfo5('张三', 20))

var getInfo2 = function(name:string, age:number):string {
    return `${name} --- ${age}`
}
console.log(getInfo2('张三', 40))

// // 没有返回值的方法
function run3():void {
    console.log('run3')
}
run3()

// 方法可选参数

// ES5里面方法的实参和形参可以不一样，但是TS中必须一样，如果不一样就需要配置可选参数 ?配置
function getInfo3(name:string, age?:number):string {
    if (age) {
        return `${name} --- ${age}`
    } else {
        return `${name} --- 保密`
    }
}
console.log(getInfo3('张三'))

// 可选参数必须配置到最后面

// ES5没法设置默认参数，ES6和TS可以设置默认参数 可选参数
function getInfo4(name:string, age:number=20):string {
    if (age) {
        return `${name} --- ${age}`
    } else {
        return `${name} --- 保密`
    }
}
console.log(getInfo4('张三'))

// 剩余参数
// function sum(a:number, b:number, c:number, d:number):number {
//     return a+b+c+d
// }
// console.log(sum(1, 2, 3, 4))

// 扩展运算符，接收形参
function sum(...result:number[]):number {
    var sum = 0
    for(var i = 0; i < result.length; i++) {
        sum += result[i]
    }
    return sum
}
console.log(sum(1, 2, 3, 4))

function sum4(a:number, ...result:number[]):number {
    var sum = 0
    for(var i = 0; i < result.length; i++) {
        sum += result[i]
    }
    console.log(a)
    return sum
}
console.log(sum4(1, 2, 3, 4))

// 函数的重载

// java中方法的重载，重载指的是两个或者两个以上同名函数，但他们的参数不一样，这时会出现函数重载的情况
// typescript中的重载，通过为同一个函数提供多个函数类型定义来实现多种功能的目的
// typescript为了兼容es5、es6重载的写法和java中有区别

// es5中出现同名方法，下面的会替换上面的方法
// function css(config) {
// }

// function css(config, value) {
// }

// ts中的重载
function getInfo(name:string):string;

function getInfo(age:number):number;

function getInfo(str:any):any {
    if (typeof str === "string") {
        return "我叫," + str
    } else {
        return "我的年龄是" + str
    }
}

// console.log(getInfo('张三')) // 正确
// console.log(getInfo(20)) // 正确
// console.log(getInfo(true)) // 错误写法

// ts重载参数一样

function getInfo7(name:string):string;

function getInfo7(name:string, age:number):string;

function getInfo7(name:any, age?:any):any {
    if (age) {
        return `我是${name} --- ${age}`
    } else {
        return `我是${name}`
    }
}

console.log(getInfo7('张三')) // 正确
// console.log(getInfo7(123)) // 错误
console.log(getInfo7('张三', 20)) // 正确
// console.log(getInfo7('张三', '20')) // 错误

// 箭头函数

// es6
// setTimeout(function() {
//     console.log('run')
// }, 1000)

// 箭头函数this指向上下文
setTimeout(()=>{
    console.log('run')
},1000)

"use strict";
// 函数的定义
// ES5函数定义方式
// // 函数申明类
// function run() {
//     return "run";
// }
// // 匿名函数
// var run2 = function() {
//     return "run2";
// }
// TS定义函数方法
// 函数声明法
function run() {
    return 'run';
}
// 匿名函数法
var fun2 = function () {
    return 123;
};
// TS中定义方法传参
function getInfo5(name, age) {
    return `${name} --- ${age}`;
}
console.log(getInfo5('张三', 20));
var getInfo2 = function (name, age) {
    return `${name} --- ${age}`;
};
console.log(getInfo2('张三', 40));
// // 没有返回值的方法
function run3() {
    console.log('run3');
}
run3();
// 方法可选参数
// ES5里面方法的实参和形参可以不一样，但是TS中必须一样，如果不一样就需要配置可选参数 ?配置
function getInfo3(name, age) {
    if (age) {
        return `${name} --- ${age}`;
    }
    else {
        return `${name} --- 保密`;
    }
}
console.log(getInfo3('张三'));
// 可选参数必须配置到最后面
// ES5没法设置默认参数，ES6和TS可以设置默认参数 可选参数
function getInfo4(name, age = 20) {
    if (age) {
        return `${name} --- ${age}`;
    }
    else {
        return `${name} --- 保密`;
    }
}
console.log(getInfo4('张三'));
// 剩余参数
// function sum(a:number, b:number, c:number, d:number):number {
//     return a+b+c+d
// }
// console.log(sum(1, 2, 3, 4))
// 扩展运算符，接收形参
function sum(...result) {
    var sum = 0;
    for (var i = 0; i < result.length; i++) {
        sum += result[i];
    }
    return sum;
}
console.log(sum(1, 2, 3, 4));
function sum4(a, ...result) {
    var sum = 0;
    for (var i = 0; i < result.length; i++) {
        sum += result[i];
    }
    console.log(a);
    return sum;
}
console.log(sum4(1, 2, 3, 4));
function getInfo(str) {
    if (typeof str === "string") {
        return "我叫," + str;
    }
    else {
        return "我的年龄是" + str;
    }
}
function getInfo7(name, age) {
    if (age) {
        return `我是${name} --- ${age}`;
    }
    else {
        return `我是${name}`;
    }
}
console.log(getInfo7('张三')); // 正确
// console.log(getInfo7(123)) // 错误
console.log(getInfo7('张三', 20)); // 正确
// console.log(getInfo7('张三', '20')) // 错误
// 箭头函数
// es6
// setTimeout(function() {
//     console.log('run')
// }, 1000)
// 箭头函数this指向上下文
setTimeout(() => {
    console.log('run');
}, 1000);

编个羊出来玩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TS学习笔记

TS学习TS介绍微软开发的一款开源的编程语言。是JS的超集，遵循最新的ES6、ES5规范，扩展了JS语法。更像后端java、C#这样的面向对象的语言。可以让JS开发大型企业项目。谷歌也在大力支持TS推广、谷歌的angular2.x+就是基于TS语法。最新的vue、React也可以集成TSnode.js框架Nestjs、midway中用的也是Typescript语法。安装和编译安装：npm install -g typescriptcnpm install -g typescri
复制链接

扫一扫