TypeScript

最新推荐文章于 2025-03-21 11:42:17 发布

原创最新推荐文章于 2025-03-21 11:42:17 发布 · 277 阅读

CC 4.0 BY-SA版权

安装：

npm install typescript -g

检测版本：

tsc --version
//如果出现 Version 3.83
//说明TypeScrip成功安装

注：创建TypeScript项目，切换到项目目录，在使用npm命令安装。
然后初始化自己的项目，初始化命令如下：

tsc --init

执行初始化你的项目文件夹里会生成一个tsconfig.json项目配置文件。
准备工作已经做好了，开始TypeScript的学习了。
在你的项目文件夹中构建一个dist文件夹，这个文件夹是输出目录，在构建一个src文件夹，这个文件夹是源文件夹。
开始tsc的第一个代码
在src里创建一个greeter.ts,这个后缀名为 .ts 就是 TypeScript 的文件。
在greeter.ts文件中键入一下代码：

function greeter(person:any) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);
//在严格模式下会报错，需要把person变为any类型，来解决报错问题

然后把 ts文件 编译为 js文件，编译命令为：

tsc ./src/greeter.ts

同时就会在src目录里出现一个由ts文件编译产生的js文件，但是通过改变ts文件中user的值，js文件中不会随之改变。那么如何改变这个问题呢。我们需要改动tsconfig.json里的配置内容：

{
	"compilerOptions":{
		"outDir":"./dist", //输出目录
		 "rootDir": "./src", //源文件目录
	}
}

然后把src里编译好的js文件删掉并且在dist文件夹里新建一个index.html，键入代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>ts</title>   
  </head>
  <body>    
    <script src="./greeter.js"></script>
  </body>
</html>

然后使用观察者模式，命令如下：

tsc -w

它会观察项目的改变，会自动在dist文件夹中生成greeter.js文件，之后ts文件一旦发生改变，整个项目都会自动编译。
注：如果在编译过程中有这种报错信息
interactions: Set< Scheduler Interaction >，
我们只需把tsconfig.json里面的 “target”: "es5"换成 “target”: "es6"就可以了。

接口的学习
TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
我们先来写一个接口：

interface Person{
  name:string
  age:number
 }
 //定义了一个Person接口 name是字符串类型 age数字类型
 let user={
   name:"Jane User",
   age:18,
 }
 //定义用户
 function greeter(person:Person){
   return `${person.name} 今年 ${person.age}`
}
//定义一个方法，要求问候方法要求参数person类型为Person
document.body.inneHTML = greeter(user);

数据类型
基础的数据类型的声明

let isDone:boolean = true;
//声明一个布尔类型的变量
let num:number = 20;
//声明一个数字类型的变量
let srt:string = "I Love TypeScript";
//声明一个字符串类型的变量
console.log(isDone,num,str);

数组类型

let arr:number[]=[1,3,5,6];
//number类型的数组
let arr2:Array<string>=["I", "Love", "TypeScript"];
//也可以以这种方式定义数组

元组类型
表示已知元素数量和类型的数组

let x:[string,number]=["Jane Use",20];
console.log(x);

object对象

let obj:Object = {
  name:"Jane Use",
  age:18
}
console.log(obj)

如果只想输出对象中的年纪

//第一种解决方法
let obj:any = {
  name:"Jane Use",
  age:18
}
console.log(obj.age);
//any任意类型
//第二种方法可以定义一个接口这里不再赘述

any不确定类型

let notSure:any = 18;
console.log(notSure);
//any类型可以用于任何数据类型

//any类型的数组
let arr3:any[]=["123","abc",456];
console.log(arr3);

特殊类型
void类型
与any相反，表示没有任何类型，当一个函数没有返回值，其返回值的类型是void

function warnUser ():void{
  alert("你好");
}
warnUser();

Null 和 Undefined
这两个都只能定义null和undefined

let n:null = null;
let u:undefined = undefined;
console.log(n,u)

接口

interface SqureConfig{
color:string,
width:numbe,
}
//这就定义好了一个方块配置接口

//定义一个函数创建方块
function createSqure(config:SqureConfig){
//需要传入一个参数 config 必须是 SqureConfig类型
console.log(`这是个${config.color}的方块，面积是${config.width*config.width}`);
}
//执行参数 执行函数
 createSqure({color:"red",width:28});
//传入的参数必须符合接口

接口小技巧
接口类型可以是多种

interface SqureConfig{
color:string,
width:numbe | string,
}
function createSqure(config:SqureConfig){
let w = window.parseInt(config.width+"");
console.log(`这是个${config.color}的方块，面积是${w*w}`);
}
createSqure({color:"red",width:28});
createSqure({color:"red",width:"20"});
//可以赋值string类型，也可以赋值number类型

参数可选

interface SqureConfig{
color?:string,
width?:numbe | string,
}
function createSqure(config:SqureConfig){
let baseConfig = {color:"white",width:10};
//设置默认值
if(config.color){
  baseConfig.color = config.color;
}
if(config.width){
  baseConfig.width = config.width;
}
console.log(`这是个${baseConfig.color}的方块，面积是${baseConfig.width*baseConfig.width}`)
}
eateSqure({color:"red",width:28});
eateSqure({color:"red"});
eateSqure({});

函数
参数类型指定，函数的返回值与js函数不同

function add(x:number,y:number):number{
//第三个number是返回值的类型
  return x+y;
}
//定义一个函数add 参数x,y必须是number类型，返回值也必须是number类型
console.log(add(4,5))

可选参

function add(x:number,y?:number):number{ 
  let _y = y || 10;
  return x + _y;
  }
  console.log(add(5));
  console.log(add(5,20));

默认参

function add(x:number,y:number=20):number{
return x+y;
}
console.log(add(7));
console.log(add(3,4));

箭头函数

let add=(x:number,y:number):number => x+y;
console.log(add(5,7));