TypeScript基础篇

已注销
114 阅读4分钟

第一章

一：环境搭建

首先需要在电脑有npm下 下载typescript

命令是：npm i -g typescript

输入tsc可以查看是否下载成功ts

typescript的官网

www.runoob.com/typescript/…

www.typescriptlang.org/docs/handbo…

文件后缀都是ts（是简称的typescript）

二：创建文件和编译js文件

  1. 创建ts文件，后缀名是ts

  2. 在文件夹内输入cmd打开终端

  3. 在终端完善文件路径，输入tsc 需要编译的文件名字（成功的结果就是文件名，没有报错就是最好的结果）

  4. 查看文件夹 会有一个编译好的js文件，内容和ts文件一样

  5. js文件可以在其他文件执行 但是 ts文件暂时不可以在浏览器中执行（后期应该可以，在学习）

三：typescript的基础语法

  • 类型声明
    • 类型声明是TS非常重要的一个特点
    • 通过类型声明可以指定TS中变量（参数、形参)的类型
    • 指定类型后，当为变星赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错。
    • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的
  • 语法:
let变量:类型;

let变量:类型=值;

function fn(参数:类型,参数:类型):类型{
  
}

let a:number;
/*声明一个变量是number，在以后的使用过程中a的值只能是数字*/

a=10;
a=33;
// a= "yi";  /*会报错，因为a只能是number*/

let c:boolean = true;
//声明完直接赋值


//在函数中设置参数的类型是number   也设置返回值是number
function sum(a:number,b:number) :number{
  return a+b;
}
sum(1233,456);

// sum(123,b:"456")
/*会直接报错*/

// sum(123,456,789)
/*789会报错，因为参数只有两位*/
  • 自动类型判断
    • TS拥有自动的类型判断机制
    • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型。
    • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
  • 类型:

  1. number
let decimal : number = 6;
let hex: number = Oxf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
  1. string
let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;
  1. Boolean
let flag: boolean = true;
  1. 字面量
let a = 10;
a = 10;
// a = 11;
/*a此时只能是10，不能改为11*/
  1. 联合类型 使用 | 来连接多个类型（联合类型）
let b : "male" | "female" ;

b = "male";
b = "female";
//此时b只能是两个值，是他或者她

let  c : boolean | string;

c = "您好";
c = true;
//此时c只能是布尔类型或者字符串类型
  1. any 表示的是任意类型
  • 一个变量设置类型是any后相当于关闭了typescript的类型检测
/*显示使用any*/
let f :any;

/*隐式使用any
* 声明变量不指定类型，系统会自动判断类型是any*/
let d;
d = 10;
d = "10";
d = true;
  1. unknown未知的类型
let e:unknown;
e = "123";
e = 123;
e = true;
//此时e的类型是未知的

/*any类型和unknown类型赋值的区别*/

e = d;//d的类型是any，他可以赋值给任意的变量
//s = e; //e是unknown，不能直接赋值给别的值 可以判断赋值

let s:string;
if (typeof e === "string"){
    s = e;
}
  1. 类型断言 可以告诉解析器变量的实际类型

语法：

  • 变量 as 类型
  • <类型>变量
s = e as string;
s = <string>e;
  1. void 表示为空
//函数为例 没有返回值
function fn():void {
    // return true; 设置了返回的值就会报错，因为void类型没有返回值
    return null;
    return undefined;
//    返回值是undefined和null都还是可以的
}
  1. never 没有值 永远不会反悔结果
    • 一般是报错
function fn1():never {
    throw new Error('报错了');
}
  1. object 表示一个js对象
let a :object;  //不太推荐
a = {};
a = function () {
};

//{}用来指定对象中 可以包含哪些属性
//语法：{属性名：属性值，属性名：属性值}
//在属性名后面加？表示该属性可选填写的
let b :{name:string,age?:number};
b = {name:'孙悟空',age:18};

//如果当 后期想加属性时 还要一个个填加  这时有个方法
//[propName:string]:any  表示任意类型的值
let c :{name:string,[xxx:string]:any};
c = {name:'猪八戒',age:18,gender:'男'};


/**
 * 设置函数结构的类型声明
 *      语法：(形参:类型，形参:类型...)=>返回值
 */
let d : (z:number,n:number) =>number;
  d = function(n1:number,n2:Number):number{
    return 10;
  }
  1. array数组

** 相同类型的值
*** 数组类型的声明：
*** 类型：[ ]
*** Array<类型>*

// string[]表示字符串数组
let e : string[];
e:["0","1","2"]

// number[]表示数值
let f :number;

let g:Array<number>;
g = [1,2,3,4]
  1. 元组类型
  • 固定长度的数组
let h:[string,number];
  h = ["hellow",123];
  1. enum 枚举
  • 可能的情况列出来
// 创建一个枚举 类名叫gender
enum Gender{
  male = 0,
  female = 1,
}

let i:{name:string,gender:Gender};
i = {
  name:'孙悟空',
  gender :Gender.male   //"male"
}
console.log(i.gender === Gender.male);  //true

15.&（于）表示同时

let j:{name:string}&{age:number};
// 赋值时两个都要写
j = {name:'孙悟空',age:18};

16.类型的别名

type myType = 1 | 2 | 3 | 4 | 5;
let k:myType;
let l:myType;
let m:myType;

// k = 6;    报错，因为mytype里面没有定义6

avatar
文章
阅读
粉丝