博客地址 ：https://www.cnblogs.com/sandraryan/
要把ts文件引入到html中，首先要转码为js文件。
步骤：
终端运行： npm i -g typescript
tsc --init
然后再vscode中ctrl shift b， 点击watch
以后保存ts文件，js文件自动刷新
如果你觉得这个方法太简单 你可以选择写一行代码在终端重新编译一次，指令是： tsc ts文件名，进行编译
然后看看基本语法叭
声明变量：
先搞一个html文件吧转码后的js文件引进去，然后我们操作ts文件（你懂我意思吧）
这个是ts文件命名为ts1.ts
声明变量很简单，都写在注释里了~~~~
总之就是：
ts变量的声明
1.ts在声明变量时，要规定变量的类型，
2.如没有规定，会在第一次为变量赋值时确定它的类型
3.一旦一个变量的类型被确定，那么之后使用这个变量时，不能改变变量类型（会报错）
let a = 100; console.log(1); /** * ts变量的声明 * 1.ts在声明变量时，要规定变量的类型， * 2.如没有规定，会在第一次为变量赋值时确定它的类型 * 3.一旦一个变量的类型被确定，那么之后使用这个变量时，只能依托这个类型 */ // a = 'ji'; // 声明变量时约束类型 let bol:boolean = true; // bol = 2333; // 声明数组list，数组中所有类型都是字符串 let list:string[] = ['hi','guys','how','do','you','do']; console.log(list); // 声明数组另一种方法 let arr:Array<string> = ['hi','guys','how','do','you','do']; console.log(arr); // 元组: 声明时规定每个元素类型，规定元素个数，即一个固定长度的类型不同的数组 let t:[boolean,string,number] = [false,'hi',233]; // 不能push 不能修改 // 声明枚举类型 //将所有的可能性一一列举在某个数据中，需要取值时可以用index，获取index可以用数据获取 //下标从0开始 也可手动设置下标设置好后，下标从该设置往后延续10 11 ... enum Color { //要枚举出来的数据本身 yellow,red,green,blue } console.log(Color); console.log(Color['yellow']); console.log(Color[1]); // 声明一个any的数据类型 let an:any = 90; an = 'hello'; an = [2,3,4]; console.log(an); // void类型的数据只能复制为null或者undefined let v:void; console.log(v);
这个是转码后的js文件
"use strict"; var a = 100; console.log(1); /** * ts变量的声明 * 1.ts在声明变量时，要规定变量的类型， * 2.如没有规定，会在第一次为变量赋值时确定它的类型 * 3.一旦一个变量的类型被确定，那么之后使用这个变量时，只能依托这个类型 */ // a = 'ji'; // 声明变量时约束类型 var bol = true; // bol = 2333; // 声明数组list，数组中所有类型都是字符串 var list = ['hi', 'guys', 'how', 'do', 'you', 'do']; console.log(list); // 声明数组另一种方法 var arr = ['hi', 'guys', 'how', 'do', 'you', 'do']; console.log(arr); // 元组: 声明时规定每个元素类型，规定元素个数，即一个固定长度的类型不同的数组 var t = [false, 'hi', 233]; // 不能push 不能修改 // 声明枚举类型 //将所有的可能性一一列举在某个数据中，需要取值时可以用index，获取index可以用数据获取 //下标从0开始 也可手动设置下标设置好后，下标从该设置往后延续10 11 ... var Color; (function (Color) { //要枚举出来的数据本身 Color[Color["yellow"] = 0] = "yellow"; Color[Color["red"] = 1] = "red"; Color[Color["green"] = 2] = "green"; Color[Color["blue"] = 3] = "blue"; })(Color || (Color = {})); console.log(Color); console.log(Color['yellow']); console.log(Color[1]); // 声明一个any的数据类型 var an = 90; an = 'hello'; an = [2, 3, 4]; console.log(an); // void类型的数据只能复制为null或者undefined var v; console.log(v);
引入html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="ts1.js"></script>
</body>
</html>
函数
ts中函数也很简单~ 举个例子
ts函数可以指定参数和返回值的类型，也可以添加默认值（在声明函数添加形参的时候）
// 函数 function fn(x:number,y:number):number{ return x+y; } let r:number = fn(3,4); console.log(r); //7 // 声明函数时规定函数参数类型和返回值的类型，函数调用时必须严格遵循这个规定，否则编码报错 // 为参数设置默认值，拥有默认值的参数应该声明在参数列表最后面 function fn2(x:number=10,y:number=20):number{ return x+y; } let r2 = fn2(); console.log(r2); // 函数的剩余参数 // an是除了num之外的所有参数列表，成为剩余参数，类型规定为string，是个数组 function fn3(num:number,...an:string[]){ console.log(num); console.log(an); } fn3(45,'a','b','c'); // 剩余参数也可以是个元组，规定类型 function fn4(num:number,...an:[string,boolean]){ console.log(num); console.log(an); } fn4(45,'r',true);
转码后的js文件
"use strict"; // 函数 function fn(x, y) { return x + y; } var r = fn(3, 4); console.log(r); //7 // 声明函数时规定函数参数类型和返回值的类型，函数调用时必须严格遵循这个规定，否则编码报错 // 为参数设置默认值，拥有默认值的参数应该声明在参数列表最后面 function fn2(x, y) { if (x === void 0) { x = 10; } if (y === void 0) { y = 20; } return x + y; } var r2 = fn2(); console.log(r2); // 函数的剩余参数 // an是除了num之外的所有参数列表，成为剩余参数，类型规定为string，是个数组/ function fn3(num) { var an = []; for (var _i = 1; _i < arguments.length; _i++) { an[_i - 1] = arguments[_i]; } console.log(num); console.log(an); } fn3(45, 'a', 'b', 'c'); // 剩余参数也可以是个元组，规定类型 function fn4(num) { var an = []; for (var _i = 1; _i < arguments.length; _i++) { an[_i - 1] = arguments[_i]; } console.log(num); console.log(an); } fn4(45, 'r', true);
类的声明
ts文件：
// 类的声明
// 类的属性需要先声明在使用
class Point{
// 在x=90这个表达式里x被隐式的规定为number类型
// 如果没有一开始就规定类型，会将第一次赋值的类型作为这个属性的类型
x = 90;
y:number;
// readonly 只读属性，不可以操作
readonly age:number = 100;
constructor(y){
this.y = y;
}
getAge():number{
return this.age;
}
}
let p = new Point(70);
// console.log(p);
// Point {x: 90, y: 70}
let age = p.getAge();
console.log(p);
// Point {x: 90, age: 100, y: 70}
js文件：
var Point = /** @class */ (function () {
function Point(y) {
// 在x=90这个表达式里x被隐式的规定为number类型
// 如果没有一开始就规定类型，会将第一次赋值的类型作为这个属性的类型
this.x = 90;
this.y = y;
}
return Point;
}());
var p = new Point(70);
console.log(p);
// Point {x: 90, y: 70}
抽象类
ts：
// 抽象类 abstract class People{ // 声明属性 readonly eyes:number = 2; // 声明类的一个普通方法 public eat(){ console.log('i can eat'); } //声明类的抽象方法，抽象方法不能有方法体，只能约束参数和返回值的类型 abstract run(); abstract sum(x:number,y:number):number; } // 抽象类里不能实例化对象，因为抽象类中包含了抽象方法，抽象方法没有方法体，如果允许从抽象类中实例化对象，后面的逻辑都不成立 //let p = new People(); //报错：无法创建抽象类的实例。
js
"use strict"; // 抽象类 var People = /** @class */ (function () { function People() { // 声明属性 this.eyes = 2; } // 声明类的一个普通方法 People.prototype.eat = function () { console.log('i can eat'); }; return People; }());