一.简单介绍ts.
ts全称TypeScript,他是一门跨平台的编程语言,官网说ts是js的超集合,我觉得就是js的一个加强版,他融合了js的一些优点并加了自己特有的东西,比如接口、泛型等。
ts是不能直接被浏览器编译的,它会转化成js去编译,所以我们不用担心以前封装的js方法不能使用,依然是可以的,换句话说ts是写给自己看的,
js是写给浏览器看的。ts在编译完成后终端就会报错,js只有浏览器控制台能看到错误,这也是一个特点吧。ts也是支持node.js环境的。
二.安装ts.
打开cmd小黑框 输入npm install -g typescript或者cnpm install -g typescript
输入tsc -V 是否安装成功
三.练习ts,通过代码总结ts和js的区别
ts文件
(()=>{
// 规定str形参是一个string类型
function sayHi(str:string) {
return str + '你好呀!';
};
let text = "张杰小朋友";
console.log(sayHi(text));
})()
html文件
<!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>
<script src="./day01.ts"></script>
</body>
</html>
打开浏览器运行:报错Refused to execute script fromits MIME type (‘video/vnd.dlna.mpeg-tts’) is not executable.
意思就是浏览器不能直接运行ts类型的脚本
打开vscode终端 执行tsc ./day01.ts 对ts进行编译
编译完成后生成一个js文件
然后浏览器运行就正常了
js文件
(function () {
// 规定str形参是一个string类型
function sayHi(str) {
return str + '你好呀!';
}
;
var text = "张杰小朋友";
console.log(sayHi(text));
})();
总结:首先浏览器不能直接运行ts文件,只能编译成js才能运行,我们在ts中规定了形参str的类型为string,编译成js后没有类型,还有在ts中我们用let声明变量,编译成js后变成了var。
四.vscode自动编译ts=>js
1.首先通过 tsc --init生成tsconfig.json文件 其次配置两个配置项
“outDir”: “./js”, /* 将ts编译成js放到js文件中 /
“strict”: false, / 不使用严格模式 */
2.然后打开对应文件vscode上面:终端=>运行任务=>显示所有任务=>监听tsc
3.在对应文件下新建一个ts文件他会自动生成一个js文件(编译生成的),然后创建一个html直接引入咱们的js文件就可以运行了。
五.ts的类型注解.
类型注解是指我们在使用类型时可以放置在任何位置的注解。在TypeScript中,使用类型注解并非强制性要求。它有助于编译器检查变量的类型,并避免处理数据类型时出现错误。
1.列子
ts文件
(()=>{
// 规定str形参是一个string类型
function sayHi(str:string) {
return str + '你好呀!';
};
// let text = "张杰小朋友";
let text =[10,20];
console.log(sayHi(text));
})()
编译时报错:Argument of type ‘number[]’ is not assignable to parameter of type ‘string’.意思就是这个number[]不能作为函数的实参
js文件
(() => {
// 规定str形参是一个string类型
function sayHi(str) {
return str + '你好呀!';
}
;
// let text = "张杰小朋友";
let text = [10, 20];
console.log(sayHi(text));
})();
为什么还能正常编译成js呢,因为js是弱类型语言,js=ts:any.
浏览器还能正常输出,但是在真正开发中它还是个bug , 这也形成了ts比js更严谨,开发过程中可以在控制在直接看到错误,一般ts类型错了直接会提示。
六.ts的接口
接口简单的可以理解为类型注解的集合,他可以同时定义几个变量的类型
代码演示
(() => {
// 定义一个接口
interface Iperson{
firstname : String,
lastname : String,
age:Number
}
function show(person:Iperson){
return person.firstname+""+person.lastname+""+person.age;
}
// 定义一个对象
const person ={
firstname:"zhang",
lastname:"jie",
age:18
}
console.log(show(person));
})();
七.ts的类
ts的类其实和js基本完全一样,看一下代码就懂了
ts文件
(() => {
// 定义一个接口
interface IPerson{
firstname : String,
lastname : String,
}
// 定义一个类型
class Person {
// 定义公共的字段(属性)
firstname: String
lastname:String
fullname:String
// 定义一个构造器函数
constructor(firstname:String,lastname:String){
this.firstname = firstname;
this.lastname = lastname;
this.fullname = this.firstname + "" + this.lastname;
}
}
// 定义一个函数
function show(person:IPerson){
return person.firstname + "" +person.lastname
}
// 实例化对象
const person = new Person('诸葛',"村妇");
console.log(show(person));
})();
编译后的js文件
(() => {
// 定义一个类型
class Person {
// 定义一个构造器函数
constructor(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
this.fullname = this.firstname + "" + this.lastname;
}
}
// 定义一个函数
function show(person) {
return person.firstname + "" + person.lastname;
}
// 实例化对象
const person = new Person('诸葛', "村妇");
console.log(show(person));
})();
ts对类的定义只是一个语法糖,本质上还是js构造函数的实现。